Components

Tables

This is a caption for the table. It would go full width as a one column piece of text
An Extra Long Title For a Table Can Go Here Second Column Third Column
Table Head Row One Table Data One Table Data Two
Table Head Row Two, An Extra Long Name for an Item Table Data Four Table Data Five
Table Head Row Three An Extra Long Name for an Item Table Data Eight

Development Notes:

The table component has an optional table caption. When tables have a lot of content it is best practice, in order to increase accessibility, to add a table caption. The table caption is intended to establish the purpose of the table content as a whole.

Accordions

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

auto width image alt text

Development Notes:

The accordion can have basic body copy elements in each panel, as well as images and tables. Elements that should NOT be allowed inside of accordion panels: Sliders, Accordions, Tabs.

The first panel of each accordion instance is open by default on page load. The accordion components works best when used inside of the main column of pages.

The heading level of each accordion panel needs to be adjustable depending on the context of the content on the page. The heading level should NOT be hard coded, it must be adjustable per component instance. The default heading level should be set to heading level two (h2).

The design of the headings will remain the same no matter which heading level is set. The design is set with the custom classes on the heading tags.

Tabs

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

Development Notes:

The tabs component requires a max of 3 tab panels per component instance to maintain the design.

The tabs can have basic body copy elements in each panel, as well as images and tables. Elements that should NOT be allowed inside of tab panels: Sliders, Accordions, Tabs.

Cards

1 column card layout.

Example alt text 5

TITLE GOES HERE

Lorem ipsum dolor sit amet, consectet adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

Learn More

2 column card layout.

Example alt text 1

A CARD TITLE CAN GO HERE ONTO MULTIPLE LINES OF TEXT

Lorem ipsum dolor sit amet, consectet adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

Learn More
Example alt text 2

TITLE GOES HERE

Lorem ipsum dolor sit amet, consectet adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

Learn More

3 column card layout.

Example alt text 1

A CARD TITLE CAN GO HERE ONTO MULTIPLE LINES OF TEXT

Lorem ipsum dolor sit amet, consectet adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

Learn More
Example alt text 2

TITLE GOES HERE

Lorem ipsum dolor sit amet, consectet adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

Learn More
Example alt text 3

TITLE GOES HERE

Lorem ipsum dolor sit amet, consectet adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

Learn More

Development Notes:

Generic Cards within the main column have a wrapper class that allows the cards to have a few different layout options: 1 column, 2 column, 3 column. The wrapper class is .vp-generic-cards--cols. This wrapper div can contain a max of 3 cards per component instance.

The 3 column card layout works best and is recommend to ONLY be used on the following template options: Standard Inner 2 Column - with left sidebar, Standard Inner 2 Column - with right sidebar, Standard Inner 1 Column. However, the 3 column card layout is NOT recommend to be used on the Standard Inner 3 Column template.

The heading level of each card needs to be adjustable depending on the context of the content on the page. The heading level should NOT be hard coded, it must be adjustable per component instance. The default heading level should be set to heading level three (h3). The heading levels can range between (h2) - (h6). The .mb-2 spacing class should remain the same on the heading tag no matter which level is set.

Image Specification Notes:

Aspect ratio: 16:9

Desktop Image Size: 960 x 540px

Tablet Image Size: 640 x 360px

Mobile Image Size: 480 x 270px

Background Image Card

BG IMAGE PROMO WITHOUT OPTIONAL LINK CTA

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

BG IMAGE PROMO WITH OPTIONAL LINK CTA

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

Optional Link CTA

Image Specification Notes:

Aspect ratio: 1:1

All breakpoints Image Size: 480 x 480px

Images

FULL WIDTH IMAGE EXAMPLE

full width image alt text

Image Specification Notes:

Aspect ratio: 16:9

Desktop Image Size: 960 x 540px

Tablet Image Size: 640 x 360px

Mobile Image Size: 480 x 270px

AUTO WIDTH IMAGE EXAMPLE

auto width image alt text

Image Specification Notes:

Aspect ratio: 16:9

Desktop Image Size: 960 x 540px

Tablet Image Size: 640 x 360px

Mobile Image Size: 480 x 270px

FULL WIDTH IMAGE WITH CAPTION

Example full width image alt text

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

Image Specification Notes:

Aspect ratio: 16:9

Desktop Image Size: 960 x 540px

Tablet Image Size: 640 x 360px

Mobile Image Size: 480 x 270px

