Grid 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 variations documented below will enable a wide range of column options.

Standard grid for cards

Adjusts it's self to balance the card width with the number of cards within each row. To prevent this auto-fit behaviour the class .rc-card-grid--fixed can be used.

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh.

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Kitten and puppy playing with ball

Meta 1

Headline

Kitten and puppy playing with ball

Headline

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh.

Kitten and puppy playing with ball

Headline

html
            <div class="rc-card-grid rc-match-heights">
    <div class="rc-grid">
        <article class="rc-card rc-card--a">
                <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
                <picture class="rc-card__image">
                  <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                </picture>
                <div class="rc-card__body">
                  <header>
                    <p class="rc-card__meta">Meta 1</p>
                    <h1 class="rc-card__title">Headline</h1>
                    <p class="rc-card__meta">Meta 2</p>
                  </header>
                  <p>Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh.</p>
                </div>
              </article>
    </div>
    <div class="rc-grid">
         <article class="rc-card rc-card--a">
                 <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
                 <picture class="rc-card__image">
                   <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                 </picture>
                 <div class="rc-card__body">
                   <header>
                     <p class="rc-card__meta">Meta 1</p>
                     <h1 class="rc-card__title">Headline</h1>
                     <p class="rc-card__meta">Meta 2</p>
                   </header>
                 </div>
               </article>
     </div>
    <div class="rc-grid">
        <article class="rc-card rc-card--a">
                <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
                <picture class="rc-card__image">
                  <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                </picture>
                <div class="rc-card__body">
                  <header>
                    <p class="rc-card__meta">Meta 1</p>
                    <h1 class="rc-card__title">Headline</h1>
                  </header>
                </div>
              </article>
    </div>
    <div class="rc-grid">
         <article class="rc-card rc-card--a">
                <picture class="rc-card__image">
                  <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                </picture>
                <div class="rc-card__body">
                  <header>
                    <h1 class="rc-card__title">Headline</h1>
                  </header>
                </div>
              </article>
     </div>
     <div class="rc-grid">
         <article class="rc-card rc-card--a">
           <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
           <picture class="rc-card__image">
             <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
           </picture>
           <div class="rc-card__body">
             <header>
               <p class="rc-card__meta">Meta 1</p>
               <h1 class="rc-card__title">Headline</h1>
               <p class="rc-card__meta">Meta 2</p>
             </header>
             <p>Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh.</p>
           </div>
         </article>
     </div>
     <div class="rc-grid">
      <article class="rc-card rc-card--a">
             <picture class="rc-card__image">
               <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
             </picture>
             <div class="rc-card__body">
               <header>
                 <h1 class="rc-card__title">Headline</h1>
               </header>
             </div>
           </article>
      </div>
</div>
        

Fixed columns for card grids

Adjusts it's self to balance the card width with the number of cards within each row. To prevent this auto-fit behaviour the class .rc-card-grid--fixed can be used.
Good practice is to add extra classes to define the desired number of columns. This means when there aren't enough items per row, the cards won't fill the remaining space. Classes:

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

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh.

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

html
            <div class="rc-card-grid rc-match-heights rc-card-grid--fixed rc-three-column">
    <div class="rc-grid">
        <article class="rc-card rc-card--a">
                <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
                <picture class="rc-card__image">
                  <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                </picture>
                <div class="rc-card__body">
                  <header>
                    <p class="rc-card__meta">Meta 1</p>
                    <h1 class="rc-card__title">Headline</h1>
                    <p class="rc-card__meta">Meta 2</p>
                  </header>
                  <p>Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh.</p>
                </div>
              </article>
    </div>
    <div class="rc-grid">
         <article class="rc-card rc-card--a">
                 <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
                 <picture class="rc-card__image">
                   <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                 </picture>
                 <div class="rc-card__body">
                   <header>
                     <p class="rc-card__meta">Meta 1</p>
                     <h1 class="rc-card__title">Headline</h1>
                     <p class="rc-card__meta">Meta 2</p>
                   </header>
                 </div>
               </article>
     </div>

</div>
        

Standard grid for cards - takes into account sidebar

Adjusts its self to balance the cards width with the number of cards within each row but also limits the total cards to three on older browsers to accomodate the reduced width. Newer browsers will smart fill the rows, ensuring items don't scale any smaller than 250px width.

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh.

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Kitten and puppy playing with ball

Meta 1

Headline

Kitten and puppy playing with ball

Headline

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh.

