The Soc header is designed to be applied after the the Soc States, information can be layed out to the right by using the soc-header-right class. Apply the soc-header-title class when a heavier font is required.
The header is by default a block element which flows like all other elements, however if required the element can be placed outside the soc-main-content with a fixed class added. This will create a fixed at top header and a scrollable content page. This requires javascript to calculate the height of the header. A more visual explanation:
The first example is the Soc header by itself, the second is the header combined with a Soc states element.
.soc-header>(div>span.soc-header-right{Leuven}+span.soc-header-title>span.soc-typography-name{Janssens }+{ Marina}+i.fa.fa-venus[aria-hidden="true"])+div>span{89120125468}+span.soc-header-right{304/00000468437}