Scooter logo

Components

View on GitHub

Component classes are isolated, designed pieces of UI—things like buttons, inputs, avatars, and whatnot. In Scooter, components are built in a way that makes them relatively easy to restyle without breaking other parts of the CSS.

Banners

View on GitHub

Banners are used to display important information to the user. Typically, they are pinned to the top of the page, but may also be detached or appear anywhere in the page.

Banners come in four flavors:

  • neutral
  • success
  • warning
  • error
This is a neutral banner.
This is a success banner! You did it!
This is a warning banner. Something’s up.
This is an error banner. Go back to square one.
This is a floating or "unpinned" banner.
<div class="c-banner">
  This is a neutral banner.
</div>

<div class="c-banner c-banner--success">
  This is a success banner! You did it!
</div>

<div class="c-banner c-banner--warning">
  This is a warning banner. Something&rsquo;s up.
</div>

<div class="c-banner c-banner--error u-mar-bottom-m">
  This is an error banner. Go back to square one.
</div>

<div class="c-banner c-banner--unpinned">
  This is a floating or "unpinned" banner.
</div>

Buttons

View on GitHub

Buttons come in three flavors:

  • primary
  • secondary
  • tertiary

Buttons must use a modifier class to select a button type.

<p>
  <button class="c-btn c-btn--primary">Primary button</button>
  <button class="c-btn c-btn--secondary">Secondary button</button>
  <button class="c-btn c-btn--tertiary">Tertiary button</button>
</p>
<p>
  <button class="c-btn c-btn--primary" disabled>Disabled via "disabled" attribute</button>
  <button class="c-btn c-btn--secondary c-btn--disabled">Disabled via class</button>
  <button class="c-btn c-btn--tertiary" disabled>Disabled tertiary button</button>
</p>
<p>
  <button class="c-btn c-btn--primary c-btn--full">A full-width button</button>
</p>
<p>
  <button class="c-btn c-btn--primary c-btn--big">A big button</button>
</p>
<p>
  <button class="c-btn c-btn--secondary c-btn--big c-btn--full">A big, full-width button</button>
</p>

You can also create a button group for a series of buttons attached to one another. Adding the justify modifier makes the group fill its container and divides the space equally amongst the buttons.

<p>
  <div class="c-btn-group">
    <button class="c-btn c-btn--secondary">Button</button>
    <button class="c-btn c-btn--secondary">Button</button>
    <button class="c-btn c-btn--secondary">Button</button>
  </div>
</p>
<p>
  <div class="c-btn-group c-btn-group--justify">
    <button class="c-btn c-btn--secondary">Button</button>
    <button class="c-btn c-btn--secondary">Button</button>
    <button class="c-btn c-btn--secondary">Button</button>
  </div>
</p>

Badges

View on GitHub

Badges are most often used as counters, such as an indication of unread notifications. A badge can have a top-right modifier to pin it to the top-right corner of its parent.

Notifications 12

<p>Notifications <span class="c-badge">12</span></p>

Cards

View on GitHub

Cards are used to display and contain all sorts of content. Places you see cards today include the account dropdown menu and the "contact cards" in the shared folder modals.

Arrows

Cards can have arrow pointers attached to them with the `arrow` modifier. An additional directional class can be added from the following:

  • c-card--arrow-n (default)
  • c-card--arrow-nw
  • c-card--arrow-ne
  • c-card--arrow-s
  • c-card--arrow-sw
  • c-card--arrow-se
This is a card with some content.
This is a card with a North arrow

This is a card with a Northwest arrow.
You can nest components, you know.

This is a card with a Northeast arrow.
South arrow
Southwest arrow
Southeast arrow
<div class="u-mar-bottom-m">
  <div class="c-card">
    This is a card with some content.
  </div>

  <div class="c-card c-card--arrow">
    This is a card with a North arrow
  </div>
</div>

<div class="u-mar-bottom-m">
  <div class="c-card c-card--arrow c-card--arrow-nw">
    <p class="u-mar-bottom-s">This is a card with a Northwest arrow. <br/>You can nest components, you know.</p>
    <button class="c-btn c-btn--primary">Wow cool</button>
  </div>

  <div class="c-card c-card--arrow c-card--arrow-ne">
    This is a card with a Northeast arrow.
  </div>
