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>.

You can then apply a layout modifier class:

  • rc-one-column
  • rc-two-column
  • rc-three-column
  • rc-four-column
  • rc-five-column

There are also other useful modifier classes: (See examples below)

  • rc-match-heights
  • rc-reverse-layout
  • rc-content-h-top
  • rc-content-h-middle
  • rc-content-h-bottom
  • rc-flex-start
  • rc-flex-end

To align text, the following modifier classes can be used:

  • rc-text--left
  • rc-text--right
  • rc-text--center

1 / 1

html
            <div class="rc-layout-container rc-one-column">
  <div class="rc-column">
    <h1 class="rc-espilon">1 / 1</h1>
  </div>
</div>
        

1 / 2

1 / 2

html
            <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>
        

1 / 3

1 / 3

1 / 3

html
            <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>
        

1 / 4

1 / 4

1 / 4

1 / 4

html
            <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>
        

1 / 5

1 / 5

1 / 5

1 / 5

1 / 5

html
            <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>
        

1 / 6

1 / 6

1 / 6

1 / 6

1 / 6

1 / 6

html
            <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>
        

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.

  • rc-double-width
  • rc-triple-width
  • rc-quad-width

2 / 3

1 / 3

html
            <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>
        

3 / 5

2 / 5

html
            <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">
    <h1 class="rc-espilon">2 / 5</h1>
  </div>
</div>
        

1 / 5

4 / 5

html
            <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>
        

Layout Order Modifiers

There are some modifiers to help make these layouts more flexible.

  • 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

1 / 2

1 / 2

html
            <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>
        

1 / 2

1 / 3

1 / 3

html
            <div class="rc-layout-container rc-three-column rc-stacked">
  <div class="rc-column">
    <h1 class="rc-espilon">1 / 2</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>
        

1 / 3

2 / 3

html
            <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>
        

1 / 3

2 / 3

html
            <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>
        

Layout Alignment Utilities

There are some utility classes to help align content within the container.

  • 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

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.

html
            <div class="rc-layout-container rc-three-column">
  <div class="rc-column">
    <p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
  </div>
  <div class="rc-column">
    <p>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>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>
        

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.

html
            <div class="rc-layout-container rc-three-column rc-content-h-bottom">
  <div class="rc-column">
    <p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
  </div>
  <div class="rc-column">
    <p>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>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>
        

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.

html
            <div class="rc-layout-container rc-three-column rc-content-h-top">
  <div class="rc-column">
    <p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
  </div>
  <div class="rc-column">
    <p>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>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>
        

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.

html
            <div class="rc-layout-container rc-three-column rc-content-h-middle">
  <div class="rc-column">
    <p>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
  </div>
  <div class="rc-column">
    <p>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>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>
        

Alignment Utilities

There are some utility classes to help align content within a container, for example aligning list items.

  • 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

  • List item
  • html
                <div class="rc-list rc-list--inline rc-content-v-left">
      <li class="rc-list__item">List item</li>
    </div>
            
  • List item
  • html
                <div class="rc-list rc-list--inline rc-content-v-middle">
      <li class="rc-list__item">List item</li>
    </div>
            
  • List item
  • html
                <div class="rc-list rc-list--inline rc-content-v-right">
      <li class="rc-list__item">List item</li>
    </div>
            

    Issues

    If you are having problems implementing this code, please submit an issue on our Github page.

    Github Octocat

    Feedback

    If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

    Slack logo