Horizontal segments containing the fields

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

[[modifiedIf?
    &subject=`[[+layout_title]]`
    &operator=`notempty`
    &then=`id="fb[[*id]]-[[stripAsAlias? &input=`[[+layout_title]]`]]"`
    &toPlaceholder=`fieldset_id_[[+unique_idx]]`
]]
[[modifiedIf?
    &subject=`[[+segment_type]]`
    &operator=`isnot`
    &operand=`none`
    &then=`segment`
    &else=`[[*fb_form_layout:isnot=`inline`:then=`fieldset`]]`
    &toPlaceholder=`segment_parent`
]]
[[+force_segment:eq=`1`:then=`segment`:else=`[[+segment_parent]]`:toPlaceholder=`segment`]]

<fieldset [[+fieldset_id_[[+unique_idx]]]] class="ui [[+padding]] [[+segment]] [[+background:setBackground]]">
    [[+legend:notempty=`<legend class="ui [[+form_size]] header">[[+legend]]</legend>`]]
    [[*fb_form_layout:is=`inline`:then=`<span class="equal width fields">`]]
    [[+main]]
    [[*fb_form_layout:is=`inline`:then=`</span>`]]
</fieldset>

0

reference	legend
title	Heading
fieldtype	textfield

1

reference	background
title	Background
fieldtype	select
default_value	transparent
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

2

reference	force_segment
title	Always as segment
fieldtype	radio
fieldoptions	No=0 Yes=1

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

[[modifiedIf?
    &subject=`[[+layout_title]]`
    &operator=`notempty`
    &then=`id="fb[[*id]]-[[stripAsAlias? &input=`[[+layout_title]]`]]"`
    &toPlaceholder=`fieldset_id_[[+unique_idx]]`
]]
[[modifiedIf?
    &subject=`[[+main]]`
    &operator=`contains`
    &operand=`required`
    &then=`required`
    &toPlaceholder=`required_[[+unique_idx]]`
]]

<div [[+fieldset_id_[[+unique_idx]]]] class="unstackable inline fields [[+required_[[+unique_idx]]]]">
    [[+label:notempty=`<label>[[+label]]</label>`]]
    [[+main]]
</div>

0

reference	label
title	Label
fieldtype	textfield

A single column, with a defined max width.

@CHUNK mbSectionSingleColumn

0

reference	background
title	Background
fieldtype	select
default_value	default
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

1

reference	container_type
title	Width
fieldtype	select
fieldoptions	Full width (fluid)=fluid Standard width= Slightly narrower=tightened Improved readability (normal text)=conventional text Optimal readability (large text)=text

2

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

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

@CHUNK mbSectionContentSidebar

0

reference	background
title	Background
fieldtype	select
default_value	default
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

1

reference	container_type
title	Width
fieldtype	select
fieldoptions	Full width (fluid)=fluid Standard width= Slightly narrower=tightened Improved readability (normal text)=conventional text Optimal readability (large text)=text

2

reference	sidebar_width
title	Sidebar width
fieldtype	select
default_value	six
fieldoptions	1 column=one 2 columns=two 3 columns=three 4 columns=four 5 columns=five 6 columns=six 7 columns=seven 8 columns=eight Adjust to content width=compact

3

reference	padding
title	Extra padding
fieldtype	select
default_value	relaxed
fieldoptions	None=regular A little=relaxed A lot=very relaxed

4

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

5

reference	divider
title	Divider
fieldtype	select
fieldoptions	None= Vertical divider between columns=divided Borders around each column (celled)=celled Borders inside the columns only=internally celled

6

reference	responsive
title	Responsive options
fieldtype	checkbox
default_value	stackable,doubling
fieldoptions	Stack columns on top of each other on mobile=stackable Start stacking on tablet breakpoint already=on tablet Center content when stacked=center when stacked Reverse column order on mobile=mobile reversed Double number of columns on each breakpoint=doubling Do nothing (check if no other option was set!)=static

Combination of a left sidebar and a main content area.

@CHUNK mbSectionSidebarContent

0

reference	background
title	Background
fieldtype	select
default_value	default
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

1

reference	container_type
title	Width
fieldtype	select
fieldoptions	Full width (fluid)=fluid Standard width= Slightly narrower=tightened Improved readability (normal text)=conventional text Optimal readability (large text)=text

2

reference	sidebar_width
title	Sidebar width
fieldtype	select
default_value	six
fieldoptions	1 column=one 2 columns=two 3 columns=three 4 columns=four 5 columns=five 6 columns=six 7 columns=seven 8 columns=eight Adjust to content width=compact

3

reference	padding
title	Extra padding
fieldtype	select
default_value	relaxed
fieldoptions	None=regular A little=relaxed A lot=very relaxed

