baseCode.html

<div class="message-container">
	<div id="messageLoading" aria-label="loading message" class="message-box info invisible fade-hide">
		<span class="message-text">wait wait wait</span>
	</div>
	<div id="messageInfo" aria-label="info message" class="message-box info invisible fade-hide">
		<span class="message-text">FYI</span>
		<a href="#">
			<button type="button" class="message-action-button micro-button info invisible"></button>
		</a>
		<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
	</div>
	<div id="messageSuccess" aria-label="success message" class="message-box success invisible fade-hide">
		<span class="message-text">That worked!</span>
		<a href="#">
			<button type="button" class="message-action-button micro-button success invisible"></button>
		</a>
		<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
	</div>
	<div id="messageError" aria-label="error message" class="message-box error invisible fade-hide">
		<span class="message-text">An error happened.</span>
		<a href="#">
			<button type="button" class="message-action-button micro-button error invisible"></button>
		</a>
		<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
	</div>
	<div id="messageWarning" aria-label="warning message" class="message-box warning invisible fade-hide">
		<span class="message-text">There were some difficulties.</span>
		<a href="#">
			<button type="button" class="message-action-button micro-button warning invisible"></button>
		</a>
		<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
	</div>
</div>