This page provides examples of the basic HTML elements used to create pages on uah.edu. For examples of custom modules found on the UAH site, see the Navigation & Modules page.

Template Overview

The uah.edu template is based upon the Bootstrap 3 framework. There are more Bootstrap-created elements and styles available in the uah.edu template that are not listed on this page. For complete Bootstrap documentation, visit getbootstrap.com.

Responsive Design

UAH homepage on various screen sizes

The UAH website is responsive, meaning the layout of each page changes based on the size of the visitor's screen (or the browser window). Ensure your content displays correctly across all these screen sizes.

Here are some prominent examples of layout changes visible on smaller screens:

  • header condenses
  • tile modules rearrange and condense
  • sidebars wrap to below the main content
  • menus move off screen
  • images shrink

Grid System

The UAH website is based on a 12-column grid. Images and other elements are resized on the page by assigning how many columns (of 12) wide each should be for a particular screen size. For example, an image with the class .col-xs-6 is 6 columns wide of a total 12, meaning it's half the width of the page for XS-sized screens and up.

For more information on the grid system refer to the Bootstrap grid system documentation.

Basic-Grid

Columns and padding are colored for illustrative purposes.

Twelfths

Example
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1




.col-md-1


.col-md-1


.col-md-1


.col-md-1


.col-md-1


.col-md-1


.col-md-1


.col-md-1


.col-md-1


.col-md-1


.col-md-1


.col-md-1

Halves

Example
.col-sm-6
.col-sm-6




.col-sm-6


.col-sm-6

Thirds

Example
.col-sm-8
.col-sm-4




.col-sm-8


.col-sm-4
Example
.col-sm-4
.col-sm-4
.col-sm-4




.col-sm-4


.col-sm-4


.col-sm-4

Quarters

Example
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3




.col-sm-3


.col-sm-3


.col-sm-3


.col-sm-3

Narrow Grid

Add .row-narrow to the row div to reduce the padding between columns.

Example
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3




.col-sm-3


.col-sm-3


.col-sm-3


.col-sm-3

Multirow Grid

Add .multi to the row to create a gallery-like grid, in which each column matches the height of its adjacent columns. Columns are given a top and bottom padding in addition to the left and right padding. Note: Each column must be the same width.

Break Points

There are several predefined screen widths at which major layout changes occur. These are called “break points.”

 Extra-small devicesSmall devicesMedium devicesLarge devices
Screen/browser width <700px ≥700px ≥900px ≥990px
Example devices Phones Tablets-portrait, iPad-portrait, etc. Small browser windows, etc. Tablets-portrait, iPad-landscape, laptops, desktops, etc.
Class prefix .col-xs- .col-sm- .col-md- .col-lg-

Typography

Headings

Organize your content by using the appropriate headings: h2 through h6. Heading 1 is reserved for page titles. Since the page title is pre-set, you will never use Heading 1. Headings 2-6 should be used in descending order by hierarchy. Headings are not to be used solely for layout or just for promoting important text. Headings are used to categorize the related content below. Think of headings like you would when writing a report. The largest heading is used at the top of the page. Sub headings are used in descending order by hierarchy. Just like you would never skip headings in a report, you would never skip headings on your page.

Example

Heading 1 with small text and a link

Heading 2 with small text and a link

Heading 3 with small text and a link

Heading 4 with small text and a link

Heading 5 with small text and a link
Heading 6 with small text and a link


Heading 1 with small text and a link


Heading 2 with small text and a link


Heading 3 with small text and a link


Heading 4 with small text and a link


Heading 5 with small text and a link


Heading 6 with small text and a link

 

Body Copy

Standard body copy is 18px in size and uses the Avenir typeface. Add .lead to the first paragraph of a page to present a brief introduction or overview of that page.

Do not format text in other colors (such as red) to call attention to text. Instead use bold or italics.

Example

This is a lead paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum.

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum.



This is a lead paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum.


This is a standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum.

 

Common Text Elements and Styles

Example

Link - Use to link to another page or website.

Strong - Use to bring extra attention to a word or phrase.

Emphasis - Use to emphasize a word or phrase.

Small - Use to de-emphasize a word or phrase.

Subscript - H2O is a subscript example.

Superscript - May 20th is a superscript example.

Abbreviation - Long words or terms such as HTML can be abbreviated.

