Standard Grid
Grids are sections that can have multiple columns.
The number of columns can range from two to six on desktops, two to four on tablets and two to three on mobile. Grids can be used to list categories, elements, features or separate content.
The grid should have the full width of the screen with a maximum width of 1200-1400px.
Grid Sizing
> 2 Columns
Make sure all columns are equal in height. Always align the button to the bottom and the rest of the elements to the top.
Column Header
Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.Quisque at ex eget lacus bla.
Longer Column Header that spans two lines
Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.
> 3 Columns
Column Header
Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.
Read More
Column Header
Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.
Read More
Column Header
Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.
Read More> 4 Columns
Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.Quisque at ex eget lacus blandit elementum.
Read More
Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.Quisque at ex eget lacus blandit elementum.
Read More
Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.Quisque at ex eget lacus blandit elementum.
Read More
Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.Quisque at ex eget lacus blandit elementum.
Read More> 5 Columns
> 6 Columns
> Circular images
The grid may also be used with circular images (1:1 ratio)
Product Name
Product Name
Product Name
Product Name
Column Styling
To create the effect of “cards” or make the content pop out use:
- columns with white background on light-gray-background sections or
- columns with light gray background on white-background sections
Only use a blue background for the columns if you wish to emphasise the section.
You may use any of the primary colours, accent colour or Gray-500 for borders.
> Grid with Slider
A slider can be used instead of multiple columns to display more grid items
Column Header
Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.
Read More
Column Header
Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.
Read More
Column Header
Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.
Read More
Column Header
Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.Quisque at ex eget lacus blandit elementum. Praesent consectetur velit vel ligula iaculis, nec vulputate massa posuere.
Read More