</div>

<div class="u-mar-bottom-m">
  <div class="c-card c-card--arrow c-card--arrow-s">
    South arrow
  </div>
  <div class="c-card c-card--arrow c-card--arrow-sw">
    Southwest arrow
  </div>
  <div class="c-card c-card--arrow c-card--arrow-se">
    Southeast arrow
  </div>
</div>

Floating and selected cards

Cards can have an additional modifier to allow them to "float", giving them hover states and styles for a "selected" state.

This is a floating card. Try hovering me.
This is a selected floating card.
<div class="c-card c-card--floating">
  This is a floating card. Try hovering me.
</div>

<div class="c-card c-card--floating is-selected">
  This is a selected floating card.
</div>

Inputs and Labels

View on GitHub

Inputs and labels are used in forms. But you knew that.

Inputs take up the entire width of their parent, so you can and should use them in the grid.

<form>
  <label class="c-label">
    Email address
    <input class="c-input" placeholder="drew@dropbox.com" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
  </label>

  <p>Inputs take up the entire width of their parent, so you can and should use them in the grid.</p>

  <div class="o-grid">

    <div class="o-grid__col o-grid__col--1-of-2">
      <label class="c-label">
        Password
        <input class="c-input" placeholder="Keep it secret." type="password" />
      </label>
    </div>

    <div class="o-grid__col o-grid__col--1-of-2">
      <label class="c-label">
        Confirm password
        <input class="c-input" placeholder="Keep it safe." type="password" />
      </label>
    </div>

    <div class="o-grid__col o-grid__col--1-of-2">
      <label class="c-label">
        Disabled field
        <input class="c-input" value="This is disabled" disabled />
      </label>
    </div>

    <div class="o-grid__col o-grid__col--1-of-2">
      <label class="c-label">
        Textarea
        <textarea class="c-input">Edit me, yo</textarea>
      </label>
    </div>

    <div class="o-grid__col o-grid__col--1-of-3">
      <label class="c-label">
        First name <span class="u-font-error">(Required)</span>
        <input class="c-input is-invalid" type="text" />
      </label>
    </div>

    <div class="o-grid__col o-grid__col--1-of-3">
      <label class="c-label">
        Last name
        <input class="c-input is-valid" type="text" value="Housten" />
      </label>
    </div>

    <div class="o-grid__col o-grid__col--1-of-3">
      <label class="c-label">
        Country
        <select class="c-input">
          <option>United Kingdom</option>
          <option>United States</option>
          <option>Something else</option>
        </select>
      </label>
    </div>

  </div>
</form>

Avatars

View on GitHub

A wrapper element with an (optional) image or the user's initials.

Avatars come in five sizes:

  • xs (16px)
  • s (24px)
  • m (32px, default)
  • l (48px)
  • xl (64px)
Aaron Robbs
Kristen Spilman
Daniel Eden
Linda Eliasen
Ryhan Hassan
<figure class="c-avatar c-avatar--xl">
  <img src="http://i.imgur.com/GoCxCU3.jpg" alt="Aaron Robbs" />
</figure>

<figure class="c-avatar c-avatar--l">
  <img src="http://i.imgur.com/l2Gk1Q5.jpg" alt="Kristen Spilman" />
</figure>

<figure class="c-avatar">
  <img src="http://i.imgur.com/0tRX9MO.jpg" alt="Daniel Eden" />
</figure>

<figure class="c-avatar c-avatar--s">
  <img src="http://i.imgur.com/txMlllW.jpg" alt="Linda Eliasen" />
</figure>

<figure class="c-avatar c-avatar--xs">
  <img src="http://i.imgur.com/3DzNLJQ.jpg" alt="Ryhan Hassan" />
</figure>

Users without profile pictures have their initials as avatars. Setting the data-initials attribute and adding the no-img attribute achieves this result:

Aaron Robbs
Kristen Spilman
Daniel Eden
Linda Eliasen
Ryhan Hassan
<figure class="c-avatar c-avatar--xl c-avatar--no-img" data-initials="AR">
  <span class="ax-visually-hidden">Aaron Robbs</span>
