Basic grid | .block
Flush grid (No grid gap) | .block + .block--flush
Maintain the grid columns in mobile views | .block + .block--mobile
Hide elements in mobile views | .shim
Design pattern utility:
This block is centered on the page, spanning 8 columns (offset by 2 on each side). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus tincidunt est id fringilla. .pattern__2-8-2
Another design pattern utility: this block is centered on the page, spanning 6 columns (offset by 3 on each side). .pattern__3-6-3
Full-width block | .block + .block--wide
Nested grid in a standard block
(Uses pattern__3-6-3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus tincidunt est id fringilla. In convallis commodo sem. Quisque ultricies purus et fermentum blandit. Pellentesque pellentesque est non ligula malesuada sodales. Aliquam auctor dui leo, sit amet ultrices lectus tempus euismod. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin dignissim at orci non vulputate.
STACKS ON STACKS
A bunch of columns in a block that auto-wrap