Styles

Paragraph, list, and headings defined.

Hard-Coded Styles

NOTE: Hard coded to show what they should match above.

Body

All body copy – headings, p, footer text etc:
Font: Source Sans Variable

Paragraph
Link
Hover
Focus
Visited
Bold text in a line.

  • PARAGRAPH (only color option)
  • color: #252525
  • size: 18px
  • line-height: 32px
  • links: padding: 2px
  • link: underline, color Alma Mater
  • hover: underline, Altgeld Orange
  • focus: underline, Altgeld Orange, and 2px dashed border
  • visited: underline, Alma Mater 1
  • strong/bold: font-weight:600
  • padding-bottom: 25px

  • list item one
  • list item 2
  • list three item
  • list four

list (only color option)

  • above paragraph style plus
  • padding-left: 40px

Drop capital letter in the first word in paragraph.

dropcap (only color option)

  • above paragraph style plus
  • float: left
  • font-size: 75px
  • line-height: 55px
  • padding-top: 4px
  • padding-right: 8px
  • padding-left: 3px


Drop capital letter in the first word in paragraph. Aliquam sit amet magna ligula. Integer et metus dolor. Nulla in scelerisque dui. Morbi eu convallis tellus. Nam massa sem, luctus quis felis at, ultrices rhoncus enim. Donec non lobortis dolor, eu ullamcorper dui. Duis bolded body text eu rhoncus odio. Nullam tempus congue feugiat.

Example paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales sapien euismod, interdum ex nec, pharetra tellus. Link Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus tempus felis at arcu gravida, non pharetra tortor interdum. Sed nibh metus, euismod ut dictum ac, interdum non justo.

Morbi hendrerit ultricies hover lectus, eget lobortis ligula iaculis non. Proin tristique malesuada elementum. Nam ut nunc nec tortor laoreet molestie eu sed massa. Vivamus eros lorem, pretium sit amet ullamcorper nec, malesuada sit amet turpis. Mauris focus imperdiet metus sit amet tellus pretium, non volutpat nulla ullamcorper.

  • list item one
  • Visited list item 2
  • list three items
  • list four

“Block Quote example. We are encouraged to see that an Illinois educational experience remains a priority for students and families, even in these unprecedented times,”

Chancellor Robert Jones

Block Quote example – Not styled. We are encouraged to see that an Illinois educational experience remains a priority for students and families, even in these unprecedented times,

Chancellor Robert Jones

All Headings

  • Font: Source Sans Variable
  • padding-top: 20px
  • padding-bottom: 10px

Heading color options – Illini Blue, Orange, and White

Illini Blue
Link
Hover
Focus
Visited

  • Illini Blue
  • Color: Illini Blue
  • Link: underline, color Alma Mater
  • Hover: underline, Altgeld Orange
  • Focus: underline, Altgeld Orange, and 2px dashed border
  • Visited: underline, Alma Mater 1

Illini Orange
Link
Hover
Focus
Visited

  • Illini Orange
  • Color: Illini Orange
  • Link: underline, color Illini Orange
  • Hover: underline, Altgeld Orange
  • Focus: underline, Altgeld Orange, and 2px dashed border
  • Visited: underline, Illini Blue

white
Link-tbd
Hover-tbd
Focus-tbd
Visited-tbd

  • White
  • Color: White
  • Link: underline, color white
  • Hover: underline, TBD
  • Focus: underline, TBD, and 2px dashed border
  • Visited: underline, TBD

Heading 1

  • h1
  • size: 40px
  • weight: 700
  • line-height: 52px
  • padding-top: 20px
  • padding-bottom: 10px
  • color options – Illini Blue, Orange, and White

Heading 2

  • h2
  • size: 32px
  • weight: 600
  • line-height: 40px
  • padding-top: 20px
  • padding-bottom: 10px
  • color options – Illini Blue and Illini Orange

Heading 3

  • h3
  • size: 28px
  • weight: 600
  • line-height: 32px
  • padding-top: 20px
  • padding-bottom: 10px
  • color options – Illini Blue and Illini Orange

Heading 4

  • h4
  • size: 24px
  • weight: 600
  • line-height: 28px
  • padding-top: 20px
  • padding-bottom: 10px
  • color options – Illini Blue and Illini Orange

Heading 5

  • h5
  • size: 20px
  • weight: 600
  • line-height: 22px
  • padding-top: 20px
  • padding-bottom: 10px
  • color options – Illini Blue and Illini Orange

NOTE: These are all basic blocks with no styles overridden to show the actual coding of the templates.

Heading 1

Paragraph with links. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec lacus sapien, fermentum vitae est et, pretium eleifend augue. Vestibulum egestas, felis ac faucibus sagittis, risus odio pellentesque erat, vitae volutpat dui ligula quis mauris. Quisque cursus fringilla quam eget dictum. Ut sodales nibh eget efficitur facilisis.

Heading 2

Paragraph with links. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec lacus sapien, fermentum vitae est et, pretium eleifend augue. Vestibulum egestas, felis ac faucibus sagittis, risus odio pellentesque erat, vitae volutpat dui ligula quis mauris. Quisque cursus fringilla quam eget dictum. Ut sodales nibh eget efficitur facilisis.

  • list item one
  • list item 2
  • list three items
  • list four

Heading 3 linked

Heading 3 visited

Paragraph with links. Nam posuere justo ex, vitae maximus odio consequat vel. Duis diam elit, dictum nec sapien sed, condimentum suscipit lorem. Proin ac tristique nulla. In quis ex cursus, porta purus sit amet, interdum lacus. Nulla elementum hendrerit posuere. Vestibulum vitae mi a lacus convallis blandit a at tellus.

Heading 4 – linked

Paragraph with links. Nam posuere justo ex, vitae maximus odio consequat vel. Duis diam elit, dictum nec sapien sed, condimentum suscipit lorem. Proin ac tristique nulla. In quis ex cursus, porta purus sit amet, interdum lacus. Nulla elementum hendrerit posuere. Vestibulum vitae mi a lacus convallis blandit a at tellus.

Heading 5

Paragraph with links. Nam posuere justo ex, vitae maximus odio consequat vel. Duis diam elit, dictum nec sapien sed, condimentum suscipit lorem. Proin ac tristique nulla. In quis ex cursus, porta purus sit amet, interdum lacus. Nulla elementum hendrerit posuere. Vestibulum vitae mi a lacus convallis blandit a at tellus.