4

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

5

reference	divider
title	Divider
fieldtype	select
fieldoptions	None= Vertical divider between columns=divided Borders around each column (celled)=celled Borders inside the columns only=internally celled

6

reference	responsive
title	Responsive options
fieldtype	checkbox
default_value	stackable,doubling
fieldoptions	Stack columns on top of each other on mobile=stackable Start stacking on tablet breakpoint already=on tablet Center content when stacked=center when stacked Reverse column order on mobile=mobile reversed Double number of columns on each breakpoint=doubling Do nothing (check if no other option was set!)=static

Two fifty-fifty columns.

@CHUNK mbSectionTwoColumns

0

reference	background
title	Background
fieldtype	select
default_value	default
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

1

reference	container_type
title	Width
fieldtype	select
fieldoptions	Full width (fluid)=fluid Standard width= Slightly narrower=tightened Improved readability (normal text)=conventional text Optimal readability (large text)=text

2

reference	padding
title	Extra padding
fieldtype	select
default_value	relaxed
fieldoptions	None=regular A little=relaxed A lot=very relaxed

3

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

4

reference	divider
title	Divider
fieldtype	select
fieldoptions	None= Vertical divider between columns=divided Borders around each column (celled)=celled Borders inside the columns only=internally celled

5

reference	responsive
title	Responsive options
fieldtype	checkbox
default_value	stackable,doubling
fieldoptions	Stack columns on top of each other on mobile=stackable Start stacking on tablet breakpoint already=on tablet Center content when stacked=center when stacked Reverse column order on mobile=mobile reversed Double number of columns on each breakpoint=doubling Do nothing (check if no other option was set!)=static

Three equally divided columns.

@CHUNK mbSectionThreeColumns

0

reference	background
title	Background
fieldtype	select
default_value	default
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

1

reference	container_type
title	Width
fieldtype	select
fieldoptions	Full width (fluid)=fluid Standard width= Slightly narrower=tightened Improved readability (normal text)=conventional text Optimal readability (large text)=text

2

reference	padding
title	Extra padding
fieldtype	select
default_value	relaxed
fieldoptions	None=regular A little=relaxed A lot=very relaxed

3

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

4

reference	divider
title	Divider
fieldtype	select
fieldoptions	None= Vertical divider between columns=divided Borders around each column (celled)=celled Borders inside the columns only=internally celled

5

reference	responsive
title	Responsive options
fieldtype	checkbox
default_value	stackable,doubling
fieldoptions	Stack columns on top of each other on mobile=stackable Start stacking on tablet breakpoint already=on tablet Center content when stacked=center when stacked Reverse column order on mobile=mobile reversed Double number of columns on each breakpoint=doubling Do nothing (check if no other option was set!)=static

Four equally wide columns.

@CHUNK mbSectionFourColumns

0

reference	background
title	Background
fieldtype	select
default_value	default
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

1

reference	container_type
title	Width
fieldtype	select
fieldoptions	Full width (fluid)=fluid Standard width= Slightly narrower=tightened Improved readability (normal text)=conventional text Optimal readability (large text)=text

2

reference	padding
title	Extra padding
fieldtype	select
default_value	relaxed
fieldoptions	None=regular A little=relaxed A lot=very relaxed

3

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

4

reference	divider
title	Divider
fieldtype	select
fieldoptions	None= Vertical divider between columns=divided Borders around each column (celled)=celled Borders inside the columns only=internally celled

5

reference	responsive
title	Responsive options
fieldtype	checkbox
default_value	stackable,doubling
fieldoptions	Stack columns on top of each other on mobile=stackable Start stacking on tablet breakpoint already=on tablet Center content when stacked=center when stacked Reverse column order on mobile=mobile reversed Double number of columns on each breakpoint=doubling Do nothing (check if no other option was set!)=static

A single column, with a defined max width.

<div [[stripAsAlias:prepend=`id="`:append=`"`? &input=`[[+title]]`]] class="ui vertical stripe segment [[setBackground? &background=`[[+background]]`]]">
    <div class="ui [[+container_type]] [[+alignment]] [[+title_inflate]] main container">
        [[+main]]
    </div>
</div>

0

reference	background
title	Background
fieldtype	select
default_value	default
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

1

reference	container_type
title	Width
fieldtype	select
fieldoptions	Full width (fluid)=fluid Standard width= Slightly narrower=tightened Improved readability (normal text)=conventional text Optimal readability (large text)=text

2

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

3

reference	title_inflate
title	Inflate main title
description	Make the first H1, H2 or H3 in the content area bigger.
fieldtype	select
fieldoptions	Yes= No=conventional
type_ahead	No
template

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

