Description
The Slideout Block is a combination of a grid-based parent layout and a child section that effectively slides out to reveal hidden content.
Not to be confused with the Accordion Block (but they are similar!), this unique block with its nested containers allows you to build layouts inside the slideout section. These are activated when a user clicks to expand them. The key practical use is for team member bios and contact details. You could also use it for something like logos with slideout content about partners or funders. The Slideout Block keeps the page neat and tidy, with ample room to store key content.
Screenshots
Slideout Block (Parent)
Slideout Item Block (Child)
Settings – Slideout Block
Slideout Grid
Grid
This option is where you choose the number of block items in the parent grid layout. This is how many slideout blocks will appear left-to-right, so if you choose 3 you will have three blocks across the page.
Styles
Heading Style
This setting allows you to style the parent grid layout headings, using the heading styles set in Global Styles > Typography. Options range from H1 to H6.
Excerpt Style
This setting allows you to style the parent grid layout excerpt content from the type styles set in Global Styles > Typography.
Close Button Color
This setting allows you to designate the colour for the close button (“x” symbol) in the child slideout section, from your palette(s) set in Global Styles > Colours.
Hide Close Button
This setting allows you to hide the close button (“x” symbol) in the child slideout section.
Advanced
Additional CSS Class(es)
This allows you to enter a unique Class identifier, for custom CSS targeting within the theme to faciliate custom development. More about Theme Customizations.
It also enables the use of Foundry utility classes. More about Utility Classes.