Component Catalog
Callout Block Editorial
Editorial
Callout Block Highlights a tip, note or warning so it stands apart from the surrounding copy
Highlights a tip, note or warning so it stands apart from the surrounding copy.
When to use
This page shows the Callout Block across background, alignment and spacing settings, then lists its fields.
Variations The same block across five settings
Left · Light 01 — bg: bgstyle-01 · align: left
Good to know
Callouts highlight a tip, warning or note so it stands apart from the surrounding copy.
Center · Light 02 — bg: bgstyle-02 · align: center
Good to know
Callouts highlight a tip, warning or note so it stands apart from the surrounding copy.
Right · Plain — bg: bgstyle-00 · align: right
Good to know
Callouts highlight a tip, warning or note so it stands apart from the surrounding copy.
Center · Dark 05 — bg: bgstyle-05 · align: center
Good to know
Callouts highlight a tip, warning or note so it stands apart from the surrounding copy.
Center · Image BG — bg: bgstyle-05 · align: center
Good to know
Callouts highlight a tip, warning or note so it stands apart from the surrounding copy.
Field reference
| Field | Editor | Required |
|---|---|---|
| calloutVariant | Radio (Info/Success/Warning/Danger) | — |
| calloutHeadline | Text | — |
| calloutBody | Textarea | — |