Colors

Typography

Headings

<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>

Blockquotes

<p>Blockquotes are indented within normal text:</p>
<blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sodales ligula sed porta. Mauris tincidunt erat nec augue eleifend interdum.</p>
        <cite>Citation</cite>
</blockquote>

Lists

Unordered

<ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipiscing elit</li>
        <li>Integer molestie lorem at massa</li>
        <li>Facilisis in pretium nisl aliquet</li>
        <li>Nulla volutpat aliquam velit</li>
</ul>

Ordered

<ol>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipiscing elit</li>
        <li>Integer molestie lorem at massa</li>
        <li>Facilisis in pretium nisl aliquet</li>
        <li>Nulla volutpat aliquam velit</li>
</ol>

Alphabetical (Uppercase)

<ol class="upperAlpha">
        …
</ol>

Alphabetical (Lowercase)

<ol class="lowerAlpha">
        …
</ol>

Roman Numerals (Uppercase)

<ol class="upperRoman">
        …
</ol>

Roman Numerals (Lowercase)

<ol class="lowerRoman">
        …
</ol>

Columns

You can create columns of text by using predefined column classes.

• Multiple columns must be wrapped in a .columns div.
• Use multiple .columns divs to create rows of columns.
• Use the following classes on individual columns to set their width:

  Class name	Width of Column
  .col-4-5	80% (4/5)
  .col-3-4	75% (3/4)
  .col-2-3	66% (2/3)
  .col-3-5	60% (3/5)
  .col-1-2	50% (1/2)
  .col-2-5	40% (2/5)
  .col-1-3	33% (1/3)
  .col-1-4	25% (1/4)
  .col-1-5	20% (1/5)

• Columns are stacked vertically on small screens.

<div class="columns">
        <div class="col-1-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sodales ligula sed porta. Mauris tincidunt erat nec augue eleifend interdum. Nulla a arcu tincidunt, facilisis eros nec, mattis justo. Praesent in orci ut orci molestie fringilla et ut enim.</div>
        <div class="col-1-2">Donec egestas ac ante et dapibus. Morbi sit amet erat dapibus, ullamcorper velit vel, tristique neque. Donec vitae risus in turpis hendrerit hendrerit ut quis nibh. Sed in vestibulum neque. Proin elementum vehicula tempus. Phasellus id nisl massa.</div>
</div>
<div class="columns">
        <div class="col-1-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sodales ligula sed porta. Mauris tincidunt erat nec augue eleifend interdum.</div>
        <div class="col-2-3">Nulla a arcu tincidunt, facilisis eros nec, mattis justo. Praesent in orci ut orci molestie fringilla et ut enim. Donec egestas ac ante et dapibus. Morbi sit amet erat dapibus, ullamcorper velit vel, tristique neque. Donec vitae risus in turpis hendrerit hendrerit ut quis nibh. Sed in vestibulum neque. Proin elementum vehicula tempus. Phasellus id nisl massa.</div>
</div>

Tables

