Layout grids

All page layouts are composed to a 12-column grid which can be split in various ways to display different types of content.

Options have been included to control component order when the layout is stacked at small viewport widths. For example in some instances sidebar content should appear above main body content, while in other instances it should appear below. This depends on which element is more critical for users to see first: Meta information about an event might come first, while a related content card might come last.


o-grid o-grid--9/3

o-grid o-grid--9/3-switch


o-grid o-grid--3/9

o-grid o-grid--3/9-switch


o-grid o-grid--8/4

o-grid o-grid--8/4-switch


o-grid o-grid--4/8

o-grid o-grid--4/8-switch

8/3 (o-grid--float)

o-grid o-grid--8/3 o-grid--float

o-grid o-grid--8/3-switch o-grid--float

8/3 (o-grid--push)

o-grid o-grid--8/3 o-grid--push

o-grid o-grid--8/3-switch o-grid--push

3/8 (o-grid--pull)

o-grid o-grid--3/8 o-grid--pull

o-grid o-grid--3/8-switch o-grid--pull

4/7 (o-grid--push)

o-grid o-grid--4/7 o-grid--push

o-grid o-grid--4/7-switch o-grid--push