Notifications

This component contains a notification icon together with a badge and is used to display the notifications received when hovering the icon. It makes use of the flyout component to show the content and is mainly presented within the header of the page.

Default

px

			
				<div class="o-notifications js-notifications ">
	<div class="o-notifications__label">
		<div class="a-amount-indicator o-notifications__badge">
			<span class="a-amount-indicator__icon icon-alert"></span>
			<span class="a-badge a-amount-indicator__badge undefined ">
				1
			</span>
		</div>
		<span class="o-notifications__label-text">Meldingen</span>
	</div>
	<div class="o-notifications__container">
		<ul class="m-notification-list">
			<li class="m-notification-list__item">
				<article class="m-notification ">
					<p class="m-notification__description">
						Vergeet de evaluatie voor “Excel basis” niet in te vullen alvorens je volgende les start
					</p>
					<time class="m-notification__time" datetime="1:20 pm">1:20 pm</time>
					<button class="m-notification__state">
						Markeren als gelezen
					</button>
				</article>
			</li>
			<li class="m-notification-list__item">
				<article class="m-notification is-read">
					<p class="m-notification__description">
						Vergeet de evaluatie voor “Excel basis” niet in te vullen alvorens je volgende les start
					</p>
					<time class="m-notification__time" datetime="1:20 pm">1:20 pm</time>
					<button class="m-notification__state">
						Gelezen
					</button>
				</article>
			</li>
			<li class="m-notification-list__item">
				<article class="m-notification is-read">
					<p class="m-notification__description">
						Vergeet de evaluatie voor “Excel basis” niet in te vullen alvorens je volgende les start
					</p>
					<time class="m-notification__time" datetime="1:20 pm">1:20 pm</time>
					<button class="m-notification__state">
						Gelezen
					</button>
				</article>
			</li>
			<li class="m-notification-list__item">
				<article class="m-notification is-read">
					<p class="m-notification__description">
						Vergeet de evaluatie voor “Excel basis” niet in te vullen alvorens je volgende les start
					</p>
					<time class="m-notification__time" datetime="1:20 pm">1:20 pm</time>
					<button class="m-notification__state">
						Gelezen
					</button>
				</article>
			</li>
		</ul>
		<div class="o-notifications__action">
			<a class="a-button a-button--secondary a-button--outline" href="">
				<span class="a-button__text">Bekijk alle meldingen</span>
			</a>
		</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.