Accordion Block in Default Theme

Ideal for presenting a large amount of information in a compact-style, clickable list. Accordion items can contain text blocks, image blocks, bulleted lists, numbered lists, 2- or 3-column layouts with photo and button styles.

H2 Headline / Proxima Nova Bold

H3 Headline / Proxima Nova Bold

H4 Headline / Proxima Nova Semibold

H5 Headline / Proxima Nova Semibold
H6 Headline / Proxima Nova Semibold

Body (Normal) /Proxima Nova Regular

Body Link /Proxima Nova Regular

Tag Font Pixels EM
H1 Proxima Nova Bold 50 3.125
H2 Proxima Nova Bold 44 2.75
H3 Proxima Nova Bold 36 2.25
H4 Proxima Nova Semibold 28 1.75
H5 Proxima Nova Semibold 22 1.375
H6 Proxima Nova Semibold 18 1.125
Body (Normal) Proxima Nova Regular 16 1
Body Link Proxima Nova Regular 16 1

Please note: Headline styles (sizes) must be used in a sequencial order for ADA compliance. For example, a page headline can be an H1 designation with an H2 sub-headline following, and then body text (Normal). However, a page beginning with an H3 headline followed by an H1 headline and body copy is not consistent with compliance guidelines. (Source)

This the body text styled with "Normal."  Links made in body text will display with a color, example: Link example. When creating the link, complete the Title field. This populates the title attribute of the link, usually shown as a small tooltip on hover.


Insert Horizontal Line

Example shown above and below.


Insert/Remove Bulleted List
  • This is a bullet item
  • This is a bullet item
    • This is a bullet item
    • This is a bullet item
Insert/Remove Numbered List
  1. This is a bullet item
  2. This is a bullet item

Block Quote

Never put off till tomorrow what you can do the day after tomorrow.


Button Styles

Buttons have a default state and a hover state (color changes when cursor hovers over button). Button Large and Button can expand to the width of the text inside, while Button Fixed Width does not. 

Button Large Place cursor over buttons to reveal hover state color change.

Button

Button Fixed Width


Link Styles

Link - This style is generally for body text and list items.

Link Arrow - This link style can call attention to a link or be a call-to-action style link/highlight.

External link


Table Title (Optional)

This section is available for table descriptive copy.  Tables will work on neutral as well as Primary and Secondary colors.

  Column Label Column Label Column Label Column Label
Row Label Content 1000.00 Content 1000.00
Row Label Content 1000.00 Content 1000.00
Row Label Content 1000.00 Content 1000.00
Row Label Content 1000.00 Content 1000.00

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Pellentesque habitant morbi tristique senectus et netus. Cras mattis iudicium purus sit amet fermentum. 

Learn More

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

  • Bulleted list item number 1
  • Bulleted list item number 2
  • Bulleted list item number 3
  1. Number list item number 1
  2. Number list item number 2
  3. Number list item number 3

Learn More

 

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

 

 

3-column layout with photo

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

Theresa Tsao Headshot

 

Accordion Block in Soft Gray Theme

Ideal for presenting a large amount of information in a compact-style, clickable list. Accordion items can contain text blocks, image blocks, bulleted lists, numbered lists, 2- or 3-column layouts with photo and button styles.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Pellentesque habitant morbi tristique senectus et netus. Cras mattis iudicium purus sit amet fermentum. 

Learn More

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

  • Bulleted list item number 1
  • Bulleted list item number 2
  • Bulleted list item number 3
  1. Number list item number 1
  2. Number list item number 2
  3. Number list item number 3

Learn More

 

 

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

 

 

3-column layout with photo

 

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

Theresa Tsao Headshot

 

Accordion Block in Legacy I Theme

Ideal for presenting a large amount of information in a compact-style, clickable list. Accordion items can contain text blocks, image blocks, bulleted lists, numbered lists, 2- or 3-column layouts with photo and button styles.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Pellentesque habitant morbi tristique senectus et netus. Cras mattis iudicium purus sit amet fermentum. 

Learn More

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

  • Bulleted list item number 1
  • Bulleted list item number 2
  • Bulleted list item number 3
  1. Number list item number 1
  2. Number list item number 2
  3. Number list item number 3

Learn More

 

 

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

 

 

3-column layout with photo

 

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

Theresa Tsao Headshot

 

Accordion Block in Primary Theme

Ideal for presenting a large amount of information in a compact-style, clickable list. Accordion items can contain text blocks, image blocks, bulleted lists, numbered lists, 2- or 3-column layouts with photo and button styles.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Pellentesque habitant morbi tristique senectus et netus. Cras mattis iudicium purus sit amet fermentum. 

Learn More

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

  • Bulleted list item number 1
  • Bulleted list item number 2
  • Bulleted list item number 3
  1. Number list item number 1
  2. Number list item number 2
  3. Number list item number 3

Learn More

 

 

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

 

 

3-column layout with photo

 

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

Theresa Tsao Headshot

 

Accordion Block in Accent Theme

Ideal for presenting a large amount of information in a compact-style, clickable list. Accordion items can contain text blocks, image blocks, bulleted lists, numbered lists, 2- or 3-column layouts with photo and button styles.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Pellentesque habitant morbi tristique senectus et netus. Cras mattis iudicium purus sit amet fermentum. 

Learn More

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

  • Bulleted list item number 1
  • Bulleted list item number 2
  • Bulleted list item number 3
  1. Number list item number 1
  2. Number list item number 2
  3. Number list item number 3

Learn More

 

 

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

 

 

3-column layout with photo

 

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

Theresa Tsao Headshot

 

Accordion Block in Legacy II Theme

Ideal for presenting a large amount of information in a compact-style, clickable list. Accordion items can contain text blocks, image blocks, bulleted lists, numbered lists, 2- or 3-column layouts with photo and button styles.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Pellentesque habitant morbi tristique senectus et netus. Cras mattis iudicium purus sit amet fermentum. 

Learn More

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

  • Bulleted list item number 1
  • Bulleted list item number 2
  • Bulleted list item number 3
  1. Number list item number 1
  2. Number list item number 2
  3. Number list item number 3

Learn More

 

 

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

 

 

3-column layout with photo

 

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 

Theresa Tsao Headshot