ASU Website Styles
Colors
ASU Blue
#00529b
ASU Gold
#ffc423
Dark Blue
#002f65
Typography
Headings
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
<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
Blockquotes are indented within normal text and styled with slightly larger text and a gray left border:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sodales ligula sed porta. Mauris tincidunt erat nec augue eleifend interdum.
Citation
<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
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
<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
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
<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)
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
<ol class="upperAlpha">
…
</ol>
Alphabetical (Lowercase)
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
<ol class="lowerAlpha">
…
</ol>
Roman Numerals (Uppercase)
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
<ol class="upperRoman">
…
</ol>
Roman Numerals (Lowercase)
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
<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.
# | First Name | Last Name |
---|---|---|
1 | John | Doe |
2 | Jane | Doe |
<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 input
s 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.
For a full list of icons with their names and character codes, refer to the demo page.
<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.
Icon in a Heading
<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.
- Milk
- Eggs
- Fabric Softener
<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.
- Step 1
- Step 2
- Step 3
<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.
- Location
- Mailing Address
- Phone number
- Fax number
- Email address
- Name, username, etc.
- Web Address
- Hours of availability/operation
- Chat
<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.
“You have brains in your head. You have feet in your shoes. You can steer yourself any direction you choose.”
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.
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.
“You're on your own. And you know what you know. And YOU are the one who'll decide where to go.”
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.
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 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).
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="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).
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="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.
Nulla a arcu tincidunt, facilisis eros nec, mattis justo. Praesent in orci ut orci molestie fringilla et ut enim.
<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 ID
s 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.
Lorem ipsum dolor sit amet [1], consectetur adipiscing elit. Nullam porta sodales ligula sed porta. Mauris tincidunt erat nec augue eleifend interdum.
1. Nulla a arcu tincidunt, facilisis eros nec, mattis justo. Praesent in orci ut orci molestie fringilla et ut enim.
<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>