These are the actual blocks in Content<em>Blocks</em>

Description not available.

[[+tag]]

Description not available.

[[+tag]]

Description not available.

[[+tag]]

The options can be rendered as single select (radio buttons), multi select (checkboxes) or dropdown. You can submit a value that is different from the label, with the Value in HTML option. Good practice if you're planning to use the value in an automated process.

[[!$[[+chunk_name_row]]?
    &idx=`[[+idx]]`
    &unique_idx=`[[+unique_idx]]`
    &field_type=`[[+field_type]]`
    &field_name=`[[!fbStripNonAlpha? &input=`[[+field_name:empty=`0`]]`]]`
    &field_option=`[[!fbStripNonAlpha? &input=`[[+field_option]]`]]`
    &field_value=`[[+field_value:empty=`0`]]`
    &option_layout=`[[+option_layout]]`
    &checkbox_type=`[[+checkbox_type]]`
    &field_name_html=`[[+field_name_html]]`
]]

Similar to the regular Select Options, but with the ability to show/hide fieldsets on selection. For this to work, you need to give the fieldset an ID by changing its layout title. This will add an ID to the HTML. Set this ID (including the fb prefix!!) as the show/hide target, and the fieldset visibility should be toggled on select/unselect.

Tip: if you don't want to show/hide a fieldset on top level, you can add a Nested Field through CB.

And keep in mind: fields inside the show/hide target should NOT be required, as there is no mechanism in place to skip validation if the fieldset is hidden. This can be added manually though.

[[!$fbSelectOptionRow?
    &idx=`[[+idx]]`
    &unique_idx=`[[+unique_idx]]`
    &field_type=`[[+field_type]]`
    &field_name=`[[!fbStripNonAlpha? &input=`[[+field_name:empty=`0`]]`]]`
    &field_option=`[[!fbStripNonAlpha? &input=`[[+field_option]]`]]`
    &field_value=`[[+field_value:empty=`0`]]`
    &option_layout=`[[+option_layout]]`
    &collapse_target=`[[+collapse_target]]`
    &collapse_default=`[[+collapse_default]]`
    &checkbox_type=`[[+checkbox_type]]`
    &field_name_html=`[[+field_name_html]]`
]]

Provide a snippet here to generate the options. For examples and caveats, see https://notes.romanesco.info/autogenerated-cb-field-examples. Multiple tpl chunks are available in the pattern library, for the different selection types. Make sure you change the tpl property too if you're changing the selection type!

[[!If?
    &subject=`[[+field_type]]`
    &operator=`contains`
    &operand=`dropdown`
    &then=`fbSelectDropdown`
    &else=`fbSelectOption`
    &toPlaceholder=`chunk_name`
]]
[[!$[[+chunk_name]]?
    &unique_idx=`[[+unique_idx]]`
    &field_layout=`[[+field_layout]]`
    &field_type=`[[+field_type]]`
    &field_name=`[[+field_name]]`
    &field_name_html=`[[+field_name_html]]`
    &field_option=`[[+field_option]]`
    &field_width=`[[+field_width]]`
    &option_layout=`[[+option_layout]]`
    &option_other=`[[+option_other]]`
    &option_other_value=`[[+option_other_value]]`
    &option_placeholder=`[[+option_placeholder]]`
    &checkbox_type=`[[+checkbox_type]]`
    &field_helptext=`[[+field_helptext]]`
    &helptext_position=`[[+helptext_position]]`
    &field_required=`[[+field_required]]`
    &rows=`[[+value]]`
]]

Let visitors upload a file from their system. This file will be attached to the email you receive.

[[+tag]]

Let visitors upload multiple files from their system. These files will be attached to the email you receive. Files can be added with drag&drop or via the system file explorer.

[[+tag]]

A standard date selector. You can predefine what kind of date or time can be selected.

[[+tag]]

Two date selectors, marking the start and end of a time period.

[[+tag]]

Description not available.

[[+tag]]

Render a math-based question in your form to prevent spam. It needs to be answered correctly in order to proceed.

Type:	chunk
Chunk:	fbMathQuestion

[[+tag]]

