Layout components

The accordion component creates a collapsible section with a heading and a slot for content. Options are heading level and whether to open the accordion by default.

The accordion container component provides a way to group accordions. Multiple accordions placed in the same container will not have space between them and opening one accordion will close the others in the container.

The footer component provides a layout for the sitewide footer with four slots for content:

• Branding & Social
• Call to action
• Utility links
• Copyright

The grid component provides a simple way to place other components in a grid layout. It has one content slot and options for width, columns and columns on mobile.

The group component provides a way to group components together to create more complex layouts. The group has many options that make it flexible for controlling the layout of multiple components.

Some examples of uses for a group:

• Bundling components with a grid or section into a single column
• Placing multiple elements inline
• Offsetting elements with a different colored background
• Additional control of spacing between elements in any slot
• Adding padding around a single element

The navbar component provides a layout for the header with three slots for content:

• Site logo
• Navigation menu
• CTAs

CTAs are for optional buttons to place in the header. There is an option for menu alignment, either left, right or center.

The section component provides a more complex grid layout, with slots for a header and footer as well as a grid. It has many options including section width, number of columns, whether it contains a views grid, top and bottom margin and padding, background color and a background image.