Line Indent - Add the class .indent-line to indent the first line of a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum. Donec nec tincidunt dolor. Mauris dolor nisi, pellentesque quis tellus malesuada, placerat tristique dui. Phasellus at dui in nunc vestibulum accumsan.

Paragraph Indent - Add the class .indent-paragraph to indent the first line of a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum. Donec nec tincidunt dolor. Mauris dolor nisi, pellentesque quis tellus malesuada, placerat tristique dui. Phasellus at dui in nunc vestibulum accumsan.




Link - Use to link to another page or website.





Strong - Use to bring extra attention to a word or phrase.





Emphasis - Use to emphasize a word or phrase.





Small - Use to de-emphasize a word or phrase.





Subscript - H2O is a subscript example.





Superscript - May 20th is a superscript example.





Abbreviation - Long words or terms such as HTML can be abbreviated.





Line Indent - Add the class .indent-line to indent the first line of a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum. Donec nec tincidunt dolor. Mauris dolor nisi, pellentesque quis tellus malesuada, placerat tristique dui. Phasellus at dui in nunc vestibulum accumsan.



Paragraph Indent - Add the class .indent-paragraph to indent the first line of a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum. Donec nec tincidunt dolor. Mauris dolor nisi, pellentesque quis tellus malesuada, placerat tristique dui. Phasellus at dui in nunc vestibulum accumsan.

 

Multi-column paragraphs

Paragraphs or blocks of text can be made to display across two or three columns, evenly dividing the text. Use the class .twocolumn-xs or .threecolumn-xs to apply this style on all screen sizes. Use .twocolumn-sm or .threecolumn-sm to apply this style to screen sizes larger than extra-small.

Example

This is a two-column paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a urna ut nulla pellentesque feugiat ac vel libero. Sed sit amet convallis augue, sit amet tempus enim. Pellentesque maximus rhoncus orci, eget ultricies odio scelerisque quis. Donec tempus lorem non risus fermentum, ut laoreet lectus aliquet. Nam sed pulvinar diam, sed semper quam. Fusce at porta mi. Morbi nec turpis fringilla, porta ligula eu, suscipit turpis. Sed vel dui urna. Donec ex risus, pulvinar eget odio in, vehicula eleifend velit. Vestibulum ut justo ut nulla egestas porttitor. Integer nunc ex, interdum in felis vel, dapibus lacinia sem.

This is a three-column paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a urna ut nulla pellentesque feugiat ac vel libero. Sed sit amet convallis augue, sit amet tempus enim. Pellentesque maximus rhoncus orci, eget ultricies odio scelerisque quis. Donec tempus lorem non risus fermentum, ut laoreet lectus aliquet. Nam sed pulvinar diam, sed semper quam. Fusce at porta mi. Morbi nec turpis fringilla, porta ligula eu, suscipit turpis. Sed vel dui urna. Donec ex risus, pulvinar eget odio in, vehicula eleifend velit. Vestibulum ut justo ut nulla egestas porttitor. Integer nunc ex, interdum in felis vel, dapibus lacinia sem.




This is a two-column paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a urna ut nulla pellentesque feugiat ac vel libero. Sed sit amet convallis augue, sit amet tempus enim. Pellentesque maximus rhoncus orci, eget ultricies odio scelerisque quis. Donec tempus lorem non risus fermentum, ut laoreet lectus aliquet. Nam sed pulvinar diam, sed semper quam. Fusce at porta mi. Morbi nec turpis fringilla, porta ligula eu, suscipit turpis. Sed vel dui urna. Donec ex risus, pulvinar eget odio in, vehicula eleifend velit. Vestibulum ut justo ut nulla egestas porttitor. Integer nunc ex, interdum in felis vel, dapibus lacinia sem.




This is a three-column paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a urna ut nulla pellentesque feugiat ac vel libero. Sed sit amet convallis augue, sit amet tempus enim. Pellentesque maximus rhoncus orci, eget ultricies odio scelerisque quis. Donec tempus lorem non risus fermentum, ut laoreet lectus aliquet. Nam sed pulvinar diam, sed semper quam. Fusce at porta mi. Morbi nec turpis fringilla, porta ligula eu, suscipit turpis. Sed vel dui urna. Donec ex risus, pulvinar eget odio in, vehicula eleifend velit. Vestibulum ut justo ut nulla egestas porttitor. Integer nunc ex, interdum in felis vel, dapibus lacinia sem.

 

Blockquotes

