Layouts

FormBlocks

Input fields for creating web forms.

Icon

Fieldset

Divide your forms into different sections, each with its own header.

Icon

Inline Fields

A wrapper for displaying multiple form fields in a single row.

MailBlocks

Elements for creating HTML email templates.

Icon

Single Column (Email)

A single column, with a defined max width.

Icon

Content + Sidebar (Email)

Combination of a main content area and a sidebar on the right.

Icon

2 Columns (Email)

Two fifty-fifty columns.

Icon

3 Columns (Email)

Three equally divided columns.

Icon

4 Columns (Email)

Four equally wide columns.

Basic

Icon

Single Column

A single column, with a defined max width.

Icon

Content + Sidebar

Combination of a main content area and a sidebar on the right.

Icon

4 Columns

Four equally wide columns.

Icon

3 Columns

Three equally divided columns.

Icon

2 Columns

Two fifty-fifty columns.

Nested

Icon

Single Column (Nested)

A nested single column, with a defined max width.

Icon

Content + Sidebar (Nested)

Nested combination of a main content area (65%) and a sidebar on the right (35%).

Icon

4 Columns (Nested)

Four equally wide nested columns.

Icon

3 Columns (Nested)

Three equally divided nested columns.

Icon

2 Columns (Nested)

Two nested fifty-fifty columns.

Icon

Segment

A wrapper for displaying content inside a Semantic UI segment.

Icon

Card Blanche

An empty wrapper for card elements that prefer to be at root level, like images and buttons.

Icon

Card Content

An wrapper for card content, like text and quotes.

Icon

Card Content (2 Columns)

An wrapper for card content, with a right floated column.

Utility

Icon

Backyard

A customized section for showcasing Romanesco patterns in the front-end library.

Icon

Pattern

A customized section for displaying Romanesco patterns in the front-end library.

Icon

Call To Action

This layout is a wrapper to help you create a small, reusable CTA pattern with ContentBlocks. CTAs can be referenced throughout your project with CB or with TVs.

Icon

Background

A wrapper for the Global Background field. This layout enables you to preview the background in the browser.

Icon

Slider

This layout creates a slider with child elements. Can also process Overview items as slides.

Icon

Overview (2 Columns)

Displays child pages just like the regular Overview blocks, but in full-width layout sections.