<h2class="title title-3">Your changes have been saved</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <arel="page"href="#test">Please see below</a></p>
<h2class="title title-3">There was an error in your submission</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <arel="page"href="#test">Please see below</a></p>
</div>
<navclass="nav-actions">
<h3class="sr">Alert Actions</h3>
<ul>
<liclass="nav-item">
<ahref="#"class="button cancel-button action-primary">Cancel Your Submission</a>
<h2class="title title-3">Studio will be unavailable this weekend</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<h2class="title title-3">Studio will be unavailable this weekend</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<h2class="title title-3">Your Studio account has been created, but needs to be activated</h2>
<p>Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>
<p>On the date set above, this section – <strongclass="section-name"></strong> – will be released to students. Any units marked private will only be visible to admins.</p>
<h1class="title-1">Alerts & Notifications</h1>
</div>
</header>
</div>
<divclass="wrapper-content wrapper">
<sectionclass="content">
<articleclass="content-primary"role="main">
<section>
<header>
<h2class="title-2">Alerts</h2>
<spanclass="tip">persistant, static messages to the user</span>
</header>
<p>In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.</p>
</section>
<section>
<header>
<h2class="title-2">Notifications</h2>
<spanclass="tip">contextual, feedback-based, and temporal messages to the user</span>
</header>
<p>In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.</p>
</section>
</article>
</section>
</div>
<!-- notification: change has been made and a save is needed -->
<h2class="title title-3">Your changes have been saved</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <arel="page"href="#test">Please see below</a></p>
<h2class="title title-3">There was an error in your submission</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <arel="page"href="#test">Please see below</a></p>
</div>
<navclass="nav-actions">
<h3class="sr">Alert Actions</h3>
<ul>
<liclass="nav-item">
<ahref="#"class="button cancel-button action-primary">Cancel Your Submission</a>
<h2class="title title-3">Studio will be unavailable this weekend</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<h2class="title title-3">Studio will be unavailable this weekend</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<h2class="title title-3">Your Studio account has been created, but needs to be activated</h2>
<p>Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>