Kitten and puppy playing with ball

Headline

html
            <div class="rc-card-grid--withsidebar rc-match-heights">
    <div class="rc-grid">
        <article class="rc-card rc-card--a">
                <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
                <picture class="rc-card__image">
                  <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                </picture>
                <div class="rc-card__body">
                  <header>
                    <p class="rc-card__meta">Meta 1</p>
                    <h1 class="rc-card__title">Headline</h1>
                    <p class="rc-card__meta">Meta 2</p>
                  </header>
                  <p>Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh.</p>
                </div>
              </article>
    </div>
    <div class="rc-grid">
         <article class="rc-card rc-card--a">
                 <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
                 <picture class="rc-card__image">
                   <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                 </picture>
                 <div class="rc-card__body">
                   <header>
                     <p class="rc-card__meta">Meta 1</p>
                     <h1 class="rc-card__title">Headline</h1>
                     <p class="rc-card__meta">Meta 2</p>
                   </header>
                 </div>
               </article>
     </div>
    <div class="rc-grid">
        <article class="rc-card rc-card--a">
                <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
                <picture class="rc-card__image">
                  <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                </picture>
                <div class="rc-card__body">
                  <header>
                    <p class="rc-card__meta">Meta 1</p>
                    <h1 class="rc-card__title">Headline</h1>
                  </header>
                </div>
              </article>
    </div>
    <div class="rc-grid">
         <article class="rc-card rc-card--a">
                <picture class="rc-card__image">
                  <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                </picture>
                <div class="rc-card__body">
                  <header>
                    <h1 class="rc-card__title">Headline</h1>
                  </header>
                </div>
              </article>
     </div>
     <div class="rc-grid">
         <article class="rc-card rc-card--a">
           <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
           <picture class="rc-card__image">
             <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
           </picture>
           <div class="rc-card__body">
             <header>
               <p class="rc-card__meta">Meta 1</p>
               <h1 class="rc-card__title">Headline</h1>
               <p class="rc-card__meta">Meta 2</p>
             </header>
             <p>Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh.</p>
           </div>
         </article>
     </div>
     <div class="rc-grid">
      <article class="rc-card rc-card--a">
             <picture class="rc-card__image">
               <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
             </picture>
             <div class="rc-card__body">
               <header>
                 <h1 class="rc-card__title">Headline</h1>
               </header>
             </div>
           </article>
      </div>
</div>
        

Small cards grid

Used with small cards that only contain a small amount of information. Goes up to six items per row.

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Kitten and puppy playing with ball

Meta 1

Headline

Kitten and puppy playing with ball

Headline

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Kitten and puppy playing with ball

Headline

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Kitten and puppy playing with ball

Meta 1

Headline

Kitten and puppy playing with ball

Headline

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Kitten and puppy playing with ball

Headline