</figure>

<figure class="c-avatar c-avatar--l c-avatar--no-img" data-initials="KS">
  <span class="ax-visually-hidden">Kristen Spilman</span>
</figure>

<figure class="c-avatar c-avatar--no-img" data-initials="DE">
  <span class="ax-visually-hidden">Daniel Eden</span>
</figure>

<figure class="c-avatar c-avatar--s c-avatar--no-img" data-initials="LE">
  <span class="ax-visually-hidden">Linda Eliasen</span>
</figure>

<figure class="c-avatar c-avatar--xs c-avatar--no-img" data-initials="RH">
  <span class="ax-visually-hidden">Ryhan Hassan</span>
</figure>

Note that in this example, the avatar color is set via JavaScript. By default, the color is set to color(blue).

Modal

View on GitHub

Modal title

This is some content inside the modal.

<div class="c-modal-overlay">
  <div class="c-modal">
    <div class="c-modal__header">
      <h2 class="f2">Modal title</h2>
    </div>
    <div class="c-modal__content">
      <p>This is some content inside the modal.</p>
    </div>
  </div>
</div>

You can add the unibody modifier to remove the contrasting style between the modal header and content.

Modal title

This is some content inside the modal.

<div class="c-modal-overlay">
  <div class="c-modal c-modal--unibody">
    <div class="c-modal__header">
      <h2 class="f2">Modal title</h2>
    </div>
    <div class="c-modal__content">
      <p>This is some content inside the modal.</p>
    </div>
  </div>
</div>

Title Bubble

View on GitHub

The title bubble component is a tooltip-like component that appears on hover. It's intended for non-vital information about a given element.

The title bubble requires that the element has a `data-title` attribute containing the tooltip content. By default, the tooltip appears below the element

Hover me

<div class="u-pad-s u-font-center">
  <p class="c-title-bubble" data-title="This is a tooltip">Hover me</p>
</div>

There are a number of modifiers available to change the direction and behaviour of the tooltip:

This tooltip will appear above

This tooltip will appear on the right

This tooltip will appear on the left

<div class="u-pad-s u-font-center">
  <p>
    <span class="c-title-bubble c-title-bubble--n" data-title="This is a tooltip">This tooltip will appear above</span>
  </p>
  <p>
    <span class="c-title-bubble c-title-bubble--e" data-title="This is a tooltip">This tooltip will appear on the right</span>
  </p>
  <p>
    <span class="c-title-bubble c-title-bubble--w" data-title="This is a tooltip">This tooltip will appear on the left</span>
  </p>
</div>

Tokens

View on GitHub

Tokens are typically only used in the typeahead to display user identities and emails. They come in three states: neutral, warning, and invalid. As well as those states, a token may be in an additional "pending" state.

Aaron Robbs
Aaron Robbs ×
Kristen Spilman
Kristen Spilman ×
dan.eden@ ×
Ryhan Hassan
Ryhan Hassan ×
<div class="c-token">
  <figure class="c-avatar c-avatar--xs">
    <img src="http://i.imgur.com/GoCxCU3.jpg" alt="Aaron Robbs" />
  </figure>
  <span class="c-token__name">Aaron Robbs</span>
  <span class="c-token__delete">&times;</span>
</div>

<div class="c-token c-token--warning">
  <figure class="c-avatar c-avatar--xs">
    <img src="http://i.imgur.com/l2Gk1Q5.jpg" alt="Kristen Spilman" />
  </figure>
  <span class="c-token__name">Kristen Spilman</span>
  <span class="c-token__delete">&times;</span>
</div>

<div class="c-token c-token--invalid">
  <span class="c-token__name">dan.eden@</span>
  <span class="c-token__delete">&times;</span>
</div>

<div class="c-token c-token--pending">
  <figure class="c-avatar c-avatar--xs">
    <img src="http://i.imgur.com/3DzNLJQ.jpg" alt="Ryhan Hassan" />
  </figure>
  <span class="c-token__name">Ryhan Hassan</span>
  <span class="c-token__delete">&times;</span>
</div>

Tokens also have a selected state, triggered by JavaScript:

