skip to main content

Divider

Quick Links

Examples

Content

There are no content settings for this block

Block Name
This is a text input to add the block name to help distinguish between the content blocks. This is only seen on the CMS.

Settings

Divider Height
This is a number slider with options from 1 - 20, which will set the height of the divider.

Divider Colour
This is a dropdown with the eight colour options. It will set the background colour of the divider line.

Divider Border
This checkbox will give the divider line a border radius, making it curved on the ends.

General Block Settings

GRID SIZE
Full width
- A checkbox to select if the container is full viewport width

Grid size (Desktop) - A dropdown of options to choose the grid cell size at desktop size (Large - 12 columns, Medium - 10 columns, Small- 8 columns, X-Small- 6 columns, XX-Small- 4 columns)

Grid size (tablet) - A dropdown of options to choose the grid cell size at tablet size (Large - 12 columns, Medium - 10 columns, Small- 8 columns, X-Small- 6 columns, XX-Small- 4 columns)

 

GRID ALIGNMENT
Horizontal Grid Alignment
- The horizontal alignment of the block and items (Left, Right or Centre)

Vertical Grid Alignment - The vertical alignment of the block and items (Top, Middle or Bottom)

Items Align - Align the items of the block (Left, Right or Centre) - this will only be used on multi item blocks that are side-by-side

Content Text Align - Align the text of the block (Left, Right or Centre)

 

SPACING
The settings below all use the same values for desktop (None = 0px, X-Small = 10px, Small = 20px, Medium = 30px, Large = 50px, X-Large = 80px, XX-Large = 100px). Default is 0.

Padding Top
Padding Bottom
Margin Top
Margin Bottom

 

BACKGROUND
Background Colour
- Use the eye-drop picker to choose the background colour of the block.

Background Colour on Container - Set if background colour appears on container or main block (Default: Main block)

Background Image - Select image from media folder to display on background of the main block.

Background Image Position - The position of the background image, default will be top left. Select an option of keyword pairings to set the position.

Background Image Size - This will change the way the background image displays. 100% by default. Options (Auto, Contain, Cover)

Overlay Tint - Colour dropdown for overlay tint. Options (Primary, Secondary, Heading, Body font, Light grey, Dark grey, White, Black)

Overlay Tint Amount - Select the opacity of the overlay (0 = no tint, 100 = solid colour tint)

Block Font Colour - Adds a class to overwrite the font colour of the block.

 

VISIBILITY
Hide
- Hide this block (useful for working on a block while the site is live)

 

BLOCK ID
Block ID
- Add an ID to target this section with a link or for custom CSS

 

CUSTOM CLASSES
Custom Classes
- Add a custom class to the block