<div [[stripAsAlias:prepend=`id="`:append=`"`? &input=`[[+title]]`]] class="ui vertical stripe segment [[setBackground? &background=`[[+background]]`]]">
    <div class="ui [[+container_type]] container">
        <div class="ui [[+responsive:replace=`,== `]] [[+padding]] [[+alignment]] [[+divider]] equal width grid">
            <div class="row">
                <div class="[[+title_inflate]] main column">[[+main]]</div>
                <div class="[[+sidebar_width]] wide sidebar column">[[+sidebar]]</div>
            </div>
        </div>
    </div>
</div>

0

reference	background
title	Background
fieldtype	select
default_value	default
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

1

reference	container_type
title	Width
fieldtype	select
fieldoptions	Full width (fluid)=fluid Standard width= Slightly narrower=tightened Improved readability (normal text)=conventional text Optimal readability (large text)=text

2

reference	sidebar_width
title	Sidebar width
fieldtype	select
default_value	six
fieldoptions	1 column=one 2 columns=two 3 columns=three 4 columns=four 5 columns=five 6 columns=six 7 columns=seven 8 columns=eight Adjust to content width=compact

3

reference	padding
title	Extra padding
fieldtype	select
default_value	relaxed
fieldoptions	None=regular A little=relaxed A lot=very relaxed

4

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

5

reference	divider
title	Divider
fieldtype	select
fieldoptions	None= Vertical divider between columns=divided Borders around each column (celled)=celled Borders inside the columns only=internally celled

6

reference	title_inflate
title	Inflate main title
fieldtype	select
fieldoptions	Yes= No=conventional
type_ahead	No
template

7

reference	responsive
title	Responsive options
fieldtype	checkbox
default_value	stackable,doubling
fieldoptions	Stack columns on top of each other on mobile=stackable Start stacking on tablet breakpoint already=on tablet Center content when stacked=center when stacked Reverse column order on mobile=mobile reversed Double number of columns on each breakpoint=doubling Do nothing (check if no other option was set!)=static
description	Reverse column order doesn't work with multiple nested layouts.
type_ahead	No

Combination of a left sidebar and a main content area.

<div [[stripAsAlias:prepend=`id="`:append=`"`? &input=`[[+title]]`]] class="ui vertical stripe segment [[setBackground? &background=`[[+background]]`]]">
    <div class="ui [[+container_type]] container">
        <div class="ui [[+responsive:replace=`,== `]] [[+padding]] [[+alignment]] [[+divider]] equal width grid">
            <div class="row">
                <div class="[[+sidebar_width]] wide sidebar column">[[+sidebar]]</div>
                <div class="[[+title_inflate]] main column">[[+main]]</div>
            </div>
        </div>
    </div>
</div>

0

reference	background
title	Background
fieldtype	select
default_value	default
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

1

reference	container_type
title	Width
fieldtype	select
fieldoptions	Full width (fluid)=fluid Standard width= Slightly narrower=tightened Improved readability (normal text)=conventional text Optimal readability (large text)=text

2

reference	sidebar_width
title	Sidebar width
fieldtype	select
default_value	six
fieldoptions	1 column=one 2 columns=two 3 columns=three 4 columns=four 5 columns=five 6 columns=six 7 columns=seven 8 columns=eight Adjust to content width=compact

3

reference	padding
title	Extra padding
fieldtype	select
default_value	relaxed
fieldoptions	None=regular A little=relaxed A lot=very relaxed

4

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

5

reference	divider
title	Divider
fieldtype	select
fieldoptions	None= Vertical divider between columns=divided Borders around each column (celled)=celled Borders inside the columns only=internally celled

6

reference	title_inflate
title	Inflate main title
fieldtype	select
fieldoptions	Yes= No=conventional
type_ahead	No
template

7

reference	responsive
title	Responsive options
fieldtype	checkbox
default_value	stackable,doubling
fieldoptions	Stack columns on top of each other on mobile=stackable Start stacking on tablet breakpoint already=on tablet Center content when stacked=center when stacked Reverse column order on mobile=mobile reversed Double number of columns on each breakpoint=doubling Do nothing (check if no other option was set!)=static
description	Reverse column order doesn't work with multiple nested layouts.
type_ahead	No

Four equally wide columns.

<div [[stripAsAlias:prepend=`id="`:append=`"`? &input=`[[+title]]`]] class="ui vertical stripe segment [[setBackground? &background=`[[+background]]`]]">
    <div class="ui [[+container_type]] container">
        <div class="ui four column [[+responsive:replace=`,== `]] [[+padding]] [[+alignment]] [[+divider]] grid">
            <div class="row">
                <div class="column">[[+col_1]]</div>
                <div class="column">[[+col_2]]</div>
                <div class="column">[[+col_3]]</div>
                <div class="column">[[+col_4]]</div>
            </div>
        </div>
    </div>
