Flexible Content Element

Flexible Content renders layouts from a flexible-content field using configured blocks. Use it when structured field layouts determine which content sections appear.

Add and configure Flexible Content

1. Click Add, choose Flexible Content, and place it in the container.
2. Choose Content > Field > Flexible Content Field and configure Tag, Item Title, and Advanced options.
3. Configure Content > Blocks > Blocks for the field's layouts.
4. Review Advanced > Raw Mode, then style List, Item, Container, and Spacing.
5. Save your changes.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Field

Setting	Purpose and options	Behavior
Flexible Content Field	Choose an available flexible content field from the list.	Shared
Tag	article, section, div.	Shared
Item Title	Enter the item title. When: Layout = Accordion, Tabs.	Shared
Advanced > When Empty	Existing Global Block.	Shared

Content > Blocks

Setting	Purpose and options	Behavior
Blocks	Add, edit, remove, and reorder blocks.	Shared
Blocks > Layout	Choose an available layout from the list.	Shared
Blocks > Block	Existing Global Block.	Shared

Content > Advanced

Setting	Purpose and options	Behavior
Raw Mode	On/off.	Shared

Design > List

Setting	Purpose and options	Behavior
Width	Width. When: Raw Mode is unset.	Responsive
Layout	List, Grid, Slider, Accordion, Tabs, Masonry. When: Raw Mode is unset.	Shared
Slider	slider controls. When: Raw Mode is unset and Layout = Slider.	See linked controls

Shown when Raw Mode is unset and Layout = Accordion.

Setting	Purpose and options	Behavior
Accordion > Accordion	On/off.	Shared
Accordion > First Item Opened	On/off.	Shared
Accordion > Item > Style	Bordered, Pills.	Shared
Accordion > Item > Icon > Position	Left, Right.	Shared
Accordion > Item > Icon > Icon	Icon.	Shared
Accordion > Item > Icon > Active Icon	Icon.	Shared
Accordion > Item > Icon > Size	Size and unit.	Responsive
Accordion > Item > Icon > Color	Color or supported fill.	Shared
Accordion > Item > Icon > Active Color	Color or supported fill.	Shared

Shown when Raw Mode is unset and Layout = Accordion and Style = Bordered.

Setting	Purpose and options	Behavior
Accordion > Item > Bordered > Border Color	Color or supported fill.	Shared
Accordion > Item > Bordered > Border Width	Border width and unit.	Shared
Accordion > Item > Bordered > Border Radius	Border radius and unit.	Shared
Accordion > Item > Bordered > Bottom Only	On/off.	Shared

Setting	Purpose and options	Behavior
Accordion > Item > Background	Color or supported fill. When: Raw Mode is unset and Layout = Accordion.	Hover
Accordion > Item > Padding	spacing controls. When: Raw Mode is unset and Layout = Accordion.	See linked controls
Accordion > Item > Borders	borders controls. When: Raw Mode is unset and Layout = Accordion and Style = Pills.	See linked controls

Shown when Raw Mode is unset and Layout = Accordion.

Setting	Purpose and options	Behavior
Accordion > Item > Typography	typography controls.	See linked controls
Accordion > Item > Active > Text Color	Color or supported fill.	Shared
Accordion > Item > Active > Background	Color or supported fill.	Shared
Accordion > Item > Transition Duration	Transition duration.	Shared

Shown when Raw Mode is unset and Layout = Tabs.

Setting	Purpose and options	Behavior
Tabs > Active Tab	Set the numeric active tab value.	Shared
Tabs > Open On Hover	On/off.	Shared
Tabs > Styles > Vertical	On/off.	Shared

Setting	Purpose and options	Behavior
Tabs > Styles > Tabs Width	Tabs width and unit. When: Raw Mode is unset and Layout = Tabs and Vertical is set.	Responsive
Tabs > Styles > Horizontal At	Breakpoint. When: Raw Mode is unset and Layout = Tabs and Vertical is set.	Shared
Tabs > Styles > Style	Tabs, Pills, Bar. When: Raw Mode is unset and Layout = Tabs.	Shared
Tabs > Styles > Position	Left, Right. When: Raw Mode is unset and Layout = Tabs and Vertical is set.	Shared
Tabs > Styles > Position	Left, Center, Right, Full Width. When: Raw Mode is unset and Layout = Tabs and Vertical is unset.	Shared
Tabs > Styles > Space Between	Space between and unit. When: Raw Mode is unset and Layout = Tabs and Position ≠ Full Width or Style ≠ Bar.	Shared
Tabs > Styles > Space After	Space after and unit. When: Raw Mode is unset and Layout = Tabs and Position ≠ Full Width.	Responsive