A cbFormHelpPosition A cbFormLabelPosition M fbMathQuestion Assigned

No references found.

Add a checkbox that blocks form submission if left unchecked. You can link to your terms by entering the corresponding resource ID and using the placeholder in the field text.

[[+tag]]

Description not available.

[[+segment_type:isnot=`none`:then=`<div class="ui [[+segment_type]] [[+padding:contains=`fitted`:then=`basic`]] segments">`]]
[[+value]]
[[+segment_type:isnot=`none`:then=`</div>`]]

Description not available.

@CHUNK mbContentHeading

Description not available.

@CHUNK mbContentText

Description not available.

@CHUNK mbContentButton

Description not available.

@CHUNK mbContentImage

Description not available.

@CHUNK mbContentQuote

Description not available.

[[+tag]]

Description not available.

[[+tag]]

Description not available.

@CHUNK mbContentDivider

Description not available.

@CHUNK mbContentAccordionRow

Description not available.

[[$headingBasic[[+anchor]]?
    &value=`[[+value]]`
    &level=`[[+level]]`
    &alignment=`[[+alignment]]`
    &unique_idx=`[[+unique_idx]]`
]]

Description not available.

[[$headingBasicSubtitle?
    &value=`[[+value]]`
    &level=`[[+level]]`
    &subtitle=`[[+subtitle]]`
    &alignment=`[[+alignment]]`
    &unique_idx=`[[+unique_idx]]`
]]

Description not available.

@CHUNK headingIconFont

Description not available.

@CHUNK headingIconSVG

Description not available.

<[[+element]] class="short [[+text_type]]">[[+value:stripString=`<br>`]]</[[+element]]>

Description not available.

[[$richTextSegment?
    &content=`[[+value]]`
    &segment_type=`[[+segment_type]]`
    &background=`[[+background]]`
	&padding=`[[+padding]]`
    &alignment=`[[+alignment]]`
]]

Description not available.

[[$richTextMessage?
    &heading=`[[+heading]]`
    &content=`[[+value]]`
    &message_type=`[[+message_type]]`
	&size=`[[+size]]`
	&close=`[[+close]]`
]]

Description not available.

<div class="item">
    [[+list_type:is=`icon`:then=`<i class="[[+list_icon]]"></i>`]]
    <div class="content">
        [[+value]]
    </div>
    [[+items]]
</div>

Description not available.

<li>[[+value]] [[+items]]</li>

Description not available.

[[$quoteBasic?
    &quote=`[[+value]]`
    &cite=`[[+cite]]`
    &size=`[[+size]]`
    &layout_type=`[[+layout_type]]`
]]

Create a Q&A section. Can be displayed as plain text, or in an accordion. And behind the scenes, structured markup is added to inform search engines that they can also use these questions in their Q&A views.

[[$[[+layout_type]]RowBasic?
    &heading=`[[+heading]]`
    &level=`[[+heading_level]]`
    &content=`[[+content]]`
    &padding=`[[+padding]]`
    &alignment=``
    &idx=`[[+idx]]`
]]

Add images, SVGs, galleries and videos to your content.

@CHUNK imageOuter

Add images, SVGs, galleries and videos to your content.

@CHUNK imageOuter

Description not available.

@CHUNK iconSVG

Description not available.

[[$videoYoutube?
    &video=`[[+value]]`
    &img_type=`[[+img_type]]`
    &img_alt=`[[+img_alt]]`
    &aspect_ratio=`[[+aspect_ratio]]`
    &button_size=`[[+button_size]]`
    &embed_on_click=`[[+embed_on_click]]`
]]

Description not available.

Play a local video file in the browser. You can provide multiple files, to maximize compatibility. The browser attempts to play the top one first and keeps trying until a compatible file is found. Recommended to stick to .webm or .mp4 format when possible.

@CHUNK videoLocalSource

Description not available.