AUTO WIDTH IMAGE WITH CAPTION

Example auto width image alt text

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

Image Specification Notes:

Aspect ratio: 16:9

Desktop Image Size: 960 x 540px

Tablet Image Size: 640 x 360px

Mobile Image Size: 480 x 270px

PORTRAIT IMAGE FLOATED TO THE LEFT WITH PARAGRAPH TEXT

Example portrait layout image floating left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet. 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. Lorem i consectetuer adipiscing elit. Aenean commodo ligula egit dolor. Aenean massa. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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. Lorem i consectetuer adipiscing elit. Aenean commodo ligula egit dolor. Aenean massa. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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. Lorem i consectetuer adipiscing elit. Aenean commodo ligula egit dolor. Aenean massa. Lorem ipsum dolor sit amet.

Image Specification Notes:

Aspect ratio: 9:16

All breakpoints Image Size: 180 x 320px

PORTRAIT IMAGE FLOATED TO THE RIGHT WITH PARAGRAPH TEXT

Example portrait layout image floating right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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. Lorem i consectetuer adipiscing elit. Aenean commodo ligula egit dolor. Aenean massa. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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. Lorem i consectetuer adipiscing elit. Aenean commodo ligula egit dolor. Aenean massa. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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. Lorem i consectetuer adipiscing elit. Aenean commodo ligula egit dolor. Aenean massa. Lorem ipsum dolor sit amet.

Image Specification Notes:

Aspect ratio: 9:16

All breakpoints Image Size: 180 x 320px

LANDSCAPE IMAGE FLOATED TO THE LEFT WITH PARAGRAPH TEXT

Example landscape layout image floating left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet. 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. Lorem i consectetuer adipiscing elit. Aenean commodo ligula egit dolor. Aenean massa. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet. 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. Lorem i consectetuer adipiscing elit. Aenean commodo ligula egit dolor. Aenean massa. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet. 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. Lorem i consectetuer adipiscing elit. Aenean commodo ligula egit dolor. Aenean massa. Lorem ipsum dolor sit amet.

Image Specification Notes:

Aspect ratio: 16:9

All breakpoints Image Size: 320 x 180px

LANDSCAPE IMAGE FLOATED TO THE RIGHT WITH PARAGRAPH TEXT

Example landscape layout image floating right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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. Lorem i consectetuer adipiscing elit. Aenean commodo ligula egit dolor. Aenean massa. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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. Lorem i consectetuer adipiscing elit. Aenean commodo ligula egit dolor. Aenean massa. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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. Lorem i consectetuer adipiscing elit. Aenean commodo ligula egit dolor. Aenean massa. Lorem ipsum dolor sit amet.

Image Specification Notes:

Aspect ratio: 16:9

All breakpoints Image Size: 320 x 180px

Sliders

Example Alt Text 6

Optional text below slider. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer aenean massa.

Development Notes:

Each slider components instance should have a MAX of 4 slides. Each slide has an optional caption. Basic body copy, such as headings and links can also be added to each slide's content.

Image Specification Notes:

Aspect ratio: 16:9

Desktop Image Size: 960 x 540px

Tablet Image Size: 640 x 360px

Mobile Image Size: 480 x 270px

Embed Videos

Development Notes:

Set up is for YouTube embed video, embed ID at the end of the iFrame src URL ID will need to be updated per component instance to match the ID of the video being embedded from YouTube.

The video has a parent wrapper div with the class .vp-c-video--16-9. This wrapper div adds styles to make the video responsive and preserve the aspect ratio.

Video Specification Notes:

Aspect ratio: 16:9

Header

Development Notes:

Global header design is the same on all page templates.

Footer

Development Notes:

Footer design has a different background color on the home page template, than the rest of the page templates.

Page Top

Variation 1

Background image set on class .vp-page-top

Demo of page with Variation 1 Page Top

Variation One: with BG Image

Image Specification Notes:

All breakpoints Image Size: 1440 x 259px

Variation 2

Demo of page with Variation 2 Page Top

Variation Two, No BG Image

Development Notes:

There are two varitions of the Page Top component. Variation 1 allows for the page top region to have a background image. Variation 2 allows for a page top region with NO background image. There are slight structural differences in the two variations. The editor should be able to choose which option they want to activate per page. The default variation should be Variation 2, with NO background image.

Subnavigation

Development Notes:

Subnavigation nests to 3 levels deep. IDs need to be updated when new submenus are added in order to maintain proper accordion like functionality of subnavigation.