Live Component Guide

Your guide for building sweet content pages!

The purpose of this page is to display all of the different components that you can use to build a content page using the Page content type.

Each page built with this template has a variety of page-level settings.

Page header settings

These settings control how the site header appears on the page.

• Display mode
  The theme of the header based on what will be behind it. Use dark when the header is transparent and will be placed over a dark background.
• Transparent background
  Remove the background color from the header so that the first page component appears under the header instead of below it.

SEO metadata

Add basic SEO metadata including the page title, page description and an image. This information is then used to prepopulate SEO metadata for search engines and social media sharing. More advanced metadata control, such as whether the page should be crawlable by search engine bots, can be found in the page's Metatags tab.

Segmentation

Tag the page with taxonomy in order to build out a visitor's personalizatoin profile. Before adding any segmentation, be sure you understand Acro Commerce's Personalization Policy.

Components and modals

• Components
  Components are used to build the actual content of the page, starting with a Section. More information on Sections and other component can be found below.
• Modals
  The page modals area is where you can build pop-up dialogs (modals) to the page. More information about Modals can be found below.

The Basic content component gives content creators a simple WYSIWYG editor for adding content. This editor is fully featured and includes a number of text formats and styles, image uploader, links, lists, icons, tables, etc. This content here has been added via the basic content component.

Typography - Standard styles

The paragraph format dropdown lets you turn any text from a plain paragraph into an HTML heading element. Heading examples are shown below.

Heading 1 (h1)

Heading 2 (h2)

Heading 3 (h3)

Heading 4 (h4)

Heading 5 (h5)

Heading 6 (h6)

Additional elements (default styles)

Basic link style

Block quote: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a metus a magna elementum hendrerit in vitae neque. Proin gravida finibus ipsum, interdum egestas metus hendrerit at. Suspendisse potenti. Morbi nec sem ipsum. Phasellus cursus egestas nulla et ullamcorper.

• Bullet list
• Bullet list
• Bullet list

1. Number list
2. Number list
3. Number list

List - 2 columns

• Unordered List Item One
• Unordered List Item Two
• Unordered List Item Three
• Unordered List Item Four
• Unordered List Item Five

List - 3 columns

• Unordered List Item One
• Unordered List Item Two
• Unordered List Item Three
• Unordered List Item Four
• Unordered List Item Five

Table heading	Table heading
Tabel cell	Table cell
Table cell	Table cell

Below is an example of a horizontal rule (hr) element.

---

Typography - Custom styles

In addition to the standard HTML headings, lists, and other elements shown above, we've also included some custom styling classes for these elements that can be accessed via the editor's Styles dropdown. To use these styles; add your content, place your cursor within the content, and choose the style you would like from within the dropdown. In addition, all styles can utilize a noGutterBottom class to remove their bottom margin. Below is an example of the available styles.

Small H1

Overline

Subtitle1

Subtitle2

Lead

Body1 (default paragraph)

Body2

Small

Caption

Hero

Monster

MonsterJr

• Chevron list
• Chevron list
• Chevron list

• Checkmark list
• Checkmark list
• Checkmark list

Utilities

The following class names can be used to hide elements at specific breakpoints.

.hidden-xs	.hidden-sm	.hidden-md	.hidden-lg	.hidden-lx
Visible	Visible	Visible	Visible	Visible

The Image component provides an alternative to adding images through the WYSIWYG editor.

This component is unique in that it allows content creators to link images, including to modal popups, within the component settings. This is something that isn't yet possible through the WYSIWYG editor.

However, in most cases adding images through the WYSIWYG editor may be more benificial. For example, if you're trying to mix text with an image and want the text to wrap around the image you will need to add your image through the WYSIWYG editor, not the Image component. The Image component is for standalone images only.

Image (aligned left)

Image (linked and aligned center)

Image (SVG, opens a modal, and aligned right)

The Divider and Spacer components are used to help separate content within a section.

Divider

Dividers provide a visual separation via a horizontal line or shadow. An example of each is shown below.

Spacer

Spacers provide an invisible separation where you define an arbitrary amount of space that the spacer component takes up in order to push any content below it down. Spacers also have the ability to be hidden from either desktop or mobile displays.

An example of a spacer is shown below. You can see that it's pushing the next piece of content down.

The Button component is used to create call-to-action type links. Buttons can be horizontally positioned left, center, or right, can be styled in a variety of different ways, and can optionally include an icon either to the left or the right of the button text. Buttons can also be used to open a pop-up modal.

Variant options

Color options

Size options

Icon options

Linking options

Modals can be added to a page to provide a pop-up dialog that can be opened from some components. Buttons and Cards are typically the components used for this. When creating a modal, you first assign it an id (i.e. contact-form). Then, when adding a component that supports modals, such as a button or card, you simply use the id as the link (i.e. #contact-form) and check the Link opens modal checkbox. This ties the two components together.

Adding content to a modal is done in a similar way to building a page. You can choose from many of the same components to add text, forms, video, etc. into the modal. Modals can also be created in a variety of different sizes. Examples are shown below.

The Section component and its various background and layout options can be used to create a variety of different looking banners. Inside the banner, a Basic content component or many others can be used to add the banner content.

Similar to the banner examples above, basic straps can also be created by combining the Section component with various content-creating components. Additionally, some components are available for specific types of straps (Strap and Logo Strap). Examples of different straps using all of these options are shown below.

Carousels

Similar to the banner and strap examples above, carousels can be created by combining the Section component with the Carousel component. The carousel component provides a slide-based way of displaying content where one slide is shown at a time and additional slides can be looped through using either arrow or dot navigation. The carousel and its slides each have options such as transition effect, auto play, auto resize, etc. A few examples are shown below.

The Tabs component is used to build tab based content in a horizontal or vertical format. Both formats can optionally use a fixed height, meaning that the content inside the tab can't expand past a certain value. Instead, a scrollbar is placed inside of the tab when needed. Examples of each format are shown below.

The Accordion component is used to build content such as FAQs and other click-to-reveal lists. An example is shown below.

Stacked cards

When cards are displayed in a column, the Stacked Cards option can be enabled to make the cards 100% wide and stacked.

The cards to the right show an example of this.

The Icon tiles component is similar to a card but has been stripped down and streamlined. Where cards work best in groups of 4 or less, Icon tiles work with up to 8 tiles. An Icon tile is made up of an icon, text, and optional link.

The Embed code and HubSpot form components lets you add in a code snippet provided by another site or embed a HubSpot form directly into the page. This is mainly used for embedding things like forms, YouTube videos, Google maps, etc.

Reveal Tiles

Image on the front > copy on the back