html
            <div class="rc-card-grid--small rc-match-heights">
 <div class="rc-grid">
        <article class="rc-card rc-card--a">
                <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
                <picture class="rc-card__image">
                  <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                </picture>
                <div class="rc-card__body">
                  <header>
                    <p class="rc-card__meta">Meta 1</p>
                    <h1 class="rc-card__title">Headline</h1>
                    <p class="rc-card__meta">Meta 2</p>
                  </header>
                </div>
              </article>
    </div>
    <div class="rc-grid">
         <article class="rc-card rc-card--a">
                 <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
                 <picture class="rc-card__image">
                   <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                 </picture>
                 <div class="rc-card__body">
                   <header>
                     <p class="rc-card__meta">Meta 1</p>
                     <h1 class="rc-card__title">Headline</h1>
                     <p class="rc-card__meta">Meta 2</p>
                   </header>
                 </div>
               </article>
     </div>
    <div class="rc-grid">
        <article class="rc-card rc-card--a">
                <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
                <picture class="rc-card__image">
                  <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                </picture>
                <div class="rc-card__body">
                  <header>
                    <p class="rc-card__meta">Meta 1</p>
                    <h1 class="rc-card__title">Headline</h1>
                  </header>
                </div>
              </article>
    </div>
    <div class="rc-grid">
         <article class="rc-card rc-card--a">
                <picture class="rc-card__image">
                  <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                </picture>
                <div class="rc-card__body">
                  <header>
                    <h1 class="rc-card__title">Headline</h1>
                  </header>
                </div>
              </article>
     </div>
     <div class="rc-grid">
         <article class="rc-card rc-card--a">
           <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
           <picture class="rc-card__image">
             <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
           </picture>
           <div class="rc-card__body">
             <header>
               <p class="rc-card__meta">Meta 1</p>
               <h1 class="rc-card__title">Headline</h1>
               <p class="rc-card__meta">Meta 2</p>
             </header>
           </div>
         </article>
     </div>
     <div class="rc-grid">
      <article class="rc-card rc-card--a">
             <picture class="rc-card__image">
               <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
             </picture>
             <div class="rc-card__body">
               <header>
                 <h1 class="rc-card__title">Headline</h1>
               </header>
             </div>
           </article>
      </div>
      <div class="rc-grid">
        <article class="rc-card rc-card--a">
                <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
                <picture class="rc-card__image">
                  <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                </picture>
                <div class="rc-card__body">
                  <header>
                    <p class="rc-card__meta">Meta 1</p>
                    <h1 class="rc-card__title">Headline</h1>
                    <p class="rc-card__meta">Meta 2</p>
                  </header>
                </div>
              </article>
    </div>
    <div class="rc-grid">
         <article class="rc-card rc-card--a">
                 <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
                 <picture class="rc-card__image">
                   <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                 </picture>
                 <div class="rc-card__body">
                   <header>
                     <p class="rc-card__meta">Meta 1</p>
                     <h1 class="rc-card__title">Headline</h1>
                     <p class="rc-card__meta">Meta 2</p>
                   </header>
                 </div>
               </article>
     </div>
    <div class="rc-grid">
        <article class="rc-card rc-card--a">
                <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
                <picture class="rc-card__image">
                  <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                </picture>
                <div class="rc-card__body">
                  <header>
                    <p class="rc-card__meta">Meta 1</p>
                    <h1 class="rc-card__title">Headline</h1>
                  </header>
                </div>
              </article>
    </div>
    <div class="rc-grid">
         <article class="rc-card rc-card--a">
                <picture class="rc-card__image">
                  <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
                </picture>
                <div class="rc-card__body">
                  <header>
                    <h1 class="rc-card__title">Headline</h1>
                  </header>
                </div>
              </article>
     </div>
     <div class="rc-grid">
         <article class="rc-card rc-card--a">
           <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
           <picture class="rc-card__image">
             <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
           </picture>
           <div class="rc-card__body">
             <header>
               <p class="rc-card__meta">Meta 1</p>
               <h1 class="rc-card__title">Headline</h1>
               <p class="rc-card__meta">Meta 2</p>
             </header>
           </div>
         </article>
     </div>
     <div class="rc-grid">
      <article class="rc-card rc-card--a">
             <picture class="rc-card__image">
               <img src="http://placehold.it/1920x1080" alt="Kitten and puppy playing with ball">
             </picture>
             <div class="rc-card__body">
               <header>
                 <h1 class="rc-card__title">Headline</h1>
               </header>
             </div>
           </article>
      </div>
</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

Changelog

  • 7th November 2018 [ui_assets/layouts/grid_container.yml]
    Update documentation for fixed width card grids.
  • 13th September 2018 [ui_assets/layouts/grid_container.yml]
    Spelling and grammar corrections
  • 11th September 2018 [ui_assets/layouts/grid_container.yml]
    spelling
  • 11th September 2018 [ui_assets/layouts/grid_container.yml]
    Correct language
  • 23rd August 2018 [ui_assets/layouts/grid_container.yml]
    Add example for grids with fixed width.
  • 22nd August 2018 [ui_assets/layouts/grid_container.yml]
    Add documentation about new grid fix class
  • 25th July 2018 [ui_assets/layouts/grid_container.yml]
    prefix match-heights
  • 25th July 2018 [ui_assets/layouts/grid_container.yml]
    prefix btn--action
  • 12th July 2018 [ui_assets/layouts/grid_container.yml]
    Correct duplicate prefixes.
  • 12th July 2018 [ui_assets/layouts/grid_container.yml]
    Prefixed classes throughout the portal with rc-.
  • 29th June 2018 [ui_assets/layouts/grid_container.yml]
    Amend menu text to singular not plural to be more consistent.
  • 29th June 2018 [ui_assets/layouts/grid_container.yml]
    Fix spelling error.
  • 14th June 2018 [ui_assets/layouts/grid_container.yml]
    Grid example and documentation updates.
  • 13th June 2018 [ui_assets/layouts/grid_container.yml]
    Update grid examples.