User

A component to display the user settins and navigational elements once the user is logged in. This makes use of the flyout component to show the content on hover or mobile.

Default

px

			
				<div class="o-user js-user ">
	<div class="o-user__trigger">
		<div class="o-user__picture">
			<img class="o-user__picture-image" src="/assets/images/user/profile.png" alt="Han Solo" title="Han Solo" />
		</div>
	</div>
	<div class="o-user__content">
		<ul class="o-user__nav">
			<li class="o-user__nav-item">
				<a class="o-user__nav-link" href="#">Opleidingen per thema</a>
			</li>
			<li class="o-user__nav-item">
				<a class="o-user__nav-link" href="#">Opleidingen per sector</a>
			</li>
			<li class="o-user__nav-item">
				<a class="o-user__nav-link" href="#">Opleidingstrajecten</a>
			</li>
			<li class="o-user__nav-item">
				<a class="o-user__nav-link" href="#">De voorwaarden</a>
			</li>
			<li class="o-user__nav-item">
				<a class="o-user__nav-link" href="#">Opleidingspremies</a>
			</li>
		</ul>
		<div class="o-user__footer">
			<div class="o-user__footer-item">
				<div class="a-formfield ">
					<div class="a-formfield__header">
						<label class="a-formfield__label " for="">
							Rol aanpassen
						</label>
					</div>
					<div class="a-formfield__wrapper a-formfield__wrapper--with-icon-after ">
						<select class="a-formfield__select" id="" name="">
							<option value="">Werknemer</option>
							<option value="">Werkgever</option>
						</select>
						<span class="a-formfield__icon-after icon-arrow-down-small"></span>
					</div>
				</div>
			</div>
			<div class="o-user__footer-item">
				<button class="a-button a-button--outline ">
					<span class="a-button__text">logout</span>
				</button>
			</div>
		</div>
	</div>
</div>
			

		

Documentation

States

  • is-open

    Indicates that the component is shown to the user. On desktop this is automatically done by hovering, but on mobile the user has to click to view the content.