</div>

0

reference	background
title	Background
fieldtype	select
default_value	default
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

1

reference	container_type
title	Width
fieldtype	select
fieldoptions	Full width (fluid)=fluid Standard width= Slightly narrower=tightened Improved readability (normal text)=conventional text Optimal readability (large text)=text

2

reference	padding
title	Extra padding
fieldtype	select
default_value	relaxed
fieldoptions	None=regular A little=relaxed A lot=very relaxed

3

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

4

reference	divider
title	Divider
fieldtype	select
fieldoptions	None= Vertical divider between columns=divided Borders around each column (celled)=celled Borders inside the columns only=internally celled

5

reference	responsive
title	Responsive options
fieldtype	checkbox
default_value	stackable,doubling
fieldoptions	Stack columns on top of each other on mobile=stackable Start stacking on tablet breakpoint already=on tablet Center content when stacked=center when stacked Reverse column order on mobile=mobile reversed Double number of columns on each breakpoint=doubling Do nothing (check if no other option was set!)=static

Three equally divided columns.

<div [[stripAsAlias:prepend=`id="`:append=`"`? &input=`[[+title]]`]] class="ui vertical stripe segment [[setBackground? &background=`[[+background]]`]]">
    <div class="ui [[+container_type]] container">
        <div class="ui three column [[+responsive:replace=`,== `]] [[+padding]] [[+alignment]] [[+divider]] grid">
            <div class="row">
                <div class="column">[[+col_1]]</div>
                <div class="column">[[+col_2]]</div>
                <div class="column">[[+col_3]]</div>
            </div>
        </div>
    </div>
</div>

0

reference	background
title	Background
fieldtype	select
default_value	default
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

1

reference	container_type
title	Width
fieldtype	select
fieldoptions	Full width (fluid)=fluid Standard width= Slightly narrower=tightened Improved readability (normal text)=conventional text Optimal readability (large text)=text

2

reference	padding
title	Extra padding
fieldtype	select
default_value	relaxed
fieldoptions	None=regular A little=relaxed A lot=very relaxed

3

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

4

reference	divider
title	Divider
fieldtype	select
fieldoptions	None= Vertical divider between columns=divided Borders around each column (celled)=celled Borders inside the columns only=internally celled

5

reference	responsive
title	Responsive options
fieldtype	checkbox
default_value	stackable,doubling
fieldoptions	Stack columns on top of each other on mobile=stackable Start stacking on tablet breakpoint already=on tablet Center content when stacked=center when stacked Reverse column order on mobile=mobile reversed Double number of columns on each breakpoint=doubling Do nothing (check if no other option was set!)=static

Two fifty-fifty columns.

<div [[stripAsAlias:prepend=`id="`:append=`"`? &input=`[[+title]]`]] class="ui vertical stripe segment [[setBackground? &background=`[[+background]]`]]">
    <div class="ui [[+container_type]] container">
        <div class="ui two column [[+responsive:replace=`,== `]] [[+padding]] [[+alignment]] [[+divider]] grid">
            <div class="row">
                <div class="column">[[+col_1]]</div>
                <div class="column">[[+col_2]]</div>
            </div>
        </div>
    </div>
</div>

0

reference	background
title	Background
fieldtype	select
default_value	default
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

1

reference	container_type
title	Width
fieldtype	select
fieldoptions	Full width (fluid)=fluid Standard width= Slightly narrower=tightened Improved readability (normal text)=conventional text Optimal readability (large text)=text

2

reference	padding
title	Extra padding
fieldtype	select
default_value	relaxed
fieldoptions	None=regular A little=relaxed A lot=very relaxed

3

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

4

reference	divider
title	Divider
fieldtype	select
fieldoptions	None= Vertical divider between columns=divided Borders around each column (celled)=celled Borders inside the columns only=internally celled

5

reference	responsive
title	Responsive options
fieldtype	checkbox
default_value	stackable,doubling
fieldoptions	Stack columns on top of each other on mobile=stackable Start stacking on tablet breakpoint already=on tablet Center content when stacked=center when stacked Reverse column order on mobile=mobile reversed Double number of columns on each breakpoint=doubling Do nothing (check if no other option was set!)=static

A nested single column, with a defined max width.

<div class="[[+alignment]] row">
    <div class="column">[[+main]]</div>
</div>

0

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

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

<div class="[[+alignment]] row">
    <div class="column">[[+main]]</div>
    <div class="[[+sidebar_width]] wide column">[[+sidebar]]</div>