Aaron Robbs
Aaron Robbs ×
Kristen Spilman
Kristen Spilman ×
dan.eden@ ×
Ryhan Hassan
Ryhan Hassan ×
<div class="c-token is-selected">
  <figure class="c-avatar c-avatar--xs">
    <img src="http://i.imgur.com/GoCxCU3.jpg" alt="Aaron Robbs" />
  </figure>
  <span class="c-token__name">Aaron Robbs</span>
  <span class="c-token__delete">&times;</span>
</div>

<div class="c-token c-token--warning is-selected">
  <figure class="c-avatar c-avatar--xs">
    <img src="http://i.imgur.com/l2Gk1Q5.jpg" alt="Kristen Spilman" />
  </figure>
  <span class="c-token__name">Kristen Spilman</span>
  <span class="c-token__delete">&times;</span>
</div>

<div class="c-token c-token--invalid is-selected">
  <span class="c-token__name">dan.eden@</span>
  <span class="c-token__delete">&times;</span>
</div>

<div class="c-token c-token--pending is-selected">
  <figure class="c-avatar c-avatar--xs">
    <img src="http://i.imgur.com/3DzNLJQ.jpg" alt="Ryhan Hassan" />
  </figure>
  <span class="c-token__name">Ryhan Hassan</span>
  <span class="c-token__delete">&times;</span>
</div>

Loading Indicator

View on GitHub

The loading indicator component is a screenreader-friendly, left-aligned loading animation. It's a really simple one-liner.

Loading...
<div class="c-loader">Loading...</div>

Tab Nav

View on GitHub

The tab nav component provides a tab-style navigation with active tab states.

<nav>
  <ul class="c-tab-nav" role="tablist">
    <li role="presentation" class="c-tab-nav__tab is-active">
      <button role="tab" aria-selected="true" tabindex="0">Everything</button>
    </li>
    <li role="presentation" class="c-tab-nav__tab">
      <button role="tab" aria-selected="false" tabindex="-1">Photos</button>
    </li>
    <li role="presentation" class="c-tab-nav__tab">
      <button role="tab" aria-selected="false" tabindex="-1">Documents</button>
    </li>
  </ul>
</nav>

Calendar

View on GitHub
Sun Mon Tue Wed Thu Fri Sat
<div class="c-calendar c-card u-pad-xs">
    <nav class="c-calendar__nav  u-cf u-font-center u-mar-bottom-s">
      <div class="u-l-fl">
        <a title="Previous month" href="#" class="u-thide  c-arrow c-arrow--left">Previous</a>
      </div>
      <div class="u-l-fr">
        <a title="Next month" href="#" class="u-thide  c-arrow c-arrow--right">Next</a>
      </div>
      <strong>September 2015</strong>
    </nav>

    <table class="c-calendar__picker">
      <thead class="ax-visually-hidden">
        <tr>
          <th><abbr title="Sunday">Sun</abbr></th>
          <th><abbr title="Monday">Mon</abbr></th>
          <th><abbr title="Tuesday">Tue</abbr></th>
          <th><abbr title="Wednesday">Wed</abbr></th>
          <th><abbr title="Thursday">Thu</abbr></th>
          <th><abbr title="Friday">Fri</abbr></th>
          <th><abbr title="Saturday">Sat</abbr></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><button class="c-calendar__date c-calendar__date--disabled" disabled="">28</button></td>
          <td><button class="c-calendar__date c-calendar__date--disabled" disabled="">29</button></td>
          <td><button class="c-calendar__date u-unbutton">1</button></td>
          <td><button class="c-calendar__date u-unbutton">2</button></td>
          <td><button class="c-calendar__date u-unbutton">3</button></td>
          <td><button class="c-calendar__date u-unbutton">4</button></td>
          <td><button class="c-calendar__date u-unbutton">5</button></td>
        </tr>
        <tr>
          <td><button class="c-calendar__date u-unbutton">6</button></td>
          <td><button class="c-calendar__date is-selected u-unbutton">7</button></td>
          <td><button class="c-calendar__date u-unbutton">8</button></td>
          <td><button class="c-calendar__date u-unbutton">9</button></td>
          <td><button class="c-calendar__date u-unbutton">10</button></td>
          <td><button class="c-calendar__date u-unbutton">11</button></td>
          <td><button class="c-calendar__date u-unbutton">12</button></td>
        </tr>
        <tr>
          <td><button class="c-calendar__date u-unbutton">13</button></td>
          <td><button class="c-calendar__date u-unbutton">14</button></td>
          <td><button class="c-calendar__date u-unbutton">15</button></td>
          <td><button class="c-calendar__date u-unbutton">16</button></td>
          <td><button class="c-calendar__date u-unbutton">17</button></td>
          <td><button class="c-calendar__date u-unbutton">18</button></td>
          <td><button class="c-calendar__date u-unbutton">19</button></td>
        </tr>
        <tr>
          <td><button class="c-calendar__date u-unbutton">20</button></td>
          <td><button class="c-calendar__date u-unbutton">21</button></td>
          <td><button class="c-calendar__date u-unbutton">22</button></td>
          <td><button class="c-calendar__date u-unbutton">23</button></td>
          <td><button class="c-calendar__date u-unbutton">24</button></td>
          <td><button class="c-calendar__date u-unbutton">25</button></td>
          <td><button class="c-calendar__date u-unbutton">26</button></td>
        </tr>
        <tr>
          <td><button class="c-calendar__date u-unbutton">27</button></td>
          <td><button class="c-calendar__date u-unbutton">28</button></td>
          <td><button class="c-calendar__date u-unbutton">29</button></td>
          <td><button class="c-calendar__date u-unbutton">30</button></td>
          <td><button class="c-calendar__date u-unbutton">31</button></td>
          <td><button class="c-calendar__date c-calendar__date--disabled" disabled="">1</button></td>
          <td><button class="c-calendar__date c-calendar__date--disabled" disabled="">2</button></td>
        </tr>
      </tbody>
    </table>

  </div>