Use blockquotes for quoting blocks of content from another source within your document. Blockquotes can be full width or can be floated to the left or right.

Example

Education is the most powerful weapon which you can use to change the world.

Nelson Mandela
1993 Nobel Peace Prize laureate




Education is the most powerful weapon which you can use to change the world.


Nelson Mandela

    1993 Nobel Peace Prize laureate

Right-Floated Blockquote

Example

Education is the most powerful weapon which you can use to change the world.

Nelson Mandela
1993 Nobel Peace Prize laureate




Education is the most powerful weapon which you can use to change the world.


Nelson Mandela

    1993 Nobel Peace Prize laureate

 

Ordered List

A list of items in which the order does explicitly matter. Ordered lists can use numbers, letters, or roman numerals.

Numeric List
Example
  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
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
Alphabetic List
Example
  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
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
Roman Numeral List
Example
  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
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem



    

  1. Lorem ipsum dolor sit amet
    2. 

  2. Consectetur adipiscing elit
    3. 

  3. Integer molestie lorem at massa
    4. 

  4. Facilisis in pretium nisl aliquet
    5. 

  5. Nulla volutpat aliquam velit
    6. 

  6. Faucibus porta lacus fringilla vel
    7. 

  7. Aenean sit amet erat nunc
    8. 

  8. Eget porttitor lorem
    9. 





    

  1. Lorem ipsum dolor sit amet
    2. 

  2. Consectetur adipiscing elit
    3. 

  3. Integer molestie lorem at massa
    4. 

  4. Facilisis in pretium nisl aliquet
    5. 

  5. Nulla volutpat aliquam velit
    6. 

  6. Faucibus porta lacus fringilla vel
    7. 

  7. Aenean sit amet erat nunc
    8. 

  8. Eget porttitor lorem
    9. 





    

  1. Lorem ipsum dolor sit amet
    2. 

  2. Consectetur adipiscing elit
    3. 

  3. Integer molestie lorem at massa
    4. 

  4. Facilisis in pretium nisl aliquet
    5. 

  5. Nulla volutpat aliquam velit
    6. 

  6. Faucibus porta lacus fringilla vel
    7. 

  7. Aenean sit amet erat nunc
    8. 

  8. Eget porttitor lorem
    9.

 

Unordered List

A list of items in which the order does not explicitly matter.

Example

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem


    

  • Lorem ipsum dolor sit amet
    • 

  • Consectetur adipiscing elit
    • 

  • Integer molestie lorem at massa
    • 

  • Facilisis in pretium nisl aliquet
    • 

  • Nulla volutpat aliquam velit

      

    • Phasellus iaculis neque
      • 

    • Purus sodales ultricies
      • 

    • Vestibulum laoreet porttitor sem
      • 

    • Ac tristique libero volutpat at
      • 

    
    

  
    • 

  • Faucibus porta lacus fringilla vel
    • 

  • Aenean sit amet erat nunc
    • 

  • Eget porttitor lorem
    •

 

Unstyled List

Add .list-unstyled to remove bullets and padding from lists.

Example

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet


    

  • Lorem ipsum dolor sit amet
    • 

  • Consectetur adipiscing elit
    • 

  • Integer molestie lorem at massa
    • 

  • Facilisis in pretium nisl aliquet
    •

 

Spaced List

Add .list-spaced to assign extra space between list items. Useful for lists of links.

Example

 

Description

A list of terms with their associated descriptions.

Example

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

 

Horizontal Description

A list of terms with their associated descriptions.

Example

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

 

Horizontal Rule

Use horizontal rules to separate independent sections of a page.

Use horizontal rules sparingly. Correct use of headings is often sufficient in separating content.

Example

 

Icons

There are ~300 icons available for use on the UAH website. See icons and usage

Image of usable icons

Images

For best appearance across all screen sizes, images should be 16:9 ratio, landscape, and 1440px X 810px dimensions. If you need a tool for cropping or resizing your images, our Image Crop Tool is available.

Irregular images (portrait or tall) should be inline and 1/3 width.

Use the classes below to set the size and position for an image on your page. By using these classes, images will automatically adjust to their appropriate proportions without having to create different versions of the images.

OMC manages and maintains a library of photos taken by the university photographer in an online database application called Photoshelter.

For access to Photoshelter, send your request to webmaster@uah.edu.

Image Positioning

  Align LeftAlign Right
