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 SourceA 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
- List Item 1
- List Item 2
- List Item 3
- List Item 4
Ordered 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
- Ordered list item
- Ordered list item
- Ordered list item
- 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
- Ordered list item
- Ordered list item
- Ordered list item
- List item with nested Unordered list
- Unordered list item
- Unordered list item
- Unordered list item
Ordered list example
- List Item 1
- List Item 2
- List Item 3
- List Item 4
Ordered list example with nested ordered list.
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- List item with nested Ordered list
- Ordered list item
- Ordered list item
- Ordered list item
Ordered list example with nested unordered list.
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- 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
- Ordered list item
- Ordered list item
- 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 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