Skip to main content

Body Components

The body components of this guide are meant to provide several modular options that can be used interchangeably to meet different content needs. Titles and body copy can use our substitute brand fonts: Arial and/or Georgia, as shown below.

Find guidelines on using color, typography and photography by visiting the Visual Identity section of our brand tools site.

Main Story with Photograph

Titles can use our substitute brand fonts: Arial and/or Georgia, as shown below.

  1. Photograph to stretch to the same width as header.
  2. Story title color: #4E2A84, font: Georgia Bold
  3. Story intro color: #716C6B, Font: Arial (Please keep intro short, 2-3 lines max)
  4. CTA button color: #4E2A84, Font: Arial (all caps), Color: #FFFFFF  

Main Story Without Photograph 

  1. Story title color: #4E2A84, font: Arial Bold
  2. Story intro color: #716C6B, Font: Arial (Please keep intro short, 2-3 lines max)
  3. CTA button color: #4E2A84, Font: Arial (all caps), Color: #FFFFFF

Section Titles and Story Dividers

Section titles are enclosed with a single horizontal rule on top and a double horizontal rule on the bottom. Stories are divided by a single horizontal rule.

  1. Single horizontal rule color: #CCCCCC
  2. Section title color: #4E2A84, Font: Arial (all caps)
  3. Double horizontal rule color: #CCCCCC
  4. Story divider horizontal rule color: #CCCCCC

Story Formatting - No Image

Hyperlink the story title.

  1. Story title color: #4E2A84, font: Arial Bold/Georgia Bold
  2. Story intro color: #716C6B, Font: Arial (Please keep intro short, 2-3 lines max)
  3. Story divider horizontal rule color: #CCCCCC

Story Formatting - Left Image

Hyperlink the story title and image.

  1. Image
  2. Story title color: #4E2A84, font: Arial Bold/Georgia Bold
  3. Story intro color: #716C6B, Font: Arial (Please keep intro short, 2-3 lines max)
  4. Text CTA (optional) color: #4E2A84, Font: Arial (all caps)
  5. Story divider horizontal rule color: #CCCCCC

Story Formatting - Top Image

Hyperlink the story title, image and CTA (Call To Action).

 

  1. Image
  2. Story title color: #4E2A84, font: Arial Bold/Georgia Bold
  3. Story intro color: #716C6B, Font: Arial (Please keep intro short, 2-3 lines max)
  4. Button CTA background color: #4E2A84, Font: Arial (all caps) color: #FFFFFF

Tables

Tables should be designed to be as clean as possible: no background colors, and cells must have enough padding to make content display as legibly as possible.

  1. Table border 1px, Color: # #CBCBCB