Full width N/A N/A
2/3 width .left-66 .right-66
1/2 width .left-50 .right-50
1/3 width .left-33 .right-30

Advanced editors may want to use Bootstrap grid classes for more control over image sizes and layouts.

Example

test image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum. Donec nec tincidunt dolor. Mauris dolor nisi, pellentesque quis tellus malesuada, placerat tristique dui.

test image

Phasellus at dui in nunc vestibulum accumsan. Aliquam erat volutpat. Duis non interdum ipsum, et tristique leo. Pellentesque condimentum, felis id placerat placerat, purus purus mattis urna, ac sodales ipsum ipsum ut risus. Aenean eget molestie ante, nec blandit magna. Integer efficitur fringilla odio sit amet sagittis. Sed ante turpis, pulvinar condimentum vehicula ac, tempus cursus ante. Donec eu scelerisque metus. Vestibulum facilisis tincidunt fermentum. Phasellus consequat odio in libero pharetra rutrum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum. Donec nec tincidunt dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum. Donec nec tincidunt dolor. Mauris dolor nisi, pellentesque quis tellus malesuada, placerat tristique dui.

test image

Phasellus at dui in nunc vestibulum accumsan. Aliquam erat volutpat. Duis non interdum ipsum, et tristique leo. Pellentesque condimentum, felis id placerat placerat, purus purus mattis urna, ac sodales ipsum ipsum ut risus. Aenean eget molestie ante, nec blandit magna. Integer efficitur fringilla odio sit amet sagittis. Sed ante turpis, pulvinar condimentum vehicula ac, tempus cursus ante. Donec eu scelerisque metus. Vestibulum facilisis tincidunt fermentum. Phasellus consequat odio in libero pharetra rutrum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum. Donec nec tincidunt dolor.

Phasellus at dui in nunc vestibulum accumsan. Aliquam erat volutpat. Duis non interdum ipsum, et tristique leo. Pellentesque condimentum, felis id placerat placerat, purus purus mattis urna, ac sodales ipsum ipsum ut risus. Aenean eget molestie ante, nec blandit magna. Integer efficitur fringilla odio sit amet sagittis.

test image

Phasellus at dui in nunc vestibulum accumsan. Aliquam erat volutpat. Duis non interdum ipsum, et tristique leo. Pellentesque condimentum, felis id placerat placerat, purus purus mattis urna, ac sodales ipsum ipsum ut risus. Aenean eget molestie ante, nec blandit magna. Integer efficitur fringilla odio sit amet sagittis. Sed ante turpis, pulvinar condimentum vehicula ac, tempus cursus ante. Donec eu scelerisque metus. Vestibulum facilisis tincidunt fermentum. Phasellus consequat odio in libero pharetra rutrum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum. Donec nec tincidunt dolor.



test image

. . .



test image

. . .



test image

. . .



test image

. . .

Saving Images for Web

These image sizes are larger than their display area in order to appear sharp on hi-resolution screens (such as retina displays on iPads, iPhones, etc.). It’s best practice to save these images with a high JPEG compression in order to keep the file size low and the page load times short.

In Photoshop, select Save for Web and then set the JPEG quality to 35.

 

Image Captions

Image captions should be as concise as possible and a maximum of 250 characters. Captions are overlaid on the bottom of the image. On extra-small devices, the caption moves below the image to avoid covering too much of the image.

Example

test image

Here is a caption with a description of the above photo.

Photo Credit


 
  test image



Here is a caption with a description of the above photo.


  


Photo Credit

Caption Below Image

For narrower photos and/or longer captions, add .caption-below to force the caption to appear below the image at all screen sizes.

Example
test image

Here is a caption with a description of the below the photo. Longer captions such as this should go below the photos, so as not to cover too much of the photos.

Photo Credit




 
    test image



Here is a caption with a description of the below the photo.  Longer captions such as this should go below the photos, so as not to cover too much of the photos.


    


Photo Credit

Videos

Videos may be embedded within a page, included in a modal (pop-up), or added as a link that plays from an external site. Videos should be 16x9 widescreen, 720p or 1080p. Videos should be hosted with a video service such as YouTube, Wistia, or Vimeo. Videos must be closed-captioned for hearing impaired users.

Videos hosted on Wistia are the only videos that can be embedded or use the pop-up feature. YouTube videos can't be embedded due to the inability to control ads, recommendations, along with limitations for captioning. Should you have a video that needs to be on your site, contact webmaster@uah.edu and we will assist you with the best approach for hosting your video.

