Grid Reference

See all pages: Table of Contents

Basic Grid

This grid uses no special variant class. It has a simple layout of items with no padding (the default), and no nested grids. It has a maximum width set for 960px by default which can be useful for constraining overall layouts. Add multiple rows of items to the same grid - there's no need to add a new Grid component for each row (they'll wrap on their own based on the widths you set).

Grid with Padding

This is the same grid as before, except we've applied 'Right Padding' to the first two items, and 'Large Right Padding' to the 4th item. Set item width, padding, and more on the Grid component itself. Other padding options include left, top, bottom, left and right, top and bottom.

Two Column Grid Layout

This grid uses the 'Two Columns (Large Left)' setting in the second tab of the Grid component. When setting up a Two-Column Layout, you don't need to set the border or padding on the individual items, just set widths of 66% and 33% respectively.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Duis efficitur lorem quis lorem pulvinar suscipit. Nam vestibulum iaculis aliquam. Nullam faucibus commodo ante, in volutpat dolor fringilla in. Fusce erat augue, efficitur ut feugiat et, malesuada vel tortor. Vivamus in vehicula turpis. Praesent porttitor pellentesque lorem, vel consequat lectus dictum at. Praesent convallis convallis sem, suscipit interdum tellus condimentum nec. Aenean nunc sapien, malesuada sed tincidunt in, laoreet at orci. Maecenas tempus, enim non hendrerit ornare, erat erat pulvinar orci, et convallis purus urna eget nulla. Duis tincidunt, nisi vitae efficitur viverra, arcu risus tristique mi, et convallis sapien nisi nec nisl. Fusce non augue vitae elit condimentum scelerisque sit amet in orci. Integer interdum sem eget lorem consectetur, vitae condimentum mi tempor.

Ut nec mi nunc.

Aenean feugiat nulla vel magna gravida, eu fringilla velit consectetur. In in urna enim. Praesent sodales metus sapien, sit amet posuere eros porta in. Etiam aliquam elit sollicitudin luctus semper. Vestibulum tincidunt suscipit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Sed ut sollicitudin neque, et ultricies justo. Sed quis pulvinar ipsum, non vulputate tellus. Donec lacus enim, ullamcorper quis tristique a, scelerisque id nunc. Vivamus sed dapibus augue. Nunc ultricies sit amet est a commodo. Cras vel tellus sollicitudin, ullamcorper dui eget, condimentum est. Proin quis ante euismod purus tempus tempor id ut magna. Etiam hendrerit tincidunt est.

Morbi egestas eu orci ac tincidunt. Phasellus nec tincidunt est. Maecenas sit amet pharetra mi, tincidunt tincidunt tellus. Nulla scelerisque id lectus et consectetur. Sed vestibulum lectus facilisis nunc faucibus, a rhoncus tortor venenatis. In sed nisl tincidunt ligula commodo pulvinar at quis justo. Aenean sit amet tristique diam. In vestibulum nisi nunc, non laoreet nibh commodo eget. Sed ac nulla eget turpis malesuada tincidunt id sed dui. Nunc tincidunt malesuada dignissim. Sed bibendum ut metus vel tempor. Sed bibendum semper auctor. Etiam sit amet ipsum lacus. Fusce ultrices diam vel maximus fringilla.

Aenean vel massa ut ante tincidunt ultrices tincidunt quis magna. Sed vitae sodales risus. Mauris ex leo, convallis quis malesuada ut, aliquet at lacus. Donec posuere lacus ac dui mollis, eget tempor purus consequat. Donec et ligula quam. Vestibulum scelerisque elit enim, non volutpat libero porta vel. Quisque dignissim quam vel tortor faucibus cursus. Integer maximus volutpat mauris, id pulvinar eros fermentum a. Proin non facilisis ex. In fermentum posuere risus, et fermentum elit fringilla sed. Cras finibus neque id rutrum ornare. Aliquam porta nisl ac hendrerit sollicitudin. Praesent placerat ante sit amet blandit pretium. Maecenas quam nisi, vulputate sit amet porta sit amet, fermentum vel erat. Maecenas tincidunt vehicula justo ac viverra.

Landing Page Tiles Grid

To create a landing page with a grid of promo tiles, use the 'Landing Page Tiles' grid variant. Add 'Padding All Around' setting to each of your items. Set widths for tiles as you like.

Here's a guide for the image sizing:

For items which are full width on desktop:
620x506px for mobile, 945x245px for desktop (1024 breakpoint)
For items which are 2/3 width on desktop:
620x506px for mobile, 620x245px for desktop (640 breakpoint)
For items which are 1/3 width on desktop:
620x506px for all resolutions (or switch down to 300x245 on desktop to save on bandwidth)