</div>

0

reference	sidebar_width
title	Sidebar width
fieldtype	select
default_value	six
fieldoptions	1 column=one 2 columns=two 3 columns=three 4 columns=four 5 columns=five 6 columns=six 7 columns=seven 8 columns=eight Adjust to content width=compact

1

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

Nested combination of a left sidebar (35%) and a main content area (65%).

<div class="[[+alignment]] row">
    <div class="[[+sidebar_width]] wide column">[[+sidebar]]</div>
    <div class="column">[[+main]]</div>
</div>

0

reference	sidebar_width
title	Sidebar width
fieldtype	select
default_value	six
fieldoptions	1 column=one 2 columns=two 3 columns=three 4 columns=four 5 columns=five 6 columns=six 7 columns=seven 8 columns=eight Adjust to content width=compact

1

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

Four equally wide nested columns.

<div class="[[+alignment]] row">
    <div class="column">[[+col_1]]</div>
    <div class="column">[[+col_2]]</div>
    <div class="column">[[+col_3]]</div>
    <div class="column">[[+col_4]]</div>
</div>

0

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

Three equally divided nested columns.

<div class="[[+alignment]] row">
    <div class="column">[[+col_1]]</div>
    <div class="column">[[+col_2]]</div>
    <div class="column">[[+col_3]]</div>
</div>

0

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

Two nested fifty-fifty columns.

<div class="[[+alignment]] row">
    <div class="column">[[+col_1]]</div>
    <div class="column">[[+col_2]]</div>
</div>

0

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

A wrapper for displaying content inside a Semantic UI segment.

@CHUNK cbLayoutSegment

0

reference	segment_type
title	Segment type
fieldtype	select
default_value	regular
fieldoptions	No segment (disables all settings below)= Basic segment (borderless, but with padding)=basic Regular segment (with border and padding)=regular Raised segment (slightly more emphasised)=raised Vertical segment (create a vertical group)=vertical

1

reference	background
title	Background
fieldtype	select
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

2

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

3

reference	padding
title	Extra padding
fieldtype	select
fieldoptions	None=regular A little=padded A lot=very padded

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

[[+main]]

An wrapper for card content, like text and quotes.

@CHUNK cbLayoutCard

0

reference	content_type
title	Content type
fieldtype	radio
default_value	description
fieldoptions	Text=description Metadata=meta Extra=extra Other=orther

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

@CHUNK cbLayoutCard

0

reference	content_type
title	Content type
fieldtype	radio
default_value	description
fieldoptions	Text=description Metadata=meta Extra=extra Other=orther

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

[[+main]]

<div class="ui vertical backyard segment secondary">
    <div class="ui container">
        <div class="ui accordion">
            <div class="title">
                <button class="ui small primary circular icon button" tabindex="[[+idx]]">
                    <i class="plus icon"></i>
                </button>
            </div>
            <div class="content">
                <div class="ui stackable relaxed equal width grid">
                    <section class="column">
                        <h2>[[+layout_title]]</h2>
                        [[+info]]
                    </section>
                    <aside class="[[+sidebar_width]] wide column">
                        <div class="ui nested middle aligned equal width toolbar grid">
                            <div class="nine wide column">
                                <a href="[[++site_url]]manager/?a=resource/update&id=[[*id]]" class="ui tiny basic button">
                                    Edit in MODX
                                </a>
                            </div>
                            <div class="right aligned column">
                                <i class="disabled heart outline link icon with popup"
                                   data-content="[[%romanesco.patterns.comment_tooltip]]"
                                   data-position="top center"></i>
                                <i class="disabled comment outline link icon with popup"
                                   data-content="[[%romanesco.patterns.comment_tooltip]]"
                                   data-position="top center"></i>
                            </div>
                        </div>

                        <div class="ui divider"></div>

                        <h5 class="ui disabled header">ContentBlocks used</h5>

                        <div class="ui list">
                            [[+meta]]
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </div>
</div>

0

reference	sidebar_width
title	Metadata width
fieldtype	select
default_value	four
fieldoptions	1 column=one 2 columns=two 3 columns=three 4 columns=four 5 columns=five 6 columns=six 7 columns=seven 8 columns=eight Adjust to content width=compact

1

reference	layout_title
title	Layout title
fieldtype	textfield

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

