Branding & Style Guide

Example
Markup: components/messages/messages.twig
<div role="contentinfo" aria-label="Error message" class="messages drupal-messages messages--error">
	<div role="alert">
		<h2 class="visually-hidden">Error message</h2>
			<ul class="messages__list">
				<li class="messages__item">{{messages_item1}}</li>
				<li class="messages__item">{{messages_item2}}</li>
				<li class="messages__item"><em class="placeholder">{{messages_placeholder}}</em> {{messages_item3}}</li>
				<li class="messages__item">{{messages_item3}}</li>
				<li class="messages__item">{{messages_item3}}</li>
			</ul>
	</div>
</div>

<div role="contentinfo" aria-label="Error message" class="messages drupal-messages messages--warning">
	<div role="alert">
		<h2 class="visually-hidden">Warning message</h2>
			<ul class="messages__list">
				<li class="messages__item">{{messages_item1}}</li>
				<li class="messages__item">{{messages_item2}}</li>
				<li class="messages__item">{{messages_item3}}</li>
				<li class="messages__item">{{messages_item3}}</li>
				<li class="messages__item">{{messages_item3}}</li>
			</ul>
	</div>
</div>

<div role="contentinfo" aria-label="Error message" class="messages drupal-messages messages--status">
	<div role="alert">
		<h2 class="visually-hidden">Status message</h2>
			<ul class="messages__list">
				<li class="messages__item">{{messages_item1}}</li>
				<li class="messages__item">{{messages_item2}}</li>
				<li class="messages__item">{{messages_item3}}</li>
				<li class="messages__item">{{messages_item3}}</li>
				<li class="messages__item">{{messages_item3}}</li>
			</ul>
	</div>
</div>
Source: sass/components/messages/_messages.scss, line 1