Messages - Grid System

Table of contents

Design add-on

Consider adding the button effect to the call-to-action link(s) in the message box.

Button CSS

Alert

Use the the module-alert class to alert the user to important temporary information, for example systems are down, error messages, or here is a pending change to X.

Default appearance:

Alert: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-alert span-3">
<h3><span class="color-dark">Alert:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Simplified appearance:

Alert: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-alert module-simplify span-3">
<h3><span class="color-dark">Alert:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Attention

Use the module-attention class to call attention to important information.

Default appearance:

Attention: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-attention span-3">
<h3><span class="color-dark">Attention:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Simplified appearance:

Attention: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-attention module-simplify span-3">
<h3><span class="color-dark">Attention:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Note

Use the module-note class to call attention to a feature-worthy information, for example notes or advisories.

Default appearance:

Note: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas itae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-note span-3">
<h3><span class="color-dark">Note:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas itae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Simplified appearance:

Note: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-note module-simplify span-3">
<h3><span class="color-dark">Note:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas itae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl..</p>
</div>

Information

Use the module-info class to call attention to a feature-worthy information.

Default appearance

Default appearance:

Information: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-info span-3">
<h3><span class="color-dark">Information:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Simplified appearance:

Information: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-info module-simplify span-3">
<h3><span class="color-dark">Information:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Questions and answers

Use the module-question and the module-answer classes to create FAQs or feature Q&As sections.

Default appearance:

Question: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-question span-3">
<h3><span class="color-dark">Question:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Default appearance:

Answer: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-answer span-3">
<h3><span class="color-dark">Answer:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Simplified appearance:

Question: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-question module-simplify span-3">
<h3><span class="color-dark">Question:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Simplified appearance:

Answer: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-answer module-simplify span-3">
<h3><span class="color-dark">Answer:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Tools

Use the module-tool class to call attention to a tool or similar solution/product that is featured on the page.

Default appearance:

Tool: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-tool span-3">
<h3><span class="color-dark">Tool:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Simplified appearance:

Tool: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-tool module-simplify span-3">
<h3><span class="color-dark">Tool:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Work in progress

Use the module-inprogress class to call attention to content that is in-progress or being worked on.

Default appearance:

In Progress: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-inprogress span-3">
<h3><span class="color-dark">In Progress:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Simplified appearance:

In Progress: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-inprogress module-simplify span-3">
<h3><span class="color-dark">In Progress:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Refer

Use the module-refer to draw attention to the fact that the user is being referred/redirected to another page.

Default appearance:

Refer: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-refer span-3">
<h3><span class="color-dark">Refer:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Simplified appearance:

Refer: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-refer module-simplify span-3">
<h3><span class="color-dark">Refer:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Summary

Use the module-summary class to feature content summaries, recaps and reviews.

Default appearance:

Summary: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-summary span-3">
<h3><span class="color-dark">Summary:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Simplified appearance:

Summary: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-summary module-simplify span-3">
<h3><span class="color-dark">Summary:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Archive

Use the module-archive class to inform the user that the page contains archived information.

Default appearance:

Archive: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-archive span-3">
<h3><span class="color-dark">Archive:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>

Simplified appearance:

Archive: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.

View code 
<div class="module-archive module-simplify span-3">
<h3><span class="color-dark">Archive:</span> Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris. Mauris mattis, felis eu rutrum egestas, ligula lectus interdum turpis, nec lacinia mauris elit in urna. Maecenas vitae luctus mi. Nulla facilisi. Vivamus elementum scelerisque porttitor. Nulla non faucibus quam. Mauris quam lacus, adipiscing in iaculis vitae, faucibus nec nisl.</p>
</div>