Column
Columns are table cells. width is a percentage of the row; the widths of the columns in a row should add up to ~100.
Column
ContainerColumns are table cells. width is a percentage of the row; the widths of the columns in a row should add up to ~100.
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 50 | Width as a percentage (1–100) of the parent Row. |
backgroundColor | color | — | Fill color behind the column. |
paddingX | number | 8 | Horizontal inner padding (px). |
paddingY | number | 0 | Vertical inner padding (px). |
borderWidth | number | — | Border stroke width (px). 0/absent = no visible border. |
borderStyle | enumsolid | dashed | dotted | — | Border stroke style. |
borderColor | color | — | Border stroke color. |
borderRadius | number | — | Corner rounding (px). Independent of width — round a filled card without a stroke. |
Common props
Every component accepts these on top of its own props.
| Prop | Type | Default | Description |
|---|---|---|---|
marginBottom | number | 16 | Vertical space (px) below the block. |
className | string | — | Tailwind-style utility classes compiled to inline CSS at render (e.g. "mt-4 text-zinc-500 sm:hidden"). Responsive/pseudo variants are hoisted into a <style> block. class and tw are accepted as aliases in code. |
customCss | css | — | Extra inline CSS declarations merged onto the block's root element (e.g. "letter-spacing: 1px; opacity: 0.9"). Inlined so it survives every client. |
Set one side at a time with the padding and margin objects in the visual editor's inspector.