Language

Collapsable language component which displays the available languages to the user. Once a language is selected the copy of the page should change to the selected language. This makes use of the collapse classes and functionalities.

Default

px

			
				<div class="c-language ">
	<button class="c-language__active l-flex l-flex--align-items:center" aria-label="Select your language">
		<div class="c-icon c-language__arrow l-flex__item">
			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
			</svg>
		</div>
		<span class="l-flex__item">NL</span>
	</button>
	<ul class="c-language__list">
		<li class="c-language__item">
			<a lang="EN" hreflang="EN" class="c-language__link" href="#">EN</a>
		</li>
		<li class="c-language__item">
			<a lang="FR" hreflang="FR" class="c-language__link" href="#">FR</a>
		</li>
	</ul>
</div>
			

		

Documentation

States

  • is-open

    Indicates that the flyout is open and the content is shown.