<div class="ui vertical stripe pattern segment [[+background:setBackground]]">
    <div class="ui [[+container_type]] [[+alignment]] container">
        [[[[If?
            &subject=`[[+pattern_template]]`
            &operator=`EQ`
            &operand=`patternLayoutBosonField`
            &then=`setPatternPlaceholders? &cbField=`[[+pattern_name]]` &prefix=`cf_[[+idx]]_[[+unique_idx]]``
        ]]]]
        [[[[If?
            &subject=`[[+pattern_template]]`
            &operator=`EQ`
            &operand=`patternLayoutBosonLayout`
            &then=`setPatternPlaceholders? &cbLayout=`[[+pattern_name]]` &prefix=`cl_[[+idx]]_[[+unique_idx]]``
        ]]]]

        [[!$cbLayoutPatternPreview:toPlaceholder=`preview_[[+idx]]_[[+unique_idx]]`?
            &preview=`[[+preview]]`
            &code=`[[+code]]`
            &sidebar_width=`[[+sidebar_width]]`
            &pattern_name=`[[+pattern_name]]`
            &pattern_template=`[[+pattern_template]]`
            &raw_tags=`[[+raw_tags]]`
            &rendered_tags=`[[+rendered_tags]]`
            &idx=`[[+idx]]`
            &unique_idx=`[[+unique_idx]]`
        ]]
        
        [[[[modifiedIf?
            &subject=`[[+pattern_template]]`
            &operator=`contains`
            &operand=`Electron`
            &then=`
                $toolbarPatternElectron?
                    &pattern_name=`[[+pattern_name]]`
                    &pattern_status=`[[+pattern_status]]`
                `
            &else=`
                $toolbarPattern?
                    &pattern_name=`[[+pattern_name]]`
                    &pattern_template=`[[+pattern_template]]`
                    &pattern_status=`[[+pattern_status]]`
                    &idx=`[[+idx]]`
                    &unique_idx=`[[+unique_idx]]`
                `
        ]]]]

        [[[[modifiedIf?
            &subject=`[[+pattern_template]]`
            &operator=`containsnot`
            &operand=`Electron`
            &then=`+preview_[[+idx]]_[[+unique_idx]]`
        ]]]]

        [[+info]]
    </div>
</div>

0

reference	background
title	Background
fieldtype	select
default_value	white
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

1

reference	container_type
title	Width
fieldtype	select
fieldoptions	Full width (fluid)=fluid Standard width= Slightly narrower=tightened Improved readability (normal text)=conventional text Optimal readability (large text)=text

2

reference	sidebar_width
title	Preview width
fieldtype	select
default_value	five
fieldoptions	1 column=one 2 columns=two 3 columns=three 4 columns=four 5 columns=five 6 columns=six 7 columns=seven 8 columns=eight Adjust to content width=compact Full width=sixteen

3

reference	alignment
title	Content alignment
fieldtype	select
fieldoptions	Left=left aligned Center=center aligned Right=right aligned Justified=justified Middle=middle aligned Bottom=bottom aligned Left and middle=left aligned middle aligned Center and middle=center aligned middle aligned Right and middle=right aligned middle aligned

4

reference	pattern_name
title	Pattern name
fieldtype	textfield

5

reference	pattern_template
title	Pattern template
fieldtype	select
default_value	patternLayoutAtom
fieldoptions	Electron (TV)=patternLayoutElectronTV Electron (System Setting)=patternLayoutElectronSystemSetting Electron (Configuration)=patternLayoutElectronConfiguration Atom=patternLayoutAtom Molecule=patternLayoutMolecule Organism=patternLayoutOrganism Template=patternLayoutTemplate Formula=patternLayoutFormula Computation=patternLayoutComputation Boson (Field)=patternLayoutBosonField Boson (Layout)=patternLayoutBosonLayout Boson (Template)=patternLayoutBosonTemplate

6

reference	pattern_status
title	Pattern status
fieldtype	select
default_value	green
fieldoptions	romanesco.patterns.status_green=green romanesco.patterns.status_yellow=yellow romanesco.patterns.status_orange=orange romanesco.patterns.status_red=red romanesco.patterns.status_pink=pink romanesco.patterns.status_purple=purple romanesco.patterns.status_blue=blue romanesco.patterns.status_brown=brown

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.

[[If?
    &subject=`[[+cta_link]]`
    &operator=`notempty`
    &then=`
    <a class="item" href="[[[[If? &subject=`[[+cta_link]]` &operator=`notempty` &then=`~[[+cta_link]]`]]]]">
        <div class="content">
            [[+main]]
        </div>
    </a>
    `
    &else=`[[+main]]`
]]

0

reference	cta_link
title	Link (optional)
fieldtype	link

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

@CHUNK cbLayoutBackground

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

