# Modular Blocks



# Summary



# Version Control

Every Modular Page comes with version control.

These are intended to allow users to work on multiple versions of the page, either to make changes in draft before putting them live, or to have multiple versions for different purposes:

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

<p class="callout success">Although all changes to Modular Pages are instant, you will not see them on the website unless you are editing the live version![image.png](https://bookstack.iconography.co.uk/uploads/images/gallery/2024-12/scaled-1680-/3LTimage.png)</p>

### FAQs

### How do I make a new version?

To make a new version, either copy and existing version, or alternatively user the control to create a new version from scratch.

### How do I switch between versions?

Use the drop down and select a version, then click 'view version'.

### How do I rename a version?

Use the 'rename version' button in order to rename the version.

<p class="callout warning">You can only rename the version that you are currently viewing.</p>

# Text Blocks

Use this block to add large chunks of text to your page.

## Appearance

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

## Editing the Block

### 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 - this will show above the main content of the block*</td></tr><tr style="height: 46.4722px;"><td style="height: 46.4722px;">Body Text</td><td style="height: 46.4722px;">*This is the main content of the block. Use the controls to format your text*</td></tr><tr style="height: 96.8472px;"><td style="height: 96.8472px;">Link URL</td><td style="height: 96.8472px;">*Enter a link URL - if populated, this will add a call to action below the content of the block.*

*The position of this button can be controlled with the 'Link Position' control*

</td></tr><tr style="height: 130.431px;"><td style="height: 130.431px;">Link Text</td><td style="height: 130.431px;">*Enter link text - if populated, this will change the text in a call to action below the content of the block*

*The position of this button can be controlled with the 'Link Position' control*

*If left blank, the button will read 'More'*

</td></tr></tbody></table>

### Settings

<table border="1" id="bkmrk-field-purpose-block-" style="width: 92.7381%;"><thead><tr><td style="width: 45.7196%;">Field</td><td style="width: 54.2662%;">Purpose</td></tr></thead><tbody><tr><td style="width: 45.7196%;">Block Width</td><td style="width: 54.2662%;">*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.7196%;">Visibility</td><td style="width: 54.2662%;">*Set the block visibility from the list:*

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

</td></tr><tr><td style="width: 45.7196%;">Heading Position</td><td style="width: 54.2662%;">*Alter the alignment of the block header:*

- *Left*
- *Central*
- *Right*

</td></tr><tr><td style="width: 45.7196%;">Link Position</td><td style="width: 54.2662%;">*Alter the alignment of the link button:*

- *Left*
- *Central*
- *Right*

</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%;"></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: 29.6806px;"><td style="height: 29.6806px;">Collapsible</td><td style="height: 29.6806px;">If set to yes, the whole Text block will be set as collapsible (see below)

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

</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).

# Image

Use this block to add simple images to your page.

There are also other blocks which can be used to add images:

