Components

Accordion

The accordion component delivers large amounts of content in a small space through progressive disclosure. Lowering the chances that users will feel overwhelmed by the abundance of data.The header title acts as a high level overview, while the hidden content provides more detail. 

When to Use:

• Organize related information, such as with FAQs.
• Shorten pages and reduce scrolling when content is not crucial to read in full.

Breadcrumbs

Breadcrumbs display a list of items, which are aligned side by side, orienting the users to a current location. Allowing quick navigation of the hierarchal structure of content of two or more levels. 

When to Use:

• Intended as a secondary form of navigation, never a primary. 
• Enabling user to quickly move up to a parent level or previous step.

Columns

Displays inline content in multiple columns.

When to Use:

• Creates containers for grouped content without having to split into multiple containers. 

Content Item Detail

Allows a user to insert a content item detail for a selected content type and blueprint, for example an Activity Detail. The page this component is placed on now becomes a dynamic page which will load an activity for the ID passed to it from a link/URL. Additionally, an ID can be manually supplied to create a one-off detail page for a specific content item.

When to Use:

• Use it when you want to create dynamic pages for content explorer items.

Forms

Insert an existing Form into a Page.

When to Use:

• When a form is needed to capture related data. 

Link Grid

Displays a link list using the blueprint specified for each link. 

When to Use:

• Use this to display links in a grid layout. 

Navigation

Create a navigation bar that can be used for your main site navigation.

When to Use:

• Use where pagination needs to be shown.  

Page Editable Region

Editable regions within a site page control which areas of a template-based page a user can edit. Content editors can choose which components to add within editable areas, and thus adjust the structure of the page.

When to Use:

• User place this component on a template or layout do designate a region that can be editable on a site planner page

RAW HTML Content

Insertion of raw HTML in a textarea.

When to Use:

• When you want to add some simple HTML and have full control over the syntax

Shared Component

When to Use:

Tabs

Tabs organize related content into defined navigational buckets. Each clickable tab contains higher-level content labels and displays lower-level content with each clickable interaction. 

When to Use:

• Organize related information, such as with FAQs.
• Shorten pages and reduce scrolling when content is not crucial to read in full.

WYSIWIG

WYSIWYG (What You See Is What You Get) is a rich text editor designed to simplify website content creation. 

When to Use:

• Use to insert of custom text and elements/objects.