Standalone Style Guide Pages

Chapter Heading

Chapter text goes here and can be styled to include text, bullets, links, etc. Linked text will be blue. Available text colors are: green and purple if needed for emphasis.

Technically, you can also include an image in this field, but this is not generally done immediately below a hero image.

Chapter headings do not display in the dynamic in-page nav box.

Block Navigation

Use these when you want to link to other pages on the site. An image is required. The bold text will dynamically pull in the page title. The plain text below can be customized.

The block nav below is a subsection of the Chapter section above. This means the background color will be the same and there won't be a horizontal rule between them.

This is a CTA Section

You can choose between an image background, or solid purple. For image backgrounds like this one, you should turn on the Matte switch so the text will appear in a white block. The link button text will default to the page title if left empty, as shown here. CTA buttons are always white when the Matte switch is on.

Another CTA Section

If you don't upload an image, the CTA block will have a purple background. CTA buttons are always blue when on a purple background.

A Contact CTA Section

Contact CTA sections will always have a purple background and be full-width. You must link to a regular page or a gated page. Does not work with direct downloads or modal forms.

Link to the Contact page

This is an interactive map section

It looks like a regular section, but will automatically pull in the spinning globe movie on the right and the stats below.

210+

Data Centers

14

Countries

35

Metros

5

Continents

A new chapter section

Each chapter section on the page will alternate between white and gray backgrounds. Since this is the second chapter section on the page, it has a gray background. You may need to rearrange chapters to avoid having two gray sections next to each other, or having gray background on gray content (i.e., tables or block nav).

This is a carousel section with 5 items + icons

Carousels are always full-width with purple background

Text links are not advised because they are hard to read

Carousel item 3 text

More than 4 items will automatically include left/right scrolling

Carousel item 5 text

1/1

Another carousel with only 3 items and no heading across top.

Images are not required for carousel items. You will probably want to use bold text as headings.

With only 3 items, there is no left/right scrolling needed.

1/1

The Timeline Heading

2010

The Item Heading

Only being used on the About Us page.

2018

Another Item Heading

The Timeline section will always have a gray background.
1/1

Example Text & Image

Used widely, Text & Image sections will automatically alternate between image on left and image on right. This text can be styled with links, bold text, and bullets if needed. The CTA button below is not required. Buttons can link to a page or a Pardot direct download links. (Cannot link to a modal form.)

Another Text & Image Section

This Text & Image section includes a Vidyard link. Don't include a play button on your video still image because it will be added dynamically. The image is on the right side this time so it's alternating with the Text & Image section above.

Text-only section

Used alone, this looks almost exactly like a chapter section, except that Text Headings do display in the dynamic in-page nav box and they do not alternate in background color (gray/white). Text blocks can also be used as columns as seen below.

Column heading

A Columns section will display 2-across on desktop. They will be stacked for responsive layouts. This example shows a text-only section on left and an inline form on right.

The heading for the form will be pulled in dynamically from the Form entry.

You cannot add an orange CTA button to a text-only section.

Get in Touch

Top
Contact Us