Shown when Raw Mode is unset and Layout = Tabs and Style = Bar.

Setting	Purpose and options	Behavior
Tabs > Styles > Bar > Separator	Color or supported fill.	Shared
Tabs > Styles > Bar > Radius	Radius and unit.	Shared
Tabs > Styles > Bar > Shadow	Shadow offset, blur, spread, color.	Shared

Setting	Purpose and options	Behavior
Tabs > Styles > Pill Radius	Pill radius and unit. When: Raw Mode is unset and Layout = Tabs and Style = Pills.	Shared
Tabs > Styles > Separator > Color	Color or supported fill. When: Raw Mode is unset and Layout = Tabs and Style = Tabs.	Shared
Tabs > Styles > Separator > Width	Width. When: Raw Mode is unset and Layout = Tabs and Style = Tabs.	Shared

Shown when Raw Mode is unset and Layout = Tabs.

Setting	Purpose and options	Behavior
Tabs > Styles > Text > Typography	typography controls.	See linked controls
Tabs > Styles > Text > Hover	Color or supported fill.	Shared
Tabs > Styles > Text > Active	Color or supported fill.	Shared
Tabs > Styles > Background > Inactive	Color or supported fill.	Shared
Tabs > Styles > Background > Hover	Color or supported fill.	Shared
Tabs > Styles > Background > Active	Color or supported fill.	Shared

Shown when Raw Mode is unset and Layout = Tabs and Style ≠ Pills.

Setting	Purpose and options	Behavior
Tabs > Styles > Underline > Hover	Color or supported fill.	Shared
Tabs > Styles > Underline > Active	Color or supported fill.	Shared
Tabs > Styles > Underline > Width	Width.	Shared
Tabs > Styles > Underline > Radius	Radius and unit.	Shared

Setting	Purpose and options	Behavior
Tabs > Styles > Padding > Vertical	Vertical and unit. When: Raw Mode is unset and Layout = Tabs.	Shared
Tabs > Styles > Padding > Horizontal	Horizontal and unit. When: Raw Mode is unset and Layout = Tabs.	Shared
Tabs > Styles > Icon > Size	Size and unit. When: Raw Mode is unset and Layout = Tabs and Align ≠ none.	Shared

Shown when Raw Mode is unset and Layout = Tabs.

Setting	Purpose and options	Behavior
Tabs > Styles > Icon > Nudge > Nudge X	Nudge x and unit.	Shared
Tabs > Styles > Icon > Nudge > Nudge Y	Nudge y and unit.	Shared
Tabs > Styles > Icon > After Icon	After icon and unit.	Shared
Tabs > Styles > Responsive > Show as Dropdown	On/off.	Shared

Shown when Raw Mode is unset and Layout = Tabs and Show as Dropdown is set.

Setting	Purpose and options	Behavior
Tabs > Styles > Responsive > Visible At	Breakpoint.	Shared
Tabs > Styles > Responsive > Dropdown Styles > Background	Color or supported fill.	Shared
Tabs > Styles > Responsive > Dropdown Styles > Borders	borders controls.	See linked controls
Tabs > Styles > Responsive > Dropdown Styles > Padding	spacing controls.	See linked controls
Tabs > Styles > Responsive > Dropdown Styles > Typography	typography controls.	See linked controls

Setting	Purpose and options	Behavior
Tabs > Styles > Responsive > Show Affordance	On/off. When: Raw Mode is unset and Layout = Tabs and Show as Dropdown is unset.	Shared
Tabs > Styles > Responsive > Color	Color or supported fill. When: Raw Mode is unset and Layout = Tabs and Show Affordance is set.	Shared
Tabs > Styles > Transition Effect	Transition effect and unit. When: Raw Mode is unset and Layout = Tabs.	Shared
Items Per Row	Set the numeric items per row value. When: Raw Mode is unset and Layout = Grid, Masonry.	Responsive
One Item At	Breakpoint. When: Raw Mode is unset and Layout = Grid, Masonry.	Shared
Space Between Items	Space between items and unit. When: Raw Mode is unset and Layout ≠ Slider, Accordion, Tabs.	Responsive

Design > Item

Shown when Raw Mode is unset.

Setting	Purpose and options	Behavior
Background	Color or supported fill.	Shared
Borders	borders controls.	See linked controls
Padding	spacing controls.	See linked controls

Design > Container

Shown when Raw Mode is unset.

Setting	Purpose and options	Behavior
Background	Color or supported fill.	Shared
Borders	borders controls.	See linked controls
Padding	spacing controls.	See linked controls

Design > Spacing

Setting	Purpose and options	Behavior
Spacing	spacing controls. When: Raw Mode is unset.	See linked controls

Troubleshooting