• Add the class table for normal table styling (lines between rows, dotted lines between columns, alternate row striping.
• A <caption> element should be used to explain the contents of the table.
• Column headers should be inside the <thead> for proper styling.
• <th>s should be used at the tops of columns and at the left of rows to identify the type of data that follows.

<table class="table">
        <caption>Table Caption</caption>
        <thead>
                <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <th>1</th>
                        <td>John</td>
                        <td>Doe</td>
                </tr>
                <tr>
                        <th>2</th>
                        <td>Jane</td>
                        <td>Doe</td>
                </tr>
        </tbody>
</table>

Buttons

Button and Submit inputs are automatically styled. Add a class of button to a link to style it like a button.

<a href="" class="button">Link with .button class</a> 
<input type="button" value="Button Input" /> 
<input type="submit" value="Submit Input" />

Create buttons that span the full width of the available space, add a class of button-block.

<a href="" class="button button-block">Block level button</a>

Helper Classes

Alignment

Align an element to the left, right, or center. Surrounding content wraps around left and right aligned elements.

<div class="left">…</div>
<div class="right">…</div>
<div class="center">…</div>

Clear Floats

Prevent elements from wrapping around a floated element by adding .clear.

<div class="left">…</div>
<div class="clear">The element won't wrap around the previous</div>

Contain Floats

Contain floated elements by adding .clearfix to the parent element.

<div class="clearfix">
        This element will fully wrap even its floated content.
        <div class="left">…</div>
</div>

Hiding Content

// Hide an element completely (even from screen readers)
<div class="hidden">…</div>

// Hide an element to all devices except screen readers
<div class="sr-only">…</div>

// Hide text within an element, for example, to replace it with a background image.
<div class="text-hide">This text will be hidden</div>

Icons

A large set of icons are available for use. Icons are created using a web font.

To use, simply add a <span> with a class of the icon name. View the demo page for icon names.

<span class="asu-icon-mailbox"></span>
<span class="asu-icon-mapmarker"></span>
<span class="asu-icon-email"></span>
<span class="asu-icon-flash"></span>

Icons inherit the font-size and color of their parent element.

<h2><span class="asu-icon-bullhorn"></span> Icon in a Heading</h2>
<p><a href="#"><span class="asu-icon-star"></span> Icon in a Link</a></p>

Decorative Classes

Use these classes to add decorative affects to text.

Correct/Incorrect

<div class="correct">Use to indicate a correct answer/response.</div>
<div class="incorrect">Use to indicate an incorrect answer/response.</div>

Important

<div class="important">Use to indicate an important piece of information.</div>

Decorative Lists

Checklists

Replace traditional bullets in an unordered list with checkmarks.

<ul class="checklist">
        <li>Milk</li>
        <li>Eggs</li>
        <li>Fabric Softener</li>
</ul>

Step Lists

Add decorative numbers to an ordered list to create a list of steps.

<ol class="steps">
        <li>Step 1</li>
        <li>Step 2</li>
        <li>Step 3</li>
</ol>

Contact Lists

Add icons to items in a list of contact information.

.contact class can be added to the <ul> itself or to a surrounding element.

<ul class="contact">
        <li class="location">Location</li>
        <li class="mailing-address">Mailing Address</li>
        <li class="phone">Phone number</li>
        <li class="fax">Fax number</li>
        <li class="email">Email address</li>
        <li class="person">Name, username, etc.</li>
        <li class="web">Web Address</li>
        <li class="hours">Hours of availability/operation</li>
        <li class="chat">Chat</li>
</ul>

Decorative Quotes

Pullquotes

• Add a class of pullquote to a <div> to style it as a pullquote.
• Add a class of left or right to position it on either side of the surrounding content.
• Add a paragraph with a class of author to automatically style the authorrsquo;s name.

<div class="pullquote right">
        <p>“You have brains in your head. You have feet in your shoes. You can steer yourself any direction you choose.”</p>
        <p class="author">Dr. Seuss</p>
</div>
<p>…</p>
<p>…</p>
<div class="pullquote left">
        <p>“You're on your own. And you know what you know. And YOU are the one who'll decide where to go.”</p>
        <p class="author">Dr. Seuss</p>
</div>
<p>…</p>
<p>…</p>

Decorative Links

Add classes to links to add decorative icons.

Some link types such as mailto:, .pdf, .doc(x), .xls(x), and .ppt(x) are styled automatically. You do not need to add the class manually.

<a class="external" href="#">External Link</a>
<a class="map" href="#">Location</a>
<a class="swf" href="#">Flash</a>
<a class="mp3" href="#">MP3</a>
<a class="mail" href="#">Email</a>
<a class="pdf" href="#">PDF</a>
<a class="doc" href="#">Word</a>
<a class="xls" href="#">Excel</a>
<a class="ppt" href="#">Powerpoint</a>
<a class="rtf" href="#">Text</a>
<a class="lock" href="#">Lock</a>
<a class="video" href="#">Video</a>
<a class="top" href="#">Back to Top</a>
<a class="download" href="#">Download</a>
<a class="instructions" href="#">Instructions</a>
<a class="facebook" href="#">Facebook</a>
<a class="youtube" href="#">YouTube</a>
<a class="twitter" href="#">Twitter</a>
<a class="instagram" href="#">Instagram</a>
<a class="linkedin" href="#">LinkedIn</a>
<a class="pinterest" href="#">Pinterest</a>
<a class="mobile" href="#">Mobile</a>
<a class="more" href="#">More</a>
<a class="print" href="#">Print</a>

Alerts

Wrap any text in a <div> with a class of alert and one of the three contextual classes for basic alert messages.

Add the alert classes to links to style them the same with the addition of a right chevron and hover effect.

<div class="alert alert-emergency">Emergency Alert</div>
<div class="alert alert-warning">Warning Alert</div>
<div class="alert alert-info">Informational Alert</div>
<a class="alert alert-emergency" href="#">Emergency Alert Link</a>
<a class="alert alert-warning" href="#">Warning Alert Link</a>
<a class="alert alert-info" href="#">Informational Alert Link</a>

Icons

Icons can be added to alerts. Refer to the Icons section for icon usage instructions.

<div class="alert alert-info"><span class="asu-icon-info-circle"></span> Informational Alert</div>
<div class="alert alert-warning"><span class="asu-icon-warning"></span> Warning Alert</div>

Box Types

Cards

Use the card class to present a collection of objects or information. Cards are often used with sets of data that can be filtered (such as a list of scholarships or student organizations).

<div class="card">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sodales ligula sed porta. Mauris tincidunt erat nec augue eleifend interdum.</p>
</div>
<div class="card">
        <p>Nulla a arcu tincidunt, facilisis eros nec, mattis justo. Praesent in orci ut orci molestie fringilla et ut enim.</p>
</div>

Boxes

Use the box class to highlight pieces of information. Boxes are often used to present a list of similar choices that lead to more information (such as financial aid options).

<div class="box">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sodales ligula sed porta. Mauris tincidunt erat nec augue eleifend interdum.</p>
        <p><a href="#" class="button">Learn more</a></p>
</div>
<div class="box">
        <p>Nulla a arcu tincidunt, facilisis eros nec, mattis justo. Praesent in orci ut orci molestie fringilla et ut enim.</p>
        <p><a href="#" class="button">Learn more</a></p>
</div>

Toggles

Create toggles by adding a class of expandable to a <div>.

The first element inside .expandable will automatically become the toggle title.

<div class="expandable">
        <h4>Toggle 1</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sodales ligula sed porta. Mauris tincidunt erat nec augue eleifend interdum.</p>
</div>
<div class="expandable">
        <h4>Toggle 2</h4>
        <p>Nulla a arcu tincidunt, facilisis eros nec, mattis justo. Praesent in orci ut orci molestie fringilla et ut enim.</p>
</div>

Bio Cards

Bio Cards are used to present information and a photo, typically about a person, when the text should not wrap around the photo.

Add a class of bioCard to a <div>. Add an <img> and a <div> with a class of bioInfo inside the .bioCard. Add the details inside of .bioInfo.

Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sodales ligula sed porta. Mauris tincidunt erat nec augue eleifend interdum.

Nulla a arcu tincidunt, facilisis eros nec, mattis justo. Praesent in orci ut orci molestie fringilla et ut enim.

<div class="bioCard">
        <img src="/content/images/10018-portrait-placeholder" alt="Portrait" width="75" />
        <div class="bioInfo">
                <h2>Name</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sodales ligula sed porta. Mauris tincidunt erat nec augue eleifend interdum.</p>
                <p>Nulla a arcu tincidunt, facilisis eros nec, mattis justo. Praesent in orci ut orci molestie fringilla et ut enim.</p>
        </div>
</div>

Disclaimers

Use a .disclaimer at the bottom of a content section to style secondary information in a smaller font size.

Disclaimers can be preceded by an <hr /> to set it apart from the rest of the text.

<hr />
<div class="disclaimer">
        <p>Nulla a arcu tincidunt, facilisis eros nec, mattis justo. Praesent in orci ut orci molestie fringilla et ut enim.</p>
</div>

Footnotes

Use .footnotes at the bottom of a content section to provide references or more information pertaining to a subject on the page.

Footnotes should contain anchor IDs that the content on the page can reference.

Links in the content to the footnote anchors can be given the footnoteReference class to style as superscript.

<p>Lorem ipsum dolor sit amet <a href="#footnote" class="footnoteReference">[1]</a>, consectetur adipiscing elit. Nullam porta sodales ligula sed porta. Mauris tincidunt erat nec augue eleifend interdum.</p>
<div class="footnotes">
        <p id="footnote">1. Nulla a arcu tincidunt, facilisis eros nec, mattis justo. Praesent in orci ut orci molestie fringilla et ut enim.</p>
</div>