Colors

Primary

  • #b00
  • #666
  • #282828
  • #fff

Neutrals

  • #f2f2f2
  • #e2e2e2
  • #b9b9b9
  • #666
  • #3b3b3b
  • #222

Accents

  • #909738
  • #92b0d7
  • #dcaa38
  • #453831
  • #d65828
  • #5d1542

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

H2 Section Header

h2.section__header

H3 Teaser item header

h3.teaser-item__header

Paragraph Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P R E F O R M A T T E D T E X T ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ 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 { | } ~
Read more .more-link

This is an example of 'intro-text' where the editor may want to style the first paragraph a little differently or add a distinct lead-in to the story.

p.intro-text

This is an example of a standard blockquote. Fusce vulputate rutrum nulla, at vehicula mauris ultricies at. Etiam sollicitudin velit neque, ut mollis lacus mattis non. Proin finibus ultrices lorem, ac posuere risus ultricies ut. Nulla facilisi.

This is an example of a pulled-quote blockquote. Fusce vulputate rutrum nulla, at vehicula mauris ultricies at. Etiam sollicitudin velit neque, ut mollis lacus mattis non. Proin finibus ultrices lorem, ac posuere risus ultricies ut. Nulla facilisi.

Name of Person, Title of Person

This is an example of a tweet used as a blockquote. Fusce vulputate rutrum nulla, at vehicula mauris ultricies at ut mollis lacus mattis non. #Etiam #sollicitudin #Nulla

@TwitterHandle

Links & Buttons

This is a text link within a paragraph, a list, or other block of text.

This is a header that is also a link

button.button

Button Link

a.button

button.button--gray

Button Link

a.button--gray

Tables

This is a table caption. Always include a caption to label the table, similar to the alt-text of an image.
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
This is a striped table. It uses the class: table--zebra, and contains odd and even table rows.
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data

Media

Put your alt text here
Image captions and/or credits can go here.

This is an example of a figure with the class of .image with a figcaption element below it.

Megan Vendemia

This is an example of a figure with the class of .image--inline with a figcaption element below it.