<div id="swiper-[[+unique_idx]]" class="swiper[[+mobile_only:eq=`1`:then=`-mobile`]] [[+inverted:eq=`1`:then=`inverted`]] [[+fullscreen:eq=`1`:then=`fullscreen`]]">
    [[If?
        &subject=`[[+slider_type]]`
        &operator=`inarray`
        &operand=`overview,gallery,cards`
        &then=`[[+main]]`
        &else=`<div class="swiper-wrapper[[+mobile_only:eq=`1`:then=`-mobile`]]">[[+main]]</div>`
    ]]

    [[+behaviour:containsnot=`navOutside`:then=`
        [[+pagination:isnot=`none`:then=`
        <div class="swiper-pagination swiper-[[+unique_idx]]"></div>
        `]]
        [[+behaviour:contains=`arrows`:then=`
        <button class="swiper-button-next swiper-[[+unique_idx]]"></button>
        <button class="swiper-button-prev swiper-[[+unique_idx]]"></button>
        `]]
    `]]

</div>

[[+behaviour:contains=`navOutside`:then=`
    [[+pagination:isnot=`none`:then=`
    <div class="swiper-pagination swiper-[[+unique_idx]] outside"></div>
    `]]
    [[+behaviour:contains=`arrows`:then=`
    <button class="swiper-button-next swiper-[[+unique_idx]] outside"></button>
    <button class="swiper-button-prev swiper-[[+unique_idx]] outside"></button>
    `]]
`]]

[[sliderLoadAssets?
    &uid=`[[+unique_idx]]`
    &columns=`[[textToNumber? &input=`[[+cols]]`]]`
    &slidesToScroll=`[[+slides_to_scroll]]`
    &direction=`[[+direction]]`
    &spacing=`[[+spacing]]`
    &behaviour=`[[+behaviour]]`
    &transition=`[[+transition]]`
    &lazyload=`[[+lazyload]]`
    &pagination=`[[+pagination]]`
    &responsive=`[[+responsive]]`
    &mobileOnly=`[[+mobile_only]]`
]]

0

reference	slider_type
title	Element to slide
fieldtype	select
default_value	regular
fieldoptions	First level of nested elements=regular Overview items=overview Gallery images=gallery Cards=cards

1

reference	cols
title	Column count
fieldtype	select
default_value	one
fieldoptions	1 column=one 2 columns=two 3 columns=three 4 columns=four 5 columns=five 6 columns=six 7 columns=seven 8 columns=eight Adjust to content width=compact

2

reference	slides_to_scroll
title	Slides to scroll
fieldtype	textfield
default_value	1

3

reference	direction
title	Slide direction
fieldtype	select
default_value	horizontal
fieldoptions	Horizontal=horizontal Vertical=vertical

4

reference	spacing
title	Space between slides
fieldtype	select
default_value	none
fieldoptions	None=regular A little=relaxed A lot=very relaxed

5

reference	transition
title	Transition effect
fieldtype	select
default_value	slide
fieldoptions	Slide=slide Fade=fade 3D cube=cube 3D coverflow=coverflow 3D flip=flip

6

reference	pagination
title	Pagination
fieldtype	select
default_value	none
fieldoptions	None=none Bullets=bullets Fraction=fraction Progress bar=progressbar

7

reference	inverted
title	Invert nav colors
fieldtype	select
fieldoptions	No=0 Yes=1

8

reference	responsive
title	Responsive
fieldtype	select
fieldoptions	No=0 Yes (only applies to multiple columns)=1

9

