Layout container
The Web Design Language grid system is made up of 5 column options. Each column should have a 12px gutter top, bottom, left and right to ensure correct spacing. Column counts can be mixed and the variations documented below will enable a wide range of column options.
Usage
To create a layout container apply the rc-layout-container class to a wrapper element with child elements using the rc-column class. Layout containers only cater for a single row layout, so please only add items to be displayed across one row. To avoid a horizontal scrollbar in cases where the layout container is used as a page layout or is a top-most DOM node, a wrapper container should be added with class rc-scroll--y. This should be added to a tag such as <main> or <div>, it will not directly work on <body>.
Basic Usage
You can then apply a layout modifier class
| Utility Class | Description |
|---|---|
| .rc-one-column | The children of this container will be 1/1 of the total width |
| .rc-two-column | The children of this container will be 1/2 of the total width |
| .rc-three-column | The children of this container will be 1/3 of the total width |
| .rc-four-column | The children of this container will be 1/4 of the total width |
| .rc-five-column | The children of this container will be 1/5 of the total width |
| .rc-six-column | The children of this container will be 1/6 of the total width |
Layout Modifiers
There are also other useful modifier classes - (See examples below)
| Utility Class | Description |
|---|---|
| .rc-match-heights | Forces the height of the columns to match their siblings |
| .rc-reverse-layout | Note how in the DOM the right-hand side item is actually first |
| .rc-content-h-top | Align content horizontally to the top of the container |
| .rc-content-h-middle | Align content horizontally to the middle of the container |
| .rc-flex-start | Align components to the start - particularly for multi column horizontal layouts |
| .rc-flex-end | Align components to the end - particularly for multi column horizontal layouts |
Text Alignment
To align text, the following modifier classes can be used
| Utility Class | Description |
|---|---|
| .rc-text--left | Forces the height of the columns to match their siblings |
| .rc-text--right | Note how in the DOM the right-hand side item is actually first |
| .rc-text--center | Align content horizontally to the top of the container |
These text alignment modifier classes can be breakpoint specific. (For example rc-text--center--sm-down will center text align from the sm breakpoint and smaller sizes)
To override the default padding and margin, you can use spacer utility classes (See here ). Few examples below:
Spacing Overrides
To align text, the following modifier classes can be used
| Utility Class | Description |
|---|---|
| .rc-padding--sm | Forces small padding on the container |
| .rc-padding--none | Forces no padding on the container |
| .rc-padding-x--sm--desktop | Forces small padding, left and right on the container on screens wider than 769px |
| .rc-margin--sm | Forces small margin on the container |
| .rc-margin--none | Forces no margin on the container |
| .rc-margin-x--sm--desktop | Forces small margin, left and right on the container on screens wider than 769px |
One column
1 / 1
<div class="rc-layout-container rc-one-column">
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 1 </h1>
</div>
</div>Copied!
Two columns
1 / 2
1 / 2
<div class="rc-layout-container rc-two-column">
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 2 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 2 </h1>
</div>
</div>Copied!
Three columns
1 / 3
1 / 3
1 / 3
<div class="rc-layout-container rc-three-column">
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 3 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 3 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 3 </h1>
</div>
</div>Copied!
Four columns
1 / 4
1 / 4
1 / 4
1 / 4
<div class="rc-layout-container rc-four-column">
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 4 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 4 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 4 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 4 </h1>
</div>
</div>Copied!
Five columns
1 / 5
1 / 5
1 / 5
1 / 5
1 / 5
<div class="rc-layout-container rc-five-column">
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 5 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 5 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 5 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 5 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 5 </h1>
</div>
</div>Copied!
Six columns
1 / 6
1 / 6
1 / 6
1 / 6
1 / 6
1 / 6
<div class="rc-layout-container rc-six-column">
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 6 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 6 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 6 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 6 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 6 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 6 </h1>
</div>
</div>Copied!
Layout Modifiers
To create variations in your layouts there are some modifier classes to span items across multiple columns. Simply add one of the below modifier classes on one of the rc-column within the container with the class layout-container.
Remember when you add these classes the total needs to add up to number of columns you have declared on the container. i.e three-column container with 2 child elements can have one of its items double-width, so in total the elements fill three columns.
Width Modifiers
| Utility Class | Description |
|---|---|
| .rc-double-width | This column will be 2X the column width |
| .rc-triple-width | This column will be 3X the column width |
| .rc-quad-width | This column will be 4X the column width |
Double width
2 / 3
1 / 3
<div class="rc-layout-container rc-three-column">
<div class="rc-column rc-double-width">
<h1 class="rc-espilon"> 2 / 3 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 3 </h1>
</div>
</div>Copied!
Triple width
3 / 5
2 / 5
<div class="rc-layout-container rc-five-column">
<div class="rc-column rc-triple-width">
<h1 class="rc-espilon"> 3 / 5 </h1>
</div>
<div class="rc-column rc-double-width">
<h1 class="rc-espilon"> 2 / 5 </h1>
</div>
</div>Copied!
Quad width
1 / 5
4 / 5
<div class="rc-layout-container rc-five-column">
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 5 </h1>
</div>
<div class="rc-column rc-quad-width">
<h1 class="rc-espilon"> 4 / 5 </h1>
</div>
</div>Copied!
Layout Order Modifiers
There are some modifiers to help make these layouts more flexible.
| Utility Class | Description |
|---|---|
| .rc-stacked | Stack columns on top of one another within a layout container |
| .rc-reverse-layout | Note how in the DOM the right-hand side item is actually first |
| .rc-reverse-layout-mobile | Same as the above but only activated at the mobile breakpoints |
| .rc-match-heights | Forces the height of the columns to match their siblings |
| .rc-flex-start | Align components to the start - particularly for multi column horizontal layouts |
| .rc-flex-end | Align components to the end - particularly for multi column horizontal layouts |
| .rc-flex-direction--reverse--*-* | Reverses order of components - requires breakpoint and direction from which to take effect (For example rc-flex-direction--reverse--md-up reverses components at the md breakpoint and all larger sizes) |
Two columns stacked
1 / 2
1 / 2
<div class="rc-layout-container rc-two-column rc-stacked">
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 2 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 2 </h1>
</div>
</div>Copied!
Three columns stacked
1 / 3
1 / 3
1 / 3
<div class="rc-layout-container rc-three-column rc-stacked">
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 3 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 3 </h1>
</div>
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 3 </h1>
</div>
</div>Copied!
Reverse order
1 / 3
2 / 3
<div class="rc-layout-container rc-reverse-layout rc-three-column">
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 3 </h1>
</div>
<div class="rc-column rc-double-width">
<h1 class="rc-espilon"> 2 / 3 </h1>
</div>
</div>Copied!
Reverse order on mobile
1 / 3
2 / 3
<div class="rc-layout-container rc-reverse-layout-mobile rc-three-column">
<div class="rc-column">
<h1 class="rc-espilon"> 1 / 3 </h1>
</div>
<div class="rc-column rc-double-width">
<h1 class="rc-espilon"> 2 / 3 </h1>
</div>
</div>Copied!
Layout Alignment Utilities
To align text, the following modifier classes can be used
| Utility Class | Description |
|---|---|
| .rc-content-h-top | Align content horizontally to the top of the container |
| .rc-content-h-bottom | Align content horizontally to the bottom of the container |
| .rc-content-h-middle | Align content horizontally to the middle of the container |
You can also use modified version of each class by adding --desktop or --mobile, for desktop or mobile only functionality.
Align to bottom
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
<div class="rc-layout-container rc-three-column rc-content-h-bottom">
<div class="rc-column">
<p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
</div>
<div class="rc-column">
<p class="">
Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
<br />
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
<br />
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<br />
Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.
</p>
</div>
<div class="rc-column">
<p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
</div>
</div>Copied!
Align to top
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo
Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo
<div class="rc-layout-container rc-three-column rc-content-h-top">
<div class="rc-column">
<p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo </p>
</div>
<div class="rc-column">
<p class="">
Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
<br />
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
<br />
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<br />
Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur
</p>
</div>
<div class="rc-column">
<p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo </p>
</div>
</div>Copied!
Align to middle
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
<div class="rc-layout-container rc-three-column rc-content-h-middle">
<div class="rc-column">
<p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
</div>
<div class="rc-column">
<p class="">
Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
<br />
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
<br />
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<br />
Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.
</p>
</div>
<div class="rc-column">
<p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
</div>
</div>Copied!
Self align each column
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
<div class="rc-layout-container rc-three-column">
<div class="rc-column rc-self-h-bottom">
<p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
</div>
<div class="rc-column rc-self-h-top">
<p class="">
Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
<br />
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
<br />
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<br />
Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.
</p>
</div>
<div class="rc-column rc-self-h-middle">
<p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
</div>
</div>Copied!
Alignment Utilities
There are some utility classes to help align content within a container, for example aligning list items.
| Utility Class | Description |
|---|---|
| .rc-content-v-left | Align content to the left of the container |
| .rc-content-v-middle | Align content to the middle of the container |
| .rc-content-v-right | Align content to the right of the container |
Align content left
Aligned column content
<div class="rc-padding--sm rc-content-v-left">
<h4 class="rc-delta">Aligned column content</h4>
</div>Copied!
Align content center
Aligned column content
<div class="rc-padding--sm rc-content-v-middle">
<h4 class="rc-delta">Aligned column content</h4>
</div>Copied!
Align content right
Aligned column content
<div class="rc-padding--sm rc-content-v-right">
<h4 class="rc-delta">Aligned column content</h4>
</div>Copied!