Skip Navigation
Angelo State University
Web Services

Search Site

Information for:

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:

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. 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)

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
<ol class="upperAlpha">
        …
</ol>

Alphabetical (Lowercase)

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
<ol class="lowerAlpha">
        …
</ol>

Roman Numerals (Uppercase)

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
<ol class="upperRoman">
        …
</ol>

Roman Numerals (Lowercase)

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. 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.
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.
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="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 Caption
# 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 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.

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

Icon in a Link

<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

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

Important

Use to indicate an important piece of information.
<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.

  1. Step 1
  2. Step 2
  3. 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
  • 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">E-mail 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

Styled Blockquotes

Add a class of styled to a <blockquote> to add a decorative border and quotation marks.

You have brains in your head. You have feet in your shoes. You can steer yourself any direction you choose. You're on your own. And you know what you know. And YOU are the one who'll decide where to go.

Dr. Seuss
<blockquote class="styled">
        <p>You have brains in your head. You have feet in your shoes. You can steer yourself any direction you choose. You're on your own. And you know what you know. And YOU are the one who'll decide where to go.</p>
        <cite>Dr. Seuss</cite>
</blockquote>

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.”

Dr. Seuss

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.”

Dr. Seuss

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="#">E-mail</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.

Emergency Alert
Warning Alert
Informational Alert
Emergency Alert Link Warning Alert Link Informational Alert Link
<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.

Informational Alert
Warning Alert
<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 or admissions types).

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

Learn more

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

Learn more

<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>

Feature Boxes

Feature information within other page content. Add an <h3> at the top to create a title bar.

Unlike boxes and cards, multiple feature boxes should not be used together to separate items in a list.

Title

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="feature">
        <h3>Title</h3>
        <p>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.</p>
</div>

Add column sizing and alignment classes to adjust the width and position of feature boxes.

Title

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

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

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

Announcement Boxes

Add a class of announcement to a <div> to style it with a light gold background and a ! icon.

Important

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

<div class="announcement">
        <h4>Important</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>

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>
Toggles can also be created by using a blurbs widget, which is the recommended method.

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.

Portrait

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 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.

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>