Component Training Videos

A video demonstration of each of the components and how to use them is provided for web editors. Increase your confidence using the components by reviewing these training videos.

Component Example: 001 C1 V1

This allows you to add an image to the banner behind the title.

Component Example: 001 C1 V2

This is another version of the hero component, and can be used if you have a paragraph of text you want to display in the hero/banner area of the page. You can also add CTA buttons as seen below:

Component Example: 001 C1 V3

Very similar to component 001 C1 V1 but is smaller. It applies an image to the banner behind the title.

Component Example: 002 C2

The WYSIWYG component is for paragraphs of text when text formatting is required. It supports bold, italic, and underlined content as well as links, lists and text alignment options. It works similar to other text formatting applications. WYSIWYG stands for "What You See Is What You Get".

Component Example: 003 C3

The feature thumbnail list component is good for presenting content in a visually driven, easily scannable way. The user can click on the image or the text to see more.

Component Example: 004 C4

This component is for situations where a lot of text content is required on a page. It splits the page between images and text to make the content more visually interesting while allowing a lot of space to write text at length.

COMPONENT EXAMPLE: 005 C5 VIMEO

This component facilitates easily adding a Vimeo video embed and ships with a nice title and description area as well as an optional call to action button.

Component Example: 005 C5 YouTube

This component facilitates easily adding a YouTube video embed and ships with a nice title and description area as well as an optional call to action button.

Component Example: 006 C6

Use the contact section to add departmental names, phone numbers, email addresses and hours of availability.

Component Example: 007 C7

Feature key options or links using this grid of custom icons.

Component Example: 008 C8

The feature list component allows the user to emphasize a list of items. The items can't be hyperlinked, so the component is just for ticking through a list of items to be featured.

Component Example: 009 C9 (No Images)

Display content to support the words of the content. The editor can choose to display 3 or 4 cards across on desktop view.

Component Example: 009 C9 (Images)

Display content with engaging images to support the words of the content. The editor can choose to display 3 or 4 cards across on desktop view.

Component Example: 010 C10

An image gallery with optional captions.

Component Example: 011 C11 V1

The call to action component is used to give the user the opportunity to respond to the content on the page by taking the next step in the process, whether that be to apply for something, schedule a meeting, or learn more information.

Component Example: 011 C11 V2

The call to action component is used to give the user the opportunity to respond to the content on the page by taking the next step in the process, whether that be to apply for something, schedule a meeting, or learn more information. With this one, you have the option to add a nice image.

Component Example: 011 C11 V3

The call to action component is used to give the user the opportunity to respond to the content on the page by taking the next step in the process, whether that be to apply for something, schedule a meeting, or learn more information. This option is a lot smaller, takes little space.

Component Example: 011 C11 V4

The call to action component is used to give the user the opportunity to respond to the content on the page by taking the next step in the process, whether that be to apply for something, schedule a meeting, or learn more information.

Component Example: 013 C13

The social follow component allows you to display links to your social media accounts. The component can have a brand evergreen or brand lime background.

Component Example: 014 C14

This component is great for giving the visitor options as it displays multiple (3+) links in one place. You can choose to have the links open in a new tab.