Default

The Aligner component offers customization options in spacing through the use of design tokens. It aligns with the body container, and with the help of its 'start' and 'end' subcomponents, precise alignment of content to the left or right is achievable.

<!-- background color set to give visible presence to Aligner -->
<Aligner class="bg-blue-100">
	<Aligner.Item>
		<Button family="link" inset="true">
			<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
			Select your location
		</Button>
	</Aligner.Item>
	<Aligner.Item align="end">
		<LanguageSelector class="px-2">
			<LanguageSelector.Item lang="en" hreflang="en" aria-label="Visit our site in English" aria-current="true" href="#en">EN</LanguageSelector.Item>
			<LanguageSelector.Item lang="fr" hreflang="fr" aria-label="Visitez notre site en français." href="#fr">FR</LanguageSelector.Item>
			<LanguageSelector.Item lang="de" hreflang="de" aria-label="Besuchen Sie unsere Seite auf Deutsch" href="#de">DE</LanguageSelector.Item>
			<LanguageSelector.Item lang="es" hreflang="es" aria-label="Visite nuestro sitio en español" href="#es">ES</LanguageSelector.Item>
		 </LanguageSelector>
		<Button family="solid" inset="true">
			Cart
			<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path fill="currentColor" d="M7 22q-.825 0-1.412-.587T5 20q0-.825.588-1.412T7 18q.825 0 1.413.588T9 20q0 .825-.587 1.413T7 22m10 0q-.825 0-1.412-.587T15 20q0-.825.588-1.412T17 18q.825 0 1.413.588T19 20q0 .825-.587 1.413T17 22M6.15 6l2.4 5h7l2.75-5zM5.2 4h14.75q.575 0 .875.513t.025 1.037l-3.55 6.4q-.275.5-.737.775T15.55 13H8.1L7 15h12v2H7q-1.125 0-1.7-.987t-.05-1.963L6.6 11.6L3 4H1V2h3.25zm3.35 7h7z"/></svg>
		</Button>
		<Button family="solid" inset="true">
			Login
			<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path fill="currentColor" d="M5.85 17.1q1.275-.975 2.85-1.537T12 15q1.725 0 3.3.563t2.85 1.537q.875-1.025 1.363-2.325T20 12q0-3.325-2.337-5.663T12 4Q8.675 4 6.337 6.338T4 12q0 1.475.488 2.775T5.85 17.1M12 13q-1.475 0-2.488-1.012T8.5 9.5q0-1.475 1.013-2.488T12 6q1.475 0 2.488 1.013T15.5 9.5q0 1.475-1.012 2.488T12 13m0 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22m0-2q1.325 0 2.5-.387t2.15-1.113q-.975-.725-2.15-1.112T12 17q-1.325 0-2.5.388T7.35 18.5q.975.725 2.15 1.113T12 20m0-9q.65 0 1.075-.425T13.5 9.5q0-.65-.425-1.075T12 8q-.65 0-1.075.425T10.5 9.5q0 .65.425 1.075T12 11m0 7.5"/></svg>
		</Button>
	</Aligner.Item>
</Aligner>

Items

The masthead contents (links, buttons, text, a language switcher, the lozenge logo, and social media icons) should be placed inside the <Aligner.Item> and align its contents to the start or end of the component.

Link

Text

Button

<!-- background color set to give visible presence to Aligner -->
<Aligner class="bg-blue-100">
	<Aligner.Item>
		<Lozenge space="true" class="w-28" />
		<Button family="link" href="https://www.tevapharm.com/" target="_blank" inset="true">
			<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" ><path fill="currentColor" d="m12 15.39l-3.76 2.27l.99-4.28l-3.32-2.88l4.38-.37L12 6.09l1.71 4.04l4.38.37l-3.32 2.88l.99 4.28M22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.45 4.73L5.82 21L12 17.27L18.18 21l-1.64-7.03L22 9.24Z"/></svg>
			Link
		</Button>

		<!-- styling should be specific to the masthead -->
		<p>Text</p>

	</Aligner.Item>
	<Aligner.Item align="end">
		<Button family="solid" inset="true">
			Button
		</Button>
		<Button family="solid" href="https://www.tevapharm.com/" target="_blank" inset="true">
			Button
			<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" ><path fill="currentColor" d="m12 15.39l-3.76 2.27l.99-4.28l-3.32-2.88l4.38-.37L12 6.09l1.71 4.04l4.38.37l-3.32 2.88l.99 4.28M22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.45 4.73L5.82 21L12 17.27L18.18 21l-1.64-7.03L22 9.24Z"/></svg>
		</Button>
	</Aligner.Item>
</Aligner>