Typography

Typeface


Raleway

font-family: "Raleway", sans-serif;

Raleway is an elegant sans-serif typeface family intended for headings and other large size usage. Initially designed by Matt McInerney as a single thin weight, it was expanded into a 9 weight family by Pablo Impallari and Rodrigo Fuenzalida in 2012 and iKerned by Igino Marini.

Google Font Source
Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 10

Lists


Ordered list example using the parent vp-brand-list class wrapper

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4

Ordered list with nested lists examples using the parent vp-brand-list class wrapper

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4
  5. List item with nested Ordered list
    1. Ordered list item
    2. Ordered list item
    3. Ordered list item
  6. List item with nested Unordered list
    • Unordered list item
    • Unordered list item
    • Unordered list item

Unordered list using the parent vp-brand-list class wrapper

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

Unordered list with nested lists examples using the parent vp-brand-list class wrapper

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List item with nested Ordered list
    1. Ordered list item
    2. Ordered list item
    3. Ordered list item
  • List item with nested Unordered list
    • Unordered list item
    • Unordered list item
    • Unordered list item

Ordered list example

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4

Ordered list example with nested ordered list.

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4
  5. List item with nested Ordered list
    1. Ordered list item
    2. Ordered list item
    3. Ordered list item

Ordered list example with nested unordered list.

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4
  5. List item with nested Unordered list
    • Unordered list item
    • Unordered list item
    • Unordered list item

Unordered list example.

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

Unordered list example with nested unordered list.

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List item with nested Uordered list
    • Unordered list item
    • Unordered list item
    • Unordered list item

Unordered list example with nested ordered list.

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List item with nested ordered list
    1. Ordered list item
    2. Ordered list item
    3. Ordered list item

Development Notes:

The class .vp-brand-list should be used in any cases where a list is, or can be, used in the content editor. This class can be applied directly to the ul or ol tag, or to it's parent wrapper div. The vp-brand-list class should be applied to any list where the brand styling is desired.

For nested lists, ONLY the single top most ul or ol should have the class applied. OR only the parent wrapper div should have the class applied if the lists are implemented using the parent wrapper div method. Both options are shown above. We recommend the parent wrapper div option if possible.

Body Copy


Page Heading (h1)

The h1 page heading should communicate the main focus of the page. You should make the page heading descriptive and succinct. There should ONLY be ONE h1 page heading per page.

Section Heading (h2)

Section Heading (h3)

Section Heading (h4)

Section Heading (h5)
Section Heading (h6)

Section headings, introduce sections and subsections within the body copy. When creating section headings, try to be succinct, and descriptive. The content of the body copy will determine the topics of each section. Try to keep each section and subsection focused — for example: try to include one theme (topic) per section.


Lorem ipsum dolor sit amet, consectetuer adipiscinean commodo ligula egit dolor. Aenean massa. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula egit dolor. Aenean massa.or sit amet.

Example Person's Name Example Quote Title

Example blockquote, can be used on standard inner pages and other pages that can use the inner components, such as the news story page and the program page.


Example basic body copy link NOT within a component or inline.

PARAGRAPH WITH BASIC INLINE LINK

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula egit dolor. Aenean massa. Lorem ipsum dolor sit amet. Olorepre mincto dundae qui od quassed utatemqui Example inline body copy link that has a lot of text so that it is longer. remoluptae plibusant plam, que pra quunt aut quissum nimus denimus sint. Sapera doluptamus

  1. Link inside of ordered list.
  2. Link inside of ordered list.