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 Design Patterns 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 devices Small devices Medium devices Large 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.

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

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.

 

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. 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 and to determine the dimensions needed for each size.

  Source Image Size Float Left Float Right
Full width 1440px x 810px N/A N/A
2/3 width 960px x 540px .left-66 .right-66
1/2 width 720px x 405px .left-50 .right-50
1/3 width 480px x 270px .left-33 .right-30

Advanced Sizing

For more control over sizing images, use the Bootstrap grid classes. The grid classes allow you to specify the width to display at each screen size.

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 played within a page or in a modal (pop- up). 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.

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
  A B C
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
  A B C
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
  A B C
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
  A B C
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
  A B C
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
  A B C
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

The recommended solution for creating forms is to use Google Forms. Google Forms is an easy way to build forms and collect results.

Form Fields

Example
Radio
Checklist 



    
    
  



    
    
  



    
    
  



    






Radio











Checklist

 

Horizontal Form

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.

Example

 

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