Skip to Main Content

H1 Heading

The website uses Google Fonts Open Sans for most text and Georgia for serif text.

 

Mauris nisi ipsum, varius vitae dapibus sit amet, pretium eu lacus. Maecenas lorem nulla, blandit mollis commodo ac, ultricies sed magna. Nunc auctor suscipit justo, in pulvinar felis rhoncus sit amet. Donec adipiscing convallis purus id cursus. Quisque consectetur accumsan elit ac venenatis. Sed at sapien vel tortor molestie dictum. Mauris vitae risus vel nibh feugiat porta eget eu lectus. Nulla tristique, diam ac imperdiet rhoncus, risus ligula laoreet sem, vel consectetur odio elit ut odio. Maecenas lorem metus, laoreet at venenatis in, dictum non odio.

H2 Heading

Nullam fermentum porta enim sit amet tristique. Aliquam fermentum nibh at ligula lacinia laoreet interdum urna sagittis. Vivamus dui ligula, vestibulum vel interdum consequat.Ut ultricies, nisl eu dictum gravida, dolor erat molestie dolor, ac posuere augue felis quis ligula. Curabitur sit amet lectus nisl, id posuere lacus. Maecenas tincidunt luctus sem.

H3 Heading

Pellentesque venenatis volutpat molestie. Nam porttitor justo ut arcu viverra at feugiat eros semper. Phasellus auctor aliquam viverra. Maecenas iaculis, ligula ut lobortis ultrices, ante mauris feugiat enim, ac tempor est risus ut odio. Phasellus hendrerit aliquet libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat.

H4 Heading

Integer porta dui nec lectus ultricies eget mollis lectus suscipit. Nunc quis orci est, quis blandit neque. Suspendisse nibh est, fermentum posuere viverra vitae, dictum vitae dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eros leo, blandit ac posuere a, tristique sed leo. Donec tempor interdum diam.

H5 Heading

Nunc pellentesque ornare lacinia. Phasellus porttitor eros vitae ipsum ultricies molestie. Morbi non est ut nunc vestibulum congue sollicitudin at urna. Phasellus nec convallis lorem. Vivamus dui mi, accumsan et fringilla mollis, tristique ac purus. In vel porta velit. Phasellus nisl lacus, luctus sed porta et, iaculis et nisi. Vivamus sagittis ornare lorem eget lacinia.

 

Additional Headline Styles

Headings with Sub-Headlines Headings with Underlines

Any of the headlines can be styled slightly smaller in order to create a visual sub-headline while still keeping the semantics and meaning of the heading for accessibility.

 

Instructions: Select the entire headline text and apply the headline tag. Then select only the sub-heading text and apply the .subhead style.

 

H1 Heading
with a subhead

H2 Heading
with a subhead

H3 Heading
with a subhead

H4 Heading
with a subhead

H5 Heading
with a subhead

 

Any of the headlines H2 to H5 can have an underline bar that is 100% wide. This helps to visually separate larger blocks of content.

 

Instructions: Select headline and apply the .underline style.

 

H2 Heading with .underline


H3 Heading with .underline


H4 Heading with .underline


H5 Heading with an .underline
 

Additional Text Styles

These text styles are applied through the Ektron rich text editor's built-in buttons. 

This is a hyperlink style.
This is bold text. It uses the <b> tag.
This is italic text. It uses the <i> tag.
This is superscript text -- ® . It uses the <sup> tag.
This is subscript text -- H2O. It uses the <sub> tag.

 

These text styles applied via the Apply Style menu of options. Text styles should not be used in lieu of Headings (which provide meaning to screenreaders for accessibility), but can be applied on top of Headings to change their visual appearance.

 

text1

text2

text3

text4

text5

text6

notification1
notification2 
fineprint1
fineprint2
fineprint3

quote1 style

quote2 style

 

List Styles

This is an ordered list. 

  1. This is the first item.
  2. This is the second item.
  3. This is the third item.
    1. Indent level two.
    2. Indent level two.
      1. Indent level three.
      2. Indent level three.
       
     
 

This is an unordered list.

  • This is the first item.
  • This is the second item.
  • This is the third item.
    • Indent level two.
    • Indent level two.
      • Indent level three.
      • Indent level three. 
       
     
 

Blockquotes

When combined with a blockquote (indent right), the style is accented with margin and quotation marks to set the quote apart from surrounding content. 

 

Blockquote + Quote1: 

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.

Blockquote + Quote2:

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.

 

Buttons

Basic Button Gray Button Blue Button Teal Button
Basic Button  Gray Button  Blue Button  Teal Button
 btn-basic  btn-gray  btn-blue  btn-teal


Color Accents

Gray Blue Teal Green Red Purple Yellow  
Photo Color 1 Photo Color 1 Photo Color 1 Photo Color 1 Photo Color 1 Photo Color 1 Photo Color 1   * Used on banners
bar-gray bar-blue bar-teal bar-green bar-red bar-purple bar-yellow  
               
reverse-gray reverse-blue reverse-teal reverse-green reverse-red reverse-purple reverse-yellow   * Used on side columns
               
box-gray box-blue box-teal box-green box-red box-purple box-yellow  


Tables

table.basic
Heading Row      TR 2 TR 2
row 1 100 10%
row 2 200 20%
row 3 300 30%
row 4      400 40%
table.blue
Heading Row TH 2 TH 3
row 1 100 10%
row 2 200 20%
row 3 300 30%
row 4 400 40%
table.bluegray
Heading Row TH 2 TH 3
row 1 100 10%
row 2 200 20%
row 3 300 30%
row 4 400 40%
table.gray
Heading Row TH 2 TH 3  
row 1 100 10%
row 2 200    20%
row 3 300 30%
row 4 400 40%

 

Video Sizes

 video-sm View a demo of all video sizes. Remove height and width from the iframe and use one of these classes for responsive sizing. For example: <iframe class="video-sm" ... >
  • video-xl
  • video-lg
  • video-md
  • video-sm
  • video-xs
 

Colors Palette