- [Carousel](https://bookstack.iconography.co.uk/books/general/page/carousel "Carousel") (small images on a swipeable carousel)
- [Hero](https://bookstack.iconography.co.uk/books/general/page/hero "Hero") (large rotating banners)
- [Parallax](https://bookstack.iconography.co.uk/books/general/page/parallax "Parallax") (an image that sits behind content, adding depth to a page)
- [Feature](https://bookstack.iconography.co.uk/books/general/page/feature "Feature") (a styled image)
- [Multi-Feature](https://bookstack.iconography.co.uk/books/general/page/multi-feature "Multi-Feature") (multiple static images in a single block)
- [Wide Feature](https://bookstack.iconography.co.uk/books/general/page/wide-feature "Wide-Feature") (image with a block of text)

## Appearance

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

## Editing the Block

### Content

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

*It will appear as a caption, below the image*

</td></tr><tr><td>Link URL</td><td>*Enter a link URL - if populated, this will add a link to the image.* </td></tr><tr><td>Image</td><td>*Use the dialogue to select an image to upload*</td></tr><tr><td>Delete Image</td><td>*Use the tick box to delete an image - you will be asked to confirm your action*</td></tr></tbody></table>

### Settings


<table border="1" id="bkmrk-field-purpose-block-" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 49.881%;"></col><col style="width: 49.881%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Block Width</td><td>*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>Mobile Width</td><td>*Set the block width by selecting from the drop down:*

- *33%*
- *50%*
- *100%*

</td></tr><tr><td>Visibility</td><td>*Set the block visibility from the list:*

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

</td></tr><tr><td>Heading Position</td><td>*Alter the alignment of the block header:*

- *Left*
- *Central*
- *Right*

</td></tr><tr><td>Background Colour</td><td>*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-invert" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 49.947%;"></col><col style="width: 49.947%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Invert Text Colour</td><td>*Toggle to invert the text colour*</td></tr><tr><td>Actual Size</td><td>*Choose to display the image at actual size*</td></tr></tbody></table>

### Advanced

#### 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).

# Carousel

Use this block to add small images on a swipeable carousel.

There are also other blocks which can be used to add images:

- [Image](https://bookstack.iconography.co.uk/books/general/page/image "Image") (simple images)
- [Hero](https://bookstack.iconography.co.uk/books/general/page/hero "Hero") (large rotating banners)
- [Parallax](https://bookstack.iconography.co.uk/books/general/page/parallax "Parallax") (an image that sits behind content, adding depth to a page)
- [Feature](https://bookstack.iconography.co.uk/books/general/page/feature "Feature") (a styled image)
- [Multi-Feature](https://bookstack.iconography.co.uk/books/general/page/multi-feature "Multi-Feature") (multiple static images in a single block)
- [Wide Feature](https://bookstack.iconography.co.uk/books/general/page/wide-feature "Wide-Feature") (image with a block of text)

## Appearance

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

## Editing the Block

### Content

Each image has an expandable menu, allowing it to be edited individually.

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

Images may be dragged around to resequence them.

<table border="1" id="bkmrk-field-purpose-link-e" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 49.881%;"></col><col style="width: 49.881%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Link URL</td><td>*Enter a link URL - if populated, this will add a link to the image*</td></tr><tr><td>Alt Text</td><td>*Amend the Alt Text for the image*

</td></tr><tr><td>Summary</td><td>*Enter text that will be shown below the image*</td></tr><tr><td>Delete Image</td><td>*Use the tick box to delete an image - you will be asked to confirm your action*</td></tr></tbody></table>

Use the Image dialogue to select images to upload to this block.

### Settings

<p class="callout info">Block width is not editable for the Hero block - it is always set to 100%.</p>


<table border="1" id="bkmrk-field-purpose-visibi" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 49.881%;"></col><col style="width: 49.881%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Visibility</td><td>*Set the block visibility from the list:*

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

</td></tr><tr><td>Items Visible</td><td>*Define how many images will be visible to the page visitor without scrolling*

</td></tr></tbody></table>

#### Additional Options

<table border="1" id="bkmrk-field-purpose-mouse-" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 49.947%;"></col><col style="width: 49.947%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Mouse Drag</td><td>*Allow a user to mouse drag/swipe to scoll through the Carousel* </td></tr><tr><td>Alt Style</td><td>*Alters the amount of padding between each image within the block*</td></tr><tr><td>Caption on Right?</td><td>*Choose to show the Summary text below the image, or to the right of the image*</td></tr><tr><td>Auto-play</td><td>*Set the Carousel to auto scroll*</td></tr><tr><td>Loop?</td><td>*Set the auto scroll on a loop*</td></tr></tbody></table>

### Advanced

#### 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).

# Hero

Use this block to add large rotating banners with linked products.

There are also other blocks which can be used to add images:

- [Image](https://bookstack.iconography.co.uk/books/general/page/image "Image") (simple images)
- [Carousel](https://bookstack.iconography.co.uk/books/general/page/carousel "Carousel") (small images on a swipeable carousel)
- [Parallax](https://bookstack.iconography.co.uk/books/general/page/parallax "Parallax") (an image that sits behind content, adding depth to a page)
- [Feature](https://bookstack.iconography.co.uk/books/general/page/feature "Feature") (a styled image)
- [Multi-Feature](https://bookstack.iconography.co.uk/books/general/page/multi-feature "Multi-Feature") (multiple static images in a single block)
- [Wide Feature](https://bookstack.iconography.co.uk/books/general/page/wide-feature "Wide-Feature") (image with a block of text)

## Appearance

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

## Editing the Block

Each image has an expandable menu, allowing it to be edited individually.

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

Images may be dragged around to resequence them.

### Content

<table border="1" id="bkmrk-field-purpose-headin" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 49.881%;"></col><col style="width: 49.881%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Title</td><td>*Enter a short title - this will be output as a text overlay, on top of the image*</td></tr><tr><td>Link URL</td><td>*Enter a link URL - if populated, this will add a link to the image.* </td></tr><tr><td>Link Text</td><td>*Text to be shown with a button, if a link is set*

*If left blank, the whole image will act as a button*

</td></tr><tr><td>Additional Text</td><td>*Enter some short text - this will be output as a text overlay, on top of the image below the title*</td></tr><tr><td>Related Products</td><td>*Search for Products by name or SKU Code to link them to this hero image*

*They will display below the image*

*If you have multiple images in a Hero Block, the Products will change along with the image*

</td></tr><tr><td>Delete This Image?</td><td>*Use this control to delete an image*</td></tr></tbody></table>

Use the Image dialogue to select images to upload to this block.

### Settings


<table border="1" id="bkmrk-field-purpose-block-" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50.053%;"></col><col style="width: 50.053%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Block Width</td><td>*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>Visibility</td><td>*Set the block visibility from the list:*

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

</td></tr><tr><td>Text Colour</td><td>*Choose from:*

- *Auto (will select a high contrast automatically)*
- *Black*
- *White*

</td></tr><tr><td>Text Position</td><td>*Alter the alignment of the block text:*

- *Left*
- *Central*
- *Right*

</td></tr></tbody></table>

#### Additional Options

These options allow you to auto assign Products to Hero Images, without assigning specific Products.

<table border="1" id="bkmrk-field-purpose-invert" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 49.947%;"></col><col style="width: 49.947%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Include featured products</td><td>*Auto add featured products to the images in this Hero block*</td></tr><tr><td>Include recommended products</td><td>*Auto add recommended products to the images in this Hero block*</td></tr><tr><td>Include sale products</td><td>*Auto add sale products to the images in this Hero block*</td></tr></tbody></table>

### Advanced

#### 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).

# Parallax

Use this block to add an image that sits behind content, adding depth to a page.

There are also other blocks which can be used to add images:

- [Image](https://bookstack.iconography.co.uk/books/general/page/image "Image") (simple images)
- [Carousel](https://bookstack.iconography.co.uk/books/general/page/carousel "Carousel") (small images on a swipeable carousel)
- [Hero](https://bookstack.iconography.co.uk/books/general/page/hero "Hero") (large rotating banners)
- [Feature](https://bookstack.iconography.co.uk/books/general/page/feature "Feature") (a styled image)
- [Multi-Feature](https://bookstack.iconography.co.uk/books/general/page/multi-feature "Multi-Feature") (multiple static images in a single block)
- [Wide Feature](https://bookstack.iconography.co.uk/books/general/page/wide-feature "Wide-Feature") (image with a block of text)

## Appearance

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

## Editing the Block

### Content

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

*It will appear as a caption, below the image*

</td></tr><tr><td>Link</td><td>*Enter a link URL - if populated, this will add a link to the image.* </td></tr><tr><td>Link Text</td><td>*Text to be shown with a button, if a link is set*

*If left blank, the whole image will act as a button*

</td></tr><tr><td>Delete Image</td><td>*Use the tick box to delete an image - you will be asked to confirm your action*</td></tr></tbody></table>

Use the Image dialogue to select images to upload to this block.

### Settings


<table border="1" id="bkmrk-field-purpose-block-" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50.053%;"></col><col style="width: 50.053%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Block Width</td><td>*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>Visibility</td><td>*Set the block visibility from the list:*

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

</td></tr><tr><td>Text Position</td><td>*Alter the alignment of the block text:*

- *Left*
- *Central*
- *Right*

</td></tr><tr><td>Text Colour</td><td>*Choose from:*

- *Auto (will select a high contrast automatically)*
- *Black*
- *White*

</td></tr></tbody></table>

#### Additional Options

<table border="1" id="bkmrk-field-purpose-invert" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 49.947%;"></col><col style="width: 49.947%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Full Screen</td><td>*Toggle a large or small version of the parallax image*</td></tr><tr><td>Box?</td><td>*Toggle a box to surround the text*</td></tr><tr><td>Filter?</td><td>*Toggle a filter on the image, which will make it darker if applied*

*This should be used to ensure high contrast between the image and overlaid text*

</td></tr></tbody></table>

### Advanced

#### 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).

# 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).

# Feature

Use this block to add a styled image.

There are also other blocks which can be used to add images:

- [Image](https://bookstack.iconography.co.uk/books/general/page/image "Image") (simple images)
- [Carousel](https://bookstack.iconography.co.uk/books/general/page/carousel "Carousel") (small images on a swipeable carousel)
- [Hero](https://bookstack.iconography.co.uk/books/general/page/hero "Hero") (large rotating banners)
- [Parallax](https://bookstack.iconography.co.uk/books/general/page/parallax "Parallax") (an image that sits behind content, adding depth to a page)
- [Multi-Feature](https://bookstack.iconography.co.uk/books/general/page/multi-feature "Multi-Feature") (multiple static images in a single block)
- [Wide Feature](https://bookstack.iconography.co.uk/books/general/page/wide-feature "Wide-Feature") (image with a block of text)

## Appearance

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

## Editing the Block

<p class="callout info">Styling will be applied to this block as part of your website build - this will then remain constant across all pages.</p>

### Content

<table border="1" id="bkmrk-field-purpose-headin" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50.0477%;"></col><col style="width: 50.0477%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Heading</td><td>*Enter a short title - this will be output as a text overlay, on top of the image*</td></tr><tr><td>Additional Text</td><td>*Enter some short text - this will be output as a text overlay, on top of the image below the title*</td></tr><tr><td>Link URL</td><td>*Enter a link URL - if populated, this will add a link to the image.* </td></tr><tr><td>Link Text</td><td>*Text to be shown with a button, if a link is set*

*If left blank, the whole image will act as a button*

</td></tr><tr><td>Delete This Image?</td><td>*Use this control to delete an image*</td></tr></tbody></table>

Use the Image dialogue to select images to upload to this block.

### Settings


<table border="1" id="bkmrk-field-purpose-block-" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50.053%;"></col><col style="width: 50.053%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Block Width</td><td>*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>Mobile Width</td><td>*Choose from:*

- *33%*
- *50%*
- *100%*

</td></tr><tr><td>Visibility</td><td>*Set the block visibility from the list:*

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

</td></tr><tr><td>Text Colour</td><td>*Choose from:*

- *Auto (will select a high contrast automatically)*
- *Black*
- *White*

</td></tr></tbody></table>

#### Additional Options

These options allow you to auto assign Products to Hero Images, without assigning specific Products.

<table border="1" id="bkmrk-field-purpose-invert" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 49.947%;"></col><col style="width: 49.947%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Text underneath</td><td>*Output the text beneath the image, instead of over the image*</td></tr><tr><td>Text central</td><td>*Output the text centrally on the image*</td></tr><tr><td>Do not crop to fit</td><td>*Toggle to retain the aspect ratio of the image uploaded*</td></tr></tbody></table>

### Advanced

#### 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).

# Multi-Feature

Use this block to add multiple static images in a single block.

There are also other blocks which can be used to add images:

- [Image](https://bookstack.iconography.co.uk/books/general/page/image "Image") (simple images)
- [Carousel](https://bookstack.iconography.co.uk/books/general/page/carousel "Carousel") (small images on a swipeable carousel)
- [Hero](https://bookstack.iconography.co.uk/books/general/page/hero "Hero") (large rotating banners)
- [Parallax](https://bookstack.iconography.co.uk/books/general/page/parallax "Parallax") (an image that sits behind content, adding depth to a page)
- [Feature](https://bookstack.iconography.co.uk/books/general/page/feature "Feature") (a styled image)
- [Wide Feature](https://bookstack.iconography.co.uk/books/general/page/wide-feature "Wide-Feature") (image with a block of text)

## Appearance

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

## Editing the Block

<p class="callout info">To best configure this block, it is important to select your layout under Settings (see below) before you upload any images</p>

Each image has an expandable menu, allowing it to be edited individually.

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

### Content

<table border="1" id="bkmrk-field-purpose-headin" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50.0477%;"></col><col style="width: 50.0477%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Heading</td><td>*Enter a short title - this will be output as a text overlay, on top of the image*</td></tr><tr><td>Text</td><td>*Enter some short text - this will be output as a text overlay, on top of the image below the title*</td></tr><tr><td>Link URL</td><td>*Enter a link URL - if populated, this will add a link to the image.* </td></tr><tr><td>Link Text</td><td>*Text to be shown with a button, if a link is set*

*If left blank, the whole image will act as a button*

</td></tr><tr><td>Delete This Image?</td><td>*Use this control to delete an image*</td></tr></tbody></table>

Use the Image dialogue to select images to upload to this block.

### Settings


<table border="1" id="bkmrk-field-purpose-block-" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50.053%;"></col><col style="width: 50.053%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Block Width</td><td>*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>Visibility</td><td>*Set the block visibility from the list:*

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

</td></tr><tr><td>Text Colour</td><td>*Choose from:*

- *Auto (will select a high contrast automatically)*
- *Black*
- *White*

</td></tr><tr><td>Layout</td><td>*Use the control to select the layout - this may alter the number of images in this block*

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

</td></tr><tr><td>Gap</td><td>*Choose the number of pixels between the images within this block*

</td></tr></tbody></table>

#### Additional Options

These options allow you to auto assign Products to Hero Images, without assigning specific Products.

<table border="1" id="bkmrk-field-purpose-invert" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50.0477%;"></col><col style="width: 50.0477%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Text central</td><td>*Output the text centrally on the image*</td></tr></tbody></table>

### Advanced

#### 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).

# Wide-Feature

Use this block to add image with a block of text.

There are also other blocks which can be used to add images:

- [Image](https://bookstack.iconography.co.uk/books/general/page/image "Image") (simple images)
- [Carousel](https://bookstack.iconography.co.uk/books/general/page/carousel "Carousel") (small images on a swipeable carousel)
- [Hero](https://bookstack.iconography.co.uk/books/general/page/hero "Hero") (large rotating banners)
- [Parallax](https://bookstack.iconography.co.uk/books/general/page/parallax "Parallax") (an image that sits behind content, adding depth to a page)
- [Feature](https://bookstack.iconography.co.uk/books/general/page/feature "Feature") (a styled image)
- [Multi-Feature](https://bookstack.iconography.co.uk/books/general/page/multi-feature "Multi-Feature") (multiple static images in a single block)

## Appearance

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

## Editing the Block

### Content

<table border="1" id="bkmrk-field-purpose-headin" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50.0477%;"></col><col style="width: 50.0477%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Heading</td><td>*Enter a short title - this will be output as a text overlay, on top of the image*</td></tr><tr><td>Additional Text</td><td>*Enter some short text - this will be output as a text overlay, on top of the image below the title*</td></tr><tr><td>Link URL</td><td>*Enter a link URL - if populated, this will add a link to the image.* </td></tr><tr><td>Link Text</td><td>*Text to be shown with a button, if a link is set*

*If left blank, the whole image will act as a button*

</td></tr><tr><td>Delete This Image?</td><td>*Use this control to delete an image*</td></tr></tbody></table>

Use the Image dialogue to select images to upload to this block.

### Settings


<table border="1" id="bkmrk-field-purpose-block-" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50.0477%;"></col><col style="width: 50.0477%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Block Width</td><td>*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>Visibility</td><td>*Set the block visibility from the list:*

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

</td></tr><tr><td>Background colour</td><td>*Choose a background colour for your image*

*Choose from recommended colours, or use a colour picker*

</td></tr></tbody></table>

#### Additional Options

These options allow you to auto assign Products to Hero Images, without assigning specific Products.

<table border="1" id="bkmrk-field-purpose-invert" style="border-collapse: collapse; width: 100%; border-width: 1px; height: 118.4px;"><colgroup><col style="width: 50.0477%;"></col><col style="width: 50.0477%;"></col></colgroup><thead><tr style="height: 29.6px;"><td style="height: 29.6px;">Field</td><td style="height: 29.6px;">Purpose</td></tr></thead><tbody><tr style="height: 29.6px;"><td style="height: 29.6px;">Invert text colour</td><td style="height: 29.6px;">*Toggle to invert the text colour*</td></tr><tr style="height: 29.6px;"><td style="height: 29.6px;">Do not crop to fit</td><td style="height: 29.6px;">*Toggle to retain the aspect ratio of the image uploaded*</td></tr><tr style="height: 29.6px;"><td style="height: 29.6px;">Reverse layout</td><td style="height: 29.6px;">*swap the position of the image and the text*</td></tr></tbody></table>

### Advanced

#### 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).

# Products

Use this to insert blocks of Products onto your page.

This will add live products to your page, so if any product data is updated, this page will also be automatically updated.

Disabled products are not shown within the block; add automated products to fill any gaps (see below for more details)

## Appearance

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

### Content

<table border="1" id="bkmrk-field-purpose-headin" style="border-collapse: collapse; width: 100%; height: 349.903px;"><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: 46.4722px;"><td style="height: 46.4722px;">Heading</td><td style="height: 46.4722px;">*Enter a short block title - this will show above the main content of the block*</td></tr><tr style="height: 46.4722px;"><td style="height: 46.4722px;">Search Product</td><td style="height: 46.4722px;">*Use this to search for specific products to display within this block*</td></tr><tr><td>Selected Category</td><td>*Select a Category - this will filter automated Products*

*If left blank, no filter will be applied*

</td></tr><tr><td>Selected Brand</td><td>*Select a Brand - this will filter automated Products*

*If left blank, no filter will be applied*

</td></tr><tr><td>Link URL</td><td>*Enter a link URL - if populated, this will add a call to action below the content of the block.*

</td></tr><tr><td>Link Text</td><td>*Enter link text - if populated, this will change the text in a call to action below the content of the block*

*If left blank, the button will read 'More'*

</td></tr></tbody></table>

### Settings

<table border="1" id="bkmrk-field-purpose-block-" style="width: 92.7381%;"><thead><tr><td style="width: 45.7196%;">Field</td><td style="width: 54.2662%;">Purpose</td></tr></thead><tbody><tr><td style="width: 45.7196%;">Block Width</td><td style="width: 54.2662%;">*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.7196%;">Visibility</td><td style="width: 54.2662%;">*Set the block visibility from the list:*

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

</td></tr><tr><td style="width: 45.7196%;">Heading Position</td><td style="width: 54.2662%;">*Alter the alignment of the block header:*

- *Left*
- *Central*
- *Right*

</td></tr><tr><td style="width: 45.7196%;">Display</td><td style="width: 54.2662%;">- *Default*
- *Scroller*
- *List*

</td></tr><tr><td style="width: 45.7196%;">Border Colour</td><td style="width: 54.2662%;">*Choose from:*

- *Default*
- *Grey*
- *Red*
- *Black*

</td></tr><tr><td style="width: 45.7196%;">Max Rows</td><td style="width: 54.2662%;">*Select the maximum number of rows to appear:*

- *Unlimited*
- *1*
- *2*
- *3*
- *4*

</td></tr></tbody></table>

#### Additional Options

<p class="callout info">These controls should be used in conjunction with the Category and Brand filters in the Content section</p>

<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><td>Include featured products?</td><td>*Auto add featured products to the images in this content block*</td></tr><tr><td>Include home products?</td><td>*Auto add products marked as 'home page featured' to this content block*</td></tr><tr><td>Include recommended products?</td><td>*Auto add recommended products to the images in this content block*</td></tr><tr><td>Include hot this week products?</td><td>*Auto add 'hot this week' products to this content block*</td></tr><tr><td>Include most searched products?</td><td>*Auto add 'most searched' products to this content block*

</td></tr><tr><td>Include sale products?</td><td>*Auto add sale products to the images in this content block*</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).

# Video

Use this to add a video to your page.

## Appearance

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

## Editing the Block

### Content

See here for more information about locating the Video IDs for Youtube and Vimeo.

<table border="1" id="bkmrk-field-purpose-headin" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50.0596%;"></col><col style="width: 50.0596%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Heading</td><td>*Enter a short block title - this will show above the main content of the block*</td></tr><tr><td>Video ID</td><td>*Enter the unique ID of the video you wish to add*  
</td></tr><tr><td>Video Type</td><td>Choose from:

- Youtube
- Vimeo

</td></tr></tbody></table>

### Settings

<table border="1" id="bkmrk-field-purpose-block-" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50.0596%;"></col><col style="width: 50.0596%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Block Width</td><td>*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>Visibility</td><td>*Set the block visibility from the list:*

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

</td></tr><tr><td>Heading Position</td><td>*Alter the alignment of the block header:*

<div aria-label="Page Section Options" class="pointer-container" id="bkmrk-%C2%A0" refs="pointer@pointer" tabindex="-1"><div class="pointer flex-container-row items-center justify-space-between p-s anim is-page-editable"><div class="flex-container-row items-center gap-s" refs="pointer@mode-section"><button class="text-button icon px-xs" title="Permalink mode, Press to show include tag"><svg class="svg-icon" data-icon="link" role="presentation" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5"></path></svg></button><div class="input-group"> <button class="button outline icon" title="Copy Link" type="button"><svg class="svg-icon" data-icon="copy" role="presentation" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"></path></svg></button></div></div>[<svg class="svg-icon" data-icon="edit" role="presentation" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>](https://bookstack.iconography.co.uk/books/general/page/text-blocks/edit?content-id=bkmrk-left-central-right&content-text=%0ALeft%0ACentral%0ARight%0A "Jump to section in editor")</div></div>- *Left*
- *Central*
- *Right*

</td></tr></tbody></table>

#### Additional Options

<table border="1" id="bkmrk-field-purpose-auto-p" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Auto-play?</td><td>*Toggle auto-play for the video (e.g. if the video automatically plays on page load)*</td></tr><tr><td>Loop?</td><td>*Toggle whether the video will or will not loop*</td></tr></tbody></table>

### Advanced

#### 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).

# Enquiry Form

Use this to add an Enquiry Form to any page.

<p class="callout warning">To use this content block, you must first have set up the [Form](https://bookstack.iconography.co.uk/books/forms) that you wish to embed.</p>

## Appearance

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

## Editing the Block

### 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 - this will show above the main content of the block*</td></tr><tr><td>Body Text</td><td>*Enter some short text that will show above the form*</td></tr><tr><td>Form Template</td><td>*Select you Form Template from the list*</td></tr></tbody></table>

### Settings

<table border="1" id="bkmrk-field-purpose-block-" style="width: 92.7381%;"><thead><tr><td style="width: 45.7196%;">Field</td><td style="width: 54.2662%;">Purpose</td></tr></thead><tbody><tr><td style="width: 45.7196%;">Block Width</td><td style="width: 54.2662%;">*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.7196%;">Visibility</td><td style="width: 54.2662%;">*Set the block visibility from the list:*

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

</td></tr><tr><td style="width: 45.7196%;">Heading Position</td><td style="width: 54.2662%;">*Alter the alignment of the block header:*

- *Left*
- *Central*
- *Right*

</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).

# Raw HTML

Use this content block to embed raw HTML and third party code, e.g. for a Google Map.

<p class="callout danger">Embedding third party code is risky and may cause harm to your website</p>

<p class="callout warning">You may have to contact Iconography prior to using these blocks, as third party domains will be blocked unless they have been whitelisted, e.g. for a Google Map</p>

## Appearance

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

## Editing the Block

### 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;">HTML</td><td style="height: 46.4722px;">*Paste your HTML into here*</td></tr></tbody></table>

### Settings

<table border="1" id="bkmrk-field-purpose-block-" style="width: 92.7381%;"><thead><tr><td style="width: 45.7196%;">Field</td><td style="width: 54.2662%;">Purpose</td></tr></thead><tbody><tr><td style="width: 45.7196%;">Block Width</td><td style="width: 54.2662%;">*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.7196%;">Visibility</td><td style="width: 54.2662%;">*Set the block visibility from the list:*

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

</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).

# Group

Group blocks are used to create nested collections of blocks; they may also be given a background colour, allowing you to break up the appearance of a page.

Blocks may be moved within a group, or the block may be moved on the page, which will update move its contents too.

<p class="callout info">Adjusting a Group will adjust the blocks within it as well, e.g. reducing the width of the Group will make the blocks within it smaller, or changing the background colour of the Group will override the background colour of blocks within it. </p>

To add a block to a Group, simply drag and drop it over the Group.

## Appearance

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

## Editing the Block

### Settings


<table border="1" id="bkmrk-field-purpose-block-" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 49.881%;"></col><col style="width: 49.881%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Block Width</td><td>*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>Visibility</td><td>*Set the block visibility from the list:*

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

</td></tr><tr><td>Background Colour</td><td>*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-invert" style="border-collapse: collapse; width: 100%; border-width: 1px;"><colgroup><col style="width: 49.947%;"></col><col style="width: 49.947%;"></col></colgroup><thead><tr><td>Field</td><td>Purpose</td></tr></thead><tbody><tr><td>Invert text colour</td><td>*Toggle to invert the text colour*</td></tr><tr><td>Content contained?</td><td>*Toggle to contain the Content - this will affect the maximum width available to the content in the Group*</td></tr></tbody></table>

### Advanced

#### 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).

# Margin

The margin will add additional space around the current block.

### Margin (Left &amp; Right)

#### No Margin

The block fills it's width (in this case, 100%).

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

#### With Margin

The width of the block is reduced by the left/right margin (in this case, 75px).

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

### Margin (Top &amp; Bottom)

#### No Margin

The blocks are touching, with no gaps.

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

#### With Margin

There is now a gap between the blocks.

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

# Padding

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

### Padding (Left &amp; Right)

Add left and right padding to indent the content.

#### No Padding

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

#### With Padding

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

### Padding (Top &amp; Bottom)

Adding padding to the top of bottom of the block will adjust the height of the block:

#### No Padding

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

#### With Padding

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