Unity Pattern Lab

Alert Bar

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

HTML

									
										<section class="alert-bar ">
    <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    </div>
</section>

Alert Bar Online

All systems reported <a href='#'>online</a>. If you are experiencing issues, <a href='#'>report a problem now</a>.

HTML

									
										<section class="alert-bar bg-emerald">
    <div class="container">
        All systems reported &lt;a href='#'&gt;online&lt;/a&gt;. If you are experiencing issues, &lt;a href='#'&gt;report a problem now&lt;/a&gt;.
    </div>
</section>

Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Call to Action Text

HTML

									
										<div class="alert-box__notification">
	<h2 class="alert-box--heading"><span class="sbuicon-shield"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
	<div class="alert-box--summary">
	       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
	</div>

        <div class="alert-box--cta">
            <a href="#" class="default-button">Call to Action Text</a>
        </div>
</div>

Alert Emergency

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Call to Action Text

HTML

									
										<div class="alert-box__emergency">
	<h2 class="alert-box--heading"><span class="sbuicon-shield"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
	<div class="alert-box--summary">
	       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
	</div>

        <div class="alert-box--cta">
            <a href="#" class="default-button">Call to Action Text</a>
        </div>
</div>

Alert Notification

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Call to Action Text

HTML

									
										<div class="alert-box__notification">
	<h2 class="alert-box--heading"><span class="sbuicon-shield"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
	<div class="alert-box--summary">
	       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
	</div>

        <div class="alert-box--cta">
            <a href="#" class="default-button">Call to Action Text</a>
        </div>
</div>