[[$galleryRowImage?
    &url=`[[+url]]`
    &title=`[[+title]]`
    &size=`[[+size]]`
    &width=`[[+width]]`
    &height=`[[+height]]`
    &extension=`[[+extension]]`

    &classes=``
    &lightbox=`[[+lightbox]]`
    &lazy_load=`[[+lazy_load]]`
    &layout_id=`[[+layout_id]]`
    &layout_column=`[[+layout_column]]`
    &cols=`[[textToNumber? &input=`[[+cols]]`]]`
    &sidebar_width=`[[+layout_settings.sidebar_width]]`
    &responsive=`[[+layout_settings.responsive]]`
    &unique_idx=`[[+unique_idx]]_[[+idx]]`
    &idx=`[[+idx]]`
]]

Description not available.

[[$galleryRowImageCaption?
    &image=`[[+image]]`
    &alt=`[[+alt]]`
    &caption=`[[+caption]]`
    &column_type=`[[+column_type]]`
    &lightbox=`[[+lightbox]]`
    &unique_idx=`[[+unique_idx]]_[[+idx]]`
    &idx=`[[+idx]]`
]]

Description not available.

<div class="ui nested [[+responsive:replace=`,== `]] [[+padding]] [[+spacing]] [[+alignment]] [[+divider]] equal width grid">
    [[+value]]
</div>

Only available in Backyard and Slider layouts. Allows you to add basic (root level) layouts as nested layout.

[[+value]]

Description not available.

@CHUNK dividerBasic

Description not available.

@CHUNK dividerHeading

Description not available.

@CHUNK tableColumnBasic

Description not available.

[[$[[+layout_type]]RowBasic?
    &heading=`[[+heading]]`
    &level=`[[+heading_level]]`
    &content=`[[+content]]`
    &padding=`[[+padding]]`
    &tab_type=`[[+tab_type]]`
    &idx=`[[+idx]]`
]]

Description not available.

[[$[[+layout_type]]RowBasic?
    &heading=`[[+heading]]`
    &level=`[[+heading_level]]`
    &subtitle=`[[+heading_subtitle]]`
    &icon=`[[+heading_icon]]`
    &content=`
    <div class="ui stackable [[+alignment]] [[+divider]] equal width grid">
        [[+content]]
    </div>`
    &padding=`[[+padding]]`
    &tab_type=`[[+tab_type]]`
    &icon_position=`[[+icon_position]]`
    &menu_position=`[[+menu_position]]`
    &idx=`[[+idx]]`
]]

Description not available.

[[$cardsRowInnerWrapper?
    &box_type=`[[+box_type]]`
    &link=`[[+link]]`
    &image=`[[+image]]`
    &alt=`[[+heading]]`
    &heading=`[[+heading]]`
    &level=`[[+heading_level]]`
    &subtitle=`[[+subtitle]]`
    &content=`[[+content]]`
    &button_text=`[[+button_text]]`
    &emphasize=`[[+emphasize]]`
    &unique_idx=`[[+unique_idx]]_[[+idx]]`
    &idx=`[[+idx]]`
]]

Description not available.

[[$cardsRowFlexible?
    &box_type=`[[+box_type]]`
    &link=`[[+link]]`
    &content=`[[+content]]`
    &emphasize=`[[+emphasize]]`
]]

Description not available.

[[If?
    &subject=`[[+segment_group]]`
    &operator=`notempty`
    &then=`
    <div class="ui [[+segment_group]] [[+emphasize]] segments">
        [[+value]]
    </div>
    `
    &else=`[[+value]]`
]]

Turn each child element into a slide. Can also process Overview or Gallery items as slides.

<div class="nested slider">
    [[+value]]
</div>

Add images, SVGs and gradients here to be displayed as background in ContentBlocks layouts and fields. You can stack them on top of each other to create multi-layered backgrounds (for example, an image with an SVG or gradient overlay).

You can crop images for 3 display types: mobile, tablet and desktop, and even use different images for each breakpoint. And you can change the default CSS parameters.

Description not available.

[[+value]]

Description not available.

[[$buttonOuter?
    &link=`[[+link]]`
    &button_text=`[[+button_text]]`
    &button_title=`[[+button_title]]`
    &button_size=`[[+button_size]]`
    &button_type=`[[+button_type]]`
    &button_options=`[[+button_options]]`
    &icon_class=`[[+icon_class]]`
    &icon_options=`[[+icon_options]]`
    &link_rel=`[[+link_rel]]`
    &link_anchor=`[[+link_anchor]]`
    &new_window=`[[+new_window]]`
    &unique_idx=`[[+unique_idx]]`
]]

