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>
        

Standard grid for cards - fixed width

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

html
            <div class="rc-card-grid rc-match-heights rc-card-grid--fixed">
    <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>
        

Fixed columns for card grids

As an extension to the above, extra classes can be added to define the desired 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-four-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