reference	mobile_only
title	Mobile only
fieldtype	select
fieldoptions	No (always be slidin')=0 Yes (keep original layout on desktop and tablet)=1

10

reference	behaviour
title	Behaviour
fieldtype	checkbox
default_value	loop,arrows
fieldoptions	Infinite loop=loop Show previous / next arrows=arrows Place navigation outside of container=navOutside Keyboard control=keyboard Free scrolling=free Center mode=center Auto height=autoHeight Autoplay=autoplay

11

reference	fullscreen
title	Full screen
fieldtype	radio
fieldoptions	No=0 Yes=1

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

@CHUNK overviewOuterFluid

0

reference	row_tpl
title	Template
fieldtype	select
default_value	overviewRowImageFluid
fieldoptions	Regular=overviewRowImageFluid Publication=overviewRowArticleFluid Team=overviewRowPersonFluid Portfolio=overviewRowProjectFluid

1

reference	background_even
title	Background even layouts
fieldtype	select
default_value	white
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

2

reference	background_odd
title	Background odd layouts
fieldtype	select
default_value	secondary
fieldoptions	System default (White)=default White=white Light=secondary Grey=inverted secondary Dark=inverted Primary color (Light)=primary-color Primary color (Dark)=inverted primary-color Secondary color (Light)=secondary-color Secondary color (Dark)=inverted secondary-color Transparent=transparent Romanesco Universe=14 Spirograph=14 Fractal badge=14

3

reference	content_width
title	Content column width
fieldtype	select
default_value	eight
fieldoptions	1 column=one 2 columns=two 3 columns=three 4 columns=four 5 columns=five 6 columns=six 7 columns=seven 8 columns=eight Adjust to content width=compact 9 columns=nine 10 columns=ten 11 columns=eleven 12 columns=twelve 13 columns=thirteen 14 columns=fourteen 15 columns=fifteen

4

reference	cols_interchange
title	Interchange columns
fieldtype	select
default_value	1
fieldoptions	Yes=1 No=0

5

reference	parent
title	Parent ID
fieldtype	textfield
default_value	16

6

reference	show_subtitle
title	Show subtitle
fieldtype	select
fieldoptions	Yes=1 No=0

7

reference	show_introtext
title	Show introtext
fieldtype	select
default_value	1
fieldoptions	Yes=1 No=0

8

reference	depth
title	Depth
fieldtype	textfield

9

reference	limit
title	Limit
fieldtype	textfield

10

reference	offset
title	Offset
fieldtype	textfield

11

reference	show_hidden
title	Show hidden
fieldtype	select
fieldoptions	Yes=1 No=0

12

reference	sortby
title	Sort by
fieldtype	select
default_value	menuindex
fieldoptions	Sort order in MODX=menuindex Publication date (latest first)=publishedon Creation date (latest first)=createdon Alphabetic=pagetitle

13

reference	sortdir
title	Sort direction
fieldtype	select
fieldoptions	Default=0 Reversed=1

14

reference	pagination
title	Pagination
fieldtype	select
fieldoptions	Yes=1 No=0

15

reference	pagination_type
title	Pagination type
fieldtype	select
default_value	default
fieldoptions	Default=default Button (Load more)=button Scroll (Infinite lazy loading)=scroll

16

reference	title_hierarchy
title	Title hierarchy
fieldtype	select
default_value	h2
fieldoptions	Heading 2=h2 Heading 3=h3 Heading 4=h4 Heading 5=h5 Regular=span

17

reference	title_field
title	Title field
fieldtype	select
default_value	menutitle
fieldoptions	Menutitle=menutitle Pagetitle=pagetitle Longtitle=longtitle

18

reference	title_inflate
title	Inflate main title
fieldtype	select
fieldoptions	Yes= No=conventional
type_ahead	No
template

19

reference	img_inflate
title	Inflate images
fieldtype	select
fieldoptions	Yes=1 No=0

20

reference	img_snap
title	Snap images to edge
fieldtype	select
fieldoptions	Yes=1 No=0

21

reference	img_type
title	Image type
fieldtype	select
default_value	landscape
fieldoptions	Landscape (4:3)=landscape Portrait (3:4)=portrait Square (1:1)=square Wide (16:9)=wide Panorama (21:9)=pano Free (?:?)=free

22

reference	lazy_load
title	Lazy load images
fieldtype	select
default_value	1
fieldoptions	No=0 Yes=1

23

reference	link_text
title	Button text
fieldtype	textfield
default_value	Read more

24

reference	padding
title	Additional padding
fieldtype	select
default_value	very relaxed
fieldoptions	None=regular A little=relaxed A lot=very relaxed

Layouts

FormBlocks

Fieldset

Included patterns

Used on these pages

Inline Fields

Included patterns

Used on these pages

MailBlocks

Single Column (Email)

Included patterns

Used on these pages

Content + Sidebar (Email)

Included patterns

Used on these pages

Sidebar + Content (Email)

Included patterns

Used on these pages

2 Columns (Email)

Included patterns

Used on these pages

3 Columns (Email)

Included patterns

Used on these pages

4 Columns (Email)

Included patterns

Used on these pages

Basic

Single Column

Included patterns

Used on these pages

Content + Sidebar

Included patterns

Used on these pages

Sidebar + Content

Included patterns

Used on these pages

4 Columns

Included patterns

Used on these pages

3 Columns

Included patterns

Used on these pages

2 Columns

Included patterns

Used on these pages

Nested

Single Column (Nested)

Included patterns

Used on these pages

Content + Sidebar (Nested)

Included patterns

Used on these pages

Sidebar + Content (Nested)

Included patterns

Used on these pages

4 Columns (Nested)

Included patterns

Used on these pages

3 Columns (Nested)

Included patterns

Used on these pages

2 Columns (Nested)

Included patterns

Used on these pages

Segment

Included patterns

Used on these pages

Card Blanche

Included patterns

Used on these pages

Card Content

Included patterns

Used on these pages

Card Content (2 Columns)

Included patterns

Used on these pages

Utility

Backyard

Included patterns