The ToC menu contains all headings on the page with an anchor (an ID in HTML). You can attach an anchor to all headings with the 'Automatic anchors' TV, or per heading by manually activating the anchor in their settings menu.

[[+value]]

A menu to show the completion status of an activity in a series of activities. Useful in combination with multi-page forms.

[[+value]]

Description not available.

[[+tag]]

Description not available.

[[+tag]]

Description not available.

[[+tag]]

Description not available.

[[+tag]]

Description not available.

[[+tag]]

Description not available.

[[+tag]]

Description not available.

[[+tag]]

Add a CTA here. You can create and edit CTAs under Global Content > Call To Actions.

[[+tag]]

Add a web form here. You can build your own forms with FormBlocks, accessible via Content > Global in the top menu.

[[+value]]

DEPRECATED. Each option now has its own CB.

[[+value]]

Description not available.

[[+value]]

Description not available.

[[+value]]

Add a Twitter feed here. You need to install the TwitterX package first, before any output will appear.

[[+tag]]

Add a map here, with a single marker. You can enter the lat/long coordinates of the location (comma-separated, no spaces) or write down the actual address. This address will then be geocoded to the correct coordinates for the marker.

Please note that you need a Mapbox API key for the map to be displayed, and the GeoCoder extra installed if you want to enter an address as location. This also requires an API key for an external geocoding service of choice.

[[+value]]

Additional comments or feedback. Only logged in users can see this content.

@CHUNK feedbackMessage

The code you paste here, will be shown exactly like that on the front-end.

<pre><code class="language-[[+lang]]">[[+value:esc]]</code>[[+label:notempty=`<div class="ui small top right attached label">[[+label]]<i class="copy link icon with popup" data-content="[[%romanesco.patterns.copy_tooltip]]"></i></div>`]]</pre>

Anything entered inside this code block will run first, before being displayed on the frontend.

[[$codeSnippet?
    &value=`[[+value]]`
    &lang=`[[+lang]]`
    &label=`[[+label]]`
]]

Description not available.

[[+value]]

Description not available.

[[+value]]

Render a JSON object as HTML table.

[[jsonToHTML? &json=`[[+value]]`]]

List the smaller atomic particles included in this pattern.

[[+value]]

List the bigger patterns that contain this atomic particle. For Electrons, you can also list which templates have that Electron assigned. NB: this doesn't mean the Electron is used in the template code itself!

[[+value]]

Fields

FormBlocks

Input (Textfield)

Included patterns

Used on these pages

Input (Textarea)

Included patterns

Used on these pages

Input (Email)

Included patterns

Used on these pages

Select Options

Included patterns

Used on these pages

Select Options (Show/Hide)

Included patterns

Used on these pages

Select Options (Autogenerated)

Included patterns

Used on these pages

Input (Single File)

Included patterns

Used on these pages

Input (Multiple Files)

Included patterns

Used on these pages

Input (Date)

Included patterns

Used on these pages

Input (Date Range)

Included patterns

Used on these pages

Input (Hidden)

Included patterns

Used on these pages

Math Question

Included patterns

Used on these pages

Accept Terms and Conditions

Included patterns

Used on these pages

Nested Fields

Included patterns

Used on these pages

MailBlocks

Heading (Email)

Included patterns

Used on these pages

Text (Email)

Included patterns

Used on these pages

Button (Email)

Included patterns

Used on these pages

Image (Email)

Included patterns

Used on these pages

Quote (Email)

Included patterns

Used on these pages

Social Share Buttons (Email)

Included patterns

Used on these pages

Social Connect Buttons (Email)

Included patterns

Used on these pages

Divider (Email)

Included patterns

Used on these pages

Accordion (Email)

Included patterns

Used on these pages

Text

Heading

Included patterns

Used on these pages

Heading (with Subtitle)

Included patterns

Used on these pages

Heading (with Font icon)