5.1 Card grid

A grid of cards of varying sizes. This is to demonstrate the grid and the way we can use breakpoints and columns to create a responsive site.

If any of your elements in the grid are not full width, you should add the class col-grid to the col- elements to ensure they are all the same height as each other.

View example page

5.8 Sidebar

A page with a sidebar that usually contains filtering or search options. Requires the following markup:

  • sidebar-wrapper (wrapping div)
    • sidebar-toggle - Button to toggle the visibility of the sidebar on mobile. Requires data-sidebar-toggle attribute.
    • sidebar - The sidebar itself. Requires data-sidebar attribute.
    • sidebar-content - The content that appears next to the sidebar. Requires data-sidebar-content attribute.

Also requires some JavaScript support (found in the source of this page)

View example page