Content Components

Content Components are the building blocks of your page. They provide structured design templates for the presentation of multiple kinds of content. You can add, edit, duplicate, and rearrange Components on pages to highlight text and media, and most Components offer additional configuration options to fine-tune the display to suit your content.

 

1. Basic Content

A standard rich-text input field with formatting options for text, embedded media, and the styling of headings. Use it as a general all-purpose content field where no particular structure is indicated.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis accumsan porttitor mi, quis molestie odio efficitur tempus. Cras accumsan sem sit amet quam.

List title here:

  • List item goes here
  • List item goes here
  • List item goes here

Button 1

Button 2

Button 3

2. Accordion

Separate content into collapsable accordion items with clickable headings. Use accordions to shorten long pages and allow users to scan through topic headings to find content, such as FAQs and documentation.

Accordion item content goes here.

Accordion item content goes here.

Accordion item content goes here.

.


 

3. Highlighted Content

A bold component split 50/50 that displays an image to one side with a heading and description on the other side. Optional links can be added below the description, and the image can be placed to either the right or left. This component is ideal for pages without a sidebar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit Integer a sagittis elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a sagittis elit. Nulla eget ipsum quis metus feugiat sodales vitae in lorem.

4. Callout Block

Displays an image on the left, with a heading and description on the right. An optional link or call to action can be added to the component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit Integer a sagittis elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a sagittis elit. Nulla eget ipsum quis metus feugiat sodales vitae in lorem. In in fermentum sem. Aenean et odio id erat placerat auctor nec et felis. Sed ac scelerisque sem. Etiam viverra tempus metus.

5. Carousel

A swipeable, slider type of component, with a heading, description, and a call-to-action link. Individual carousel slides offer configuration options to include images, text, and links.

6. Gallery

Displays a title followed by thumbnail images of featured media. When the media are clicked, they open in a large modal window that allows the user to browse through the items in the gallery.

7. Hero Area

Prominently place a video or a large format image on your website pages.

8. Featured Cards

Displays up to three card-style items with an image, heading, and link. Offers configuration options for image aspect ratio or shape.

9. Formatted Grid

A grid layout option for lists that provides a heading and description followed by a two- or three-column layout. Grid items—card-like components consisting of text and optional media content—can be added to each column. Useful for lists of links and resources.

Callout Grid Header

Introductory text describing the grid items is displayed here.

Description for grid button goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a sagittis elit.

Description for grid button goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a sagittis elit.

Description for grid button goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a sagittis elit.

Description for grid button goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a sagittis elit.

Description for grid button goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a sagittis elit.

Description for grid button goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a sagittis elit.

10. Teaser Listing

Displays a heading and one or more call-to-action links, followed by a listing of content teasers of a user-selected Content Type, either Events or News. This component is ideal for pages without a sidebar.

Upcoming Events

Example Event

A Great Subtitle

Scroll down this page to get an idea of what an event listing can look like…