# Callout

Use this to add small blocks of text with a coloured background.

## Appearance

[![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2024-11/scaled-1680-/FLBimage.png)](https://bookstack.iconography.co.uk/uploads/images/gallery/2024-11/FLBimage.png)

### Content

<table border="1" id="bkmrk-field-purpose-headin" style="border-collapse: collapse; width: 100%; height: 349.903px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><thead><tr style="height: 29.6806px;"><td style="height: 29.6806px;">Field</td><td style="height: 29.6806px;">Purpose</td></tr></thead><tbody><tr style="height: 46.4722px;"><td style="height: 46.4722px;">Heading</td><td style="height: 46.4722px;">*Enter a short block title*</td></tr><tr style="height: 46.4722px;"><td style="height: 46.4722px;">Text</td><td style="height: 46.4722px;">*This is the main content of the block. Use the controls to format your text*</td></tr></tbody></table>

### Settings

<table border="1" id="bkmrk-field-purpose-block-" style="width: 92.7381%;"><thead><tr><td style="width: 45.7584%;">Field</td><td style="width: 54.2416%;">Purpose</td></tr></thead><tbody><tr><td style="width: 45.7584%;">Block Width</td><td style="width: 54.2416%;">*Choose from:*

- *25%*
- *33%*
- *50%*
- *66%*
- *75%*
- *100%*
- *Full Width (set to always be the full width of the user's device)*

</td></tr><tr><td style="width: 45.7584%;">Visibility</td><td style="width: 54.2416%;">*Set the block visibility from the list:*

- *Default (both)*
- *Desktop Only*
- *Mobile Only*
- *Hidden (none)*

</td></tr><tr><td style="width: 45.7584%;">Background Colour</td><td style="width: 54.2416%;">*Choose a background colour for your image. Choose from recommended colours, or use a colour picker.* </td></tr></tbody></table>

#### Additional Options

<table border="1" id="bkmrk-field-purpose-collap" style="border-collapse: collapse; width: 100%; height: 59.3612px;"><colgroup><col style="width: 50.0596%;"></col><col style="width: 50.0596%;"></col></colgroup><thead><tr style="height: 29.6806px;"><td style="height: 29.6806px;">Field</td><td style="height: 29.6806px;">Purpose</td></tr></thead><tbody><tr style="height: 29.6806px;"><td>Invert text colour</td><td>*Toggle to invert the text colour*</td></tr></tbody></table>

<span style="font-family: var(--font-heading, var(--font-body)); font-size: 2.333em; font-weight: 400;">Advanced</span>

#### Padding

Adding padding will insert space within the current block; this will adjust the position of content within the block.

More information is available [here](https://bookstack.iconography.co.uk/books/general/page/padding).

#### Margin

The margin will add additional space around the current block.

More information is available [here](https://bookstack.iconography.co.uk/books/general/page/margin).