We are working on something new! Check it out here!

Basic list

Nullam quis risus eget urna mollis ornare vel eu leo.

Modifiers

  • .c-list--sm - Less vertical padding
  • .c-list--xs - Minimal vertical padding

Example

  • Malesuada Aenean Vulputate
  • Pharetra Tortor Commodo Porta
  • Sem Vehicula Ullamcorper
  • Venenatis Dapibus Etiam Bibendum
  • Ipsum Quam
  • Malesuada Aenean Vulputate
  • Pharetra Tortor Commodo Porta
  • Sem Vehicula Ullamcorper
  • Venenatis Dapibus Etiam Bibendum
  • Ipsum Quam
  • Malesuada Aenean Vulputate
  • Pharetra Tortor Commodo Porta
  • Sem Vehicula Ullamcorper
  • Venenatis Dapibus Etiam Bibendum
  • Ipsum Quam
<div class="grid">
 <div class="grid-s-12 grid-md-4">
     <ul class="c-list">
         <li class="c-list__item">
             Malesuada Aenean Vulputate
         </li>
         <li class="c-list__item">
             Pharetra Tortor Commodo Porta
         </li>
         <li class="c-list__item">
             Sem Vehicula Ullamcorper
         </li>
         <li class="c-list__item">
             Venenatis Dapibus Etiam Bibendum
         </li>
         <li class="c-list__item">
             Ipsum Quam
         </li>
     </ul>
 </div>
 <div class="grid-s-12 grid-md-4">
     <ul class="c-list c-list--lg">
         <li class="c-list__item">
             Malesuada Aenean Vulputate
         </li>
         <li class="c-list__item">
             Pharetra Tortor Commodo Porta
         </li>
         <li class="c-list__item">
             Sem Vehicula Ullamcorper
         </li>
         <li class="c-list__item">
             Venenatis Dapibus Etiam Bibendum
         </li>
         <li class="c-list__item">
             Ipsum Quam
         </li>
     </ul>
 </div>
 <div class="grid-s-12 grid-md-4">
     <ul class="c-list c-list--sm">
         <li class="c-list__item">
             Malesuada Aenean Vulputate
         </li>
         <li class="c-list__item">
             Pharetra Tortor Commodo Porta
         </li>
         <li class="c-list__item">
             Sem Vehicula Ullamcorper
         </li>
         <li class="c-list__item">
             Venenatis Dapibus Etiam Bibendum
         </li>
         <li class="c-list__item">
             Ipsum Quam
         </li>
     </ul>
 </div>
</div>
Source file: ~/source/sass/components/list/_list.scss

Active items

Nullam quis risus eget urna mollis ornare vel eu leo.

Example

  • Malesuada Aenean Vulputate
  • Pharetra Tortor Commodo Porta
  • Active item
  • Ipsum Quam
  • Ipsum Quam
<div class="grid">
 <div class="grid-s-12 grid-md-6">
     <ul class="c-list">
         <li class="c-list__item">
             Malesuada Aenean Vulputate
         </li>
         <li class="c-list__item">
             Pharetra Tortor Commodo Porta
         </li>
         <li class="c-list__item is-active">
             Active item
         </li>
         <li class="c-list__item">
             Ipsum Quam
         </li>
         <li class="c-list__item">
             Ipsum Quam
         </li>
     </ul>
 </div>
</div>
Source file: ~/source/sass/components/list/_list.scss

Disabled items

Nullam quis risus eget urna mollis ornare vel eu leo.

Example

  • Malesuada Aenean Vulputate
  • Pharetra Tortor Commodo Porta
  • Disabled item
  • Ipsum Quam
  • Ipsum Quam
<div class="grid">
 <div class="grid-s-12 grid-md-6">
     <ul class="c-list">
         <li class="c-list__item">
             Malesuada Aenean Vulputate
         </li>
         <li class="c-list__item">
             Pharetra Tortor Commodo Porta
         </li>
         <li class="c-list__item is-disabled">
             Disabled item
         </li>
         <li class="c-list__item">
             Ipsum Quam
         </li>
         <li class="c-list__item">
             Ipsum Quam
         </li>
     </ul>
 </div>
</div>
Source file: ~/source/sass/components/list/_list.scss

Nullam quis risus eget urna mollis ornare vel eu leo.

Buttons

Nullam quis risus eget urna mollis ornare vel eu leo.

Example

<div class="grid">
 <div class="grid-s-12 grid-md-6">
     <div class="c-list">
         <button class="c-list__item c-list__action">
             Malesuada Aenean Vulputate
         </button>
         <button class="c-list__item c-list__action">
             Pharetra Tortor Commodo Porta
         </button>
         <button class="c-list__item c-list__action is-active">
             Active button
         </button>
         <button class="c-list__item c-list__action is-disabled">
             Disabled button
         </button>
         <button class="c-list__item c-list__action">
             Ipsum Quam
         </button>
     </div>
 </div>
</div>
Source file: ~/source/sass/components/list/_list.scss

Flush

Nullam quis risus eget urna mollis ornare vel eu leo.

Modifiers

  • .c-list--flush - Remove borders

Example

  • Malesuada Aenean Vulputate
  • Pharetra Tortor Commodo Porta
  • Sem Vehicula Ullamcorper
  • Venenatis Dapibus Etiam Bibendum
  • Ipsum Quam
<div class="grid">
 <div class="grid-s-12 grid-md-6">
     <ul class="c-list c-list--flush">
         <li class="c-list__item">
             Malesuada Aenean Vulputate
         </li>
         <li class="c-list__item">
             Pharetra Tortor Commodo Porta
         </li>
         <li class="c-list__item">
             Sem Vehicula Ullamcorper
         </li>
         <li class="c-list__item">
             Venenatis Dapibus Etiam Bibendum
         </li>
         <li class="c-list__item">
             Ipsum Quam
         </li>
     </ul>
 </div>
</div>
Source file: ~/source/sass/components/list/_list.scss