Elements Overview

CF2 provides a variety of elements for building page content. Each element has specific properties and styling capabilities.

Element Types

Text Elements

Headline, SubHeadline, and Paragraph for text content.

Button

Buttons with 8+ action types, icons, and styling options.

Image

Images with aspect ratio, corners, shadows, and links.

Video

Video embeds for YouTube and other platforms.

Video Popup

Clickable thumbnail that opens video in a modal.

Form Inputs

Input fields for email, name, phone, and more.

More Form Fields

TextArea, SelectBox, and Checkbox elements.

BulletList

Bullet lists with icon support.

Divider

Horizontal separator lines.

Icon

Font Awesome icons with sizing and colors.

Countdown

Timer with date targeting and expiry actions.

Progress Bar

Visual progress indicator with customizable fill.

Checkout

E-commerce checkout, order summary, and confirmation.

Feature Support Matrix

Not all elements support all styling features:

Element Background Border Shadow Corners
Headline/V1 No No No No
SubHeadline/V1 No No No No
Paragraph/V1 No No No No
Button/V1 Yes Yes No Yes
Image/V2 No Yes Yes Yes
Input/V1 Yes Yes Yes Yes
Video/V1 Yes Yes Yes Yes
BulletList/V1 Yes No No No
Divider/V1 No Yes Yes No
Icon/V1 No No No No
VideoPopup/V1 No Yes Yes Yes
Countdown/V1 Yes Yes No Yes
ProgressBar/V1 Yes Yes No Yes
TextArea/V1 Yes Yes Yes Yes
SelectBox/V1 Yes Yes Yes Yes
Checkbox/V1 Yes Yes No Yes
Checkout/V2 Yes Yes No Yes
i
Tip: To add background, border, or shadow to text elements, wrap them in a FlexContainer.

Common Properties

Every element shares these base properties:

JSON 
{
  "type": "ElementType/V1",
  "id": "6Z-xxxxx-0",
  "version": 0,
  "parentId": "parent-container-id",
  "fractionalIndex": "a0",
  "attrs": {},
  "params": {},
  "selectors": {},
  "children": []
}

Styleguide References

Elements can reference styleguide styles using data-style-guide-* attributes:

Element Attribute Values
Headline data-style-guide-headline xl, l, m, s
SubHeadline data-style-guide-subheadline xl, l, m, s
Paragraph data-style-guide-content xl, l, m, s
Button data-style-guide-button style1, style2, style3