Layout widget
Container
The box every layout is made of. Rows, columns, cards and grids — with flexbox or CSS grid, set per device.
Build it with your AI
“Add a section with three cards in a row — an icon, a title and a short text in each — that stack on mobile.”
Live demo
See it working
Fast
Pages load only what they use.
On brand
Every card uses your Design System.
Safe
Every change can be undone.
Settings
63 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
27 settings
Layout
Layout
Content width
Boxed width
Width
Min height
Direction
Columns
Custom columns
Rows
Auto flow
Justify content
Align items
Gap
Row gap
Wrap
HTML tag
Link
Query loop
Repeat for each item
Items
Query
Taxonomy
Which terms
Order by
Order
Number of terms
Hide empty terms
When nothing is found
Design
36 settings
Background
Background
Motion
Motion speed
Animation
Color 1
Color 2
Color 3
Color 4
Base color
Image
Freeze motion
Speed
Still frame
Scale
Intensity
Noise
Angle
Offset X
Offset Y
Follow the pointer
Background overlay
Overlay
Opacity
Shape dividers
Shape
Color
Width
Height
Flip
Invert
Bring to front
Border & shadow
Border
Radius
Box shadow
Box shadow on hover
Border color on hover
Text color
Text color
Link color
Behaviour
shared
On every element
Spacing & position
Background & border
Animations
Motion & effects
Scroll & mouse effects
Visibility
Conditions
Interactions
Attributes & CSS
Build it with AI
Just describe what you want
Your AI looks up the Container settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add a section with three cards in a row — an icon, a title and a short text in each — that stack on mobile.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{
"type": "container",
"label": "Row",
"settings": {
"direction": "row",
"direction_mobile": "column",
"wrap": "wrap",
"gap": { "size": 16, "unit": "px" },
"align": "stretch"
},
"children": [
{
"type": "container",
"label": "Card 1",
"settings": {
"width": "32%",
"width_mobile": "100%",
"gap": { "size": 10, "unit": "px" },
"_padding": {
"top": 22,
"right": 22,
"bottom": 22,
"left": 22,
"unit": "px",
"linked": false
},
"radius": { "top": 16, "right": 16, "bottom": 16, "left": 16, "unit": "px" },
"background": { "type": "classic", "color": "#ffffff" },
"border": { "style": "solid", "width": "1px", "color": "var(--uncoder-c-border)" }
},
"children": [
{
"type": "icon",
"settings": {
"icon": "zap",
"size": { "size": 22, "unit": "px" },
"color": "var(--uncoder-c-heading)",
"align": "left"
}
},
"… 2 more like this"
]
},
"… 2 more like this"
]
}More layout widgets