Quick Links
Examples
Content
Items
This is a list of accordion items
Role Closed Text
If a date has been set on an accordion item and the "Hide button" setting has been selected - then when the date expires this message will show.
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
Closing Date - Hide Items
If a date has been set on an accordion item and the "Hide Items" setting has been selected - then when the date expires this item will NOT show.
Closing Date - Hide Buttons
If a date has been set on an accordion item and the "Hide Buttons" setting has been selected - then when the date expires the "Role Closed Text" message will show in place of the buttons.
Accordion Border
This is a dropdown with two options: "Full" or "Top Bottom". "Full" will show the accordion with a border the whole way around each item. "Top Bottom" will show a border on the top and bottom but not on the sides.
Accordion Margin
This is a checkbox that will apply a bottom margin to each item.
Accordion Shadow
This is a checkbox that will apply a box shadow to each item.
Accordion Style
This is a dropdown with four options: "Arrow" or "Top Bottom". "Full" will show the accordion with a border the whole way around each item. "Top Bottom" will show a border on the top and bottom but not on the sides.
Accordion Background Colour
This is a dropdown with the eight colour options. It will set the background colour of all accordion items.
Accordion Font Colour
This is a dropdown with the eight colour options. It will set the font colour of all accordion item titles.
Accordion Font Size
This will set the font size of all accordion item titles. XX-Small
Accordion Title Uppercase
This checkbox will set the accordion title to uppercase.
Accordion Title Bold
This checkbox will set the accordion title to bold font weight.
Accordion Toggle Colour
This is a dropdown with the eight colour options. It will set the dropdown icon colour of all accordion items.
Accordion Button Side
This is a dropdown with the two options: "Left" or "Right". It will set the side of the dropdown icon for all accordion items.
Apply Button Background Colour
This is a dropdown with the eight colour options. It will set the apply button background colour of all accordion apply buttons.
Apply Button Font Colour
This is a dropdown with the eight colour options. It will set the apply button font colour of all accordion apply buttons.
Apply Button Hover Background Colour
This is a dropdown with the eight colour options. It will set the apply button background hover colour of all accordion apply buttons.
Apply Button Hover Font Colour
This is a dropdown with the eight colour options. It will set the apply button font hover colour of all accordion apply buttons.
Apply Button Arrow Type
This is a dropdown with the four arrow options: "Round", "Round-solid", "Short" and "Simple". If nothing is selected the arrow will not show.
Alt Button Background Colour
This is a dropdown with the eight colour options. It will set the alt button background colour of all accordion alt buttons.
Alt Button Font Colour
This is a dropdown with the eight colour options. It will set the alt button font colour of all accordion alt buttons.
Alt Button Hover Background Colour
This is a dropdown with the eight colour options. It will set the alt button background hover colour of all accordion alt buttons.
Alt Button Hover Font Colour
This is a dropdown with the eight colour options. It will set the alt button font hover colour of all accordion alt buttons.
Alt Button Arrow Type
This is a dropdown with the four arrow options: "Round", "Round-solid", "Short" and "Simple". If nothing is selected the arrow will not show.
Button Bold
This checkbox will set the accordion buttons to bold font weight.
Button Uppercase
This checkbox will set the accordion buttons to uppercase.
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