Tables

View on GitHub

For basic table styling, add the c-table class to your tables.

# Name Favorite animal
1 Wes O’Haire Elephant
2 Sam Jau Porcupine
3 Zach Johnston Red Panda
4 Daina Lightfoot Sea Otter
<table class="c-table">
  <thead>
    <th>#</th>
    <th>Name</th>
    <th>Favorite animal</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Wes O&rsquo;Haire</td>
      <td>Elephant</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Sam Jau</td>
      <td>Porcupine</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Zach Johnston</td>
      <td>Red Panda</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Daina Lightfoot</td>
      <td>Sea Otter</td>
    </tr>
  </tbody>
</table>

Tables have two main additional modifiers/styles—zebra for alternating striped rows, and selectable for hover and selected states on rows.

# Name Favorite Emoji
1 Fiona Rolander 🙄
2 Zach Johnston 💰
3 Daina Lightfoot 🙈
4 Andrew Chin 💁
5 Liz Osaki 😬
<table class="c-table c-table--zebra">
  <thead>
    <th>#</th>
    <th>Name</th>
    <th>Favorite Emoji</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Fiona Rolander</td>
      <td>🙄</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Zach Johnston</td>
      <td>💰</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Daina Lightfoot</td>
      <td>🙈</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Andrew Chin</td>
      <td>💁</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Liz Osaki</td>
      <td>😬</td>
    </tr>
  </tbody>
</table>
# Name Favorite gif
1 Fiona Rolander Tina Fey giving herself a high-five
2 Daniel Eden The happiest dog in the world
3 Liz Osaki Even rain clouds can be happy
<table class="c-table c-table--selectable">
  <thead>
    <th>#</th>
    <th>Name</th>
    <th>Favorite gif</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Fiona Rolander</td>
      <td><a href="https://gif.daneden.me/tina_five.gif">Tina Fey giving herself a high-five</a></td>
    </tr>
    <tr class="is-selected">
      <td>2</td>
      <td>Daniel Eden</td>
      <td><a href="https://gif.daneden.me/happy-place.gif">The happiest dog in the world</a></td>
    </tr>
    <tr>
      <td>3</td>
      <td>Liz Osaki</td>
      <td><a href="https://gif.daneden.me/excited_cloud.gif">Even rain clouds can be happy</a></td>
    </tr>
  </tbody>
</table>