When using videos, remember these best practices and helpful tips:

  • Should you host the video on Wistia, share the video with webmaster@uah.edu and we can upload it into Wistia. When uploading into Wistia captions must be ordered and costs run a set price per minute. Depending on the length of the video, captions may be rush ordered. Keep in mind if you rush order captions this also increases the caption price.
  • Ideally, all videos are hosted on Wistia. However, if the video must be hosted elsewhere, we can only link to the video. The link will open a new browser tab where the viewer can watch the video on the external host domain. For example, if the video is hosted on YouTube, we can only add a link to view the video on YouTube.
  • If you are using hosting services other than Wistia, webmaster@uah.edu only needs the URL to the video.
  • Before uploading your video on YouTube or another hosting service, you should create the YouTube channel using an entity account (don't use your personal account). After uploading the video into the YouTube channel, be sure and set the appropriate privacy settings. YouTube privacy settings are public, private, and unlisted. When these steps are complete, send webmaster@uah.edu the video URL and we will add a link on the site.
  • Videos should never auto-play on page load. Instead, videos should play only when the user selects play.
  • The OMC has a videographer on staff. If you plan to record a video and are unsure about best practices or have questions, please reach out.

Embedded Video

Example

Pop-over video

Example

Watch Video

Buttons

Buttons elicit action from visitors and are thus used to highlight important links and actions on a page.

Multiple styles and sizes of buttons are available:

  • “UAH” and “Primary” are the primary buttons reserved for the most important links and actions.
  • “Default” and “Black” are secondary buttons designed to complement the primary buttons and convey less importance.
  • Multiple sizes are available to match surrounding style and to convey importance.

Example

UAH Primary Default Black
 
UAH Primary Default Black
 
UAH Primary Default Black
 
UAH Primary Default Black
 
UAH Primary Default Black

Contextual Buttons

These buttons should only be used in their respective context in forms and applications.

Example

Contextual Buttons
Success Info Warning Danger

Tables

Tables are used for displaying tabular data, data you would find in a spreadsheet. Tables are not to be used for layout or formatting of pages, as this does not allow for reformatting required for responsive layouts.

 

Basic Table

For basic styling — light padding and only horizontal dividers — add the base class .table to any <table>.

Important

All tables should have the class .table. By assigning this class, each table is automatically styled, made responsive, and made accessible.

Example
 ABC
1 A1 B1 C1
2 A2 B2 C2
3 A3 B3 C3 





&nbsp;ABC
    


  


1
A1
B1
C1

    


2
A2
B2
C2

    


3
A3
B3
C3

 

Condensed Table

Add .table-condensed to make tables more compact by cutting cell padding in half.

Add .table-xs-condensed to apply this style only on extra-small devices.

Example

 ABC
1 A1 B1 C1
2 A2 B2 C2
3 A3 B3 C3 





&nbsp;ABC
    


  


1
A1
B1
C1

    


2
A2
B2
C2

    


3
A3
B3
C3

 

Striped Table

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Example

 ABC
1 A1 B1 C1
2 A2 B2 C2
3 A3 B3 C3 





&nbsp;ABC
    


  


1
A1
B1
C1

    


2
A2
B2
C2

     


3
A3
B3
C3

 

Hover Rows Table

Add .table-hover to enable a hover state on table rows within a <tbody>.

Example

 ABC
1 A1 B1 C1
2 A2 B2 C2
3 A3 B3 C3 





&nbsp;ABC
    


  


1
A1
B1
C1

    


2
A2
B2
C2

    


3
A3
B3
C3

 

Bordered Table

Add .table-bordered for borders on all sides of the table and cells.

Example

 ABC
1 A1 B1 C1
2 A2 B2 C2
3 A3 B3 C3 





&nbsp;ABC
    


  


1
A1
B1
C1

    


2
A2
B2
C2

    


3
A3
B3
C3

 

Sortable Table

Add .table-sort to allow users to sort your table by column.

Example

 ABC
1 A1 B1 C1
2 A2 B2 C2
3 A3 B3 C3 





&nbsp;ABC
    


  


1
A1
B1
C1

    


2
A2
B2
C2

    


3
A3
B3
C3

Forms

Google Forms

Google Forms empowers you to build forms and collect results. YouTube has a plethora of walkthroughs that cover every aspect of building and using Google Forms. Refer to YouTube for instructions on how to build a Google Form. Below are a few best practices and helpful tips while using Google Forms across the UAH site.

When using Google Forms, remember these best practices and helpful tips:

  • Create the Google Form using an entity account. For example, college@uah.edu or department@uah.edu instead of a personal account such as first.last@uah.edu. When using an entity account, you reduce the risk of the college/department losing access to the Google Form.
  • After building the Google Form set the form to record results in a Google Spreadsheet. This allows for easy viewing, sharing, and monitoring results. Google Forms provides several reporting options and can send you notifications when a new entry is received.
  • Google Forms allows you to set auto-response on form submission. You can respond with custom welcome messages, acknowledge support requests, send confirmation emails, and more. However, If you don't want to auto-respond, this feature can be deactivated.
  • Google Forms belongs to a family of Google products. Results are more accessible within this family of products, are backed up online, and can easily be exported into other formats. Get familiar with the Google family of products to better understand their potential for your data management needs.
  • Google Forms can be set public or private. This controls who can view and use the form. By default, a form is set as private. Remember to change this setting based on your needs.

Emma Forms

Creating sign-up forms for Emma email service mailing lists is outlined on the Emma website.

When Embedding Emma forms on the UAH website, remember:

  • You must have an Emma account set up through the OMC to have a form embedded on the site.
  • It must be a regular sign-up form - not a lightbox. Lightboxes are not ADA compliant.
  • If the form is to be embedded on the UAH website, it must not contain any logos or imagery.
  • Please be sure to format all response emails in Emma before adding the form to the website.
  • OMC will place the embed code for the form on the UAH site so that any formatting for responsiveness can be addressed immediately.

If you have any questions about placing Emma forms on the UAH website, please contact webmaster@uah.edu for assistance.

Show/Hide Content

Use these utility classes for showing and hiding content based on the user's device size.

Use these on a limited basis and avoid creating entirely different versions of the same site. Mobile users get frustrated when they aren't able to see the same content as desktop users.

 Extra-small devices Phones (<700px)Small devices Tablets (≥700px)Medium devices Desktops (≥900px)Large devices Desktops (≥990px)
.visible-xs Visible
.visible-sm Visible
.visible-md Visible
.visible-lg Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

Content Grouping

Wells, panels, and callouts are available to help visually group content.

Wells

Wells are most often used in the sidebar to group content that may or may not be related to its surrounding content.

Example

Upcoming Open House

OCT 4th

More info




Upcoming Open House


OCT 4th


  More info

 

Callouts

 

Example

Remember

Blue callouts display information that may be relevant to the current task.

Important

Yellow callouts display information that is important to the current task.





Remember


Blue callouts display information that may be relevant to the current task.







Important


Yellow callouts display information that is important to the current task.

 

Panels

Panels are most often used to group content that is related to the surrounding content.

Example

Important Dates

November: Get your FAFSA pin
January: Fill out your FAFSA online at fafsa.gov
May-August: Complete loan entrance counseling and sign the promissory note at https://studentaid.gov

Important Dates

November: Get your FAFSA pin
January: Fill out your FAFSA online at fafsa.gov
May-August: Complete loan entrance counseling and sign the promissory note at https://studentaid.gov







Important Dates


  




November: Get your FAFSA pin
January: Fill out your FAFSA online at fafsa.gov
May-August: Complete loan entrance counseling and sign the promissory note at https://studentaid.gov


  









Important Dates


  




November: Get your FAFSA pin
January: Fill out your FAFSA online at fafsa.gov
May-August: Complete loan entrance counseling and sign the promissory note at https://studentaid.gov

 

Expanding Panels

Use expanding panels to condense very long content into more navigable groups.

Example

Panel 1

Panel 1 Body - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum. Donec nec tincidunt dolor. Mauris dolor nisi, pellentesque quis tellus malesuada, placerat tristique dui.

Panel 2 Body - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum. Donec nec tincidunt dolor. Mauris dolor nisi, pellentesque quis tellus malesuada, placerat tristique dui.

Panel 3 Body - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit mauris dictum metus porta, in consectetur dui aliquam. Nunc eu pharetra ipsum. Donec nec tincidunt dolor. Mauris dolor nisi, pellentesque quis tellus malesuada, placerat tristique dui.









 Panel 1 


    






Panel 1 Body...


      


    


  








    






Panel 1 Body...


      


    


  








    






Panel 1 Body...