Scooter logo

Objects

View on GitHub

Object classes are common design patterns, not unique to Dropbox specifically. These classes are not designed to be tinkered with, since they affect high-level layout properties and carry little visual styling.

Rather than trying to create new pages with unique layouts, you may find all the layout patterns you'll need right here.

Grid

View on GitHub

The grid object offers a collection of classes for grid-based layout. It should be used within a container that sets the width or max-width.

Configuration

The grid object comes with a few configuration options:

  • $DBcol-groups is a map that sets the grid divisions. The default value is 2, 3, 4, 6, 12.
  • $DBgutter-width sets the margins (or gutters) between columns. Defaults to 20px.
<div class="o-grid">
  <div class="o-grid__col o-grid__col--1-of-12"></div>
  <div class="o-grid__col o-grid__col--1-of-12"></div>
  <div class="o-grid__col o-grid__col--1-of-12"></div>
  <div class="o-grid__col o-grid__col--1-of-12"></div>
  <div class="o-grid__col o-grid__col--1-of-12"></div>
  <div class="o-grid__col o-grid__col--1-of-12"></div>
  <div class="o-grid__col o-grid__col--1-of-12"></div>
  <div class="o-grid__col o-grid__col--1-of-12"></div>
  <div class="o-grid__col o-grid__col--1-of-12"></div>
  <div class="o-grid__col o-grid__col--1-of-12"></div>
  <div class="o-grid__col o-grid__col--1-of-12"></div>
  <div class="o-grid__col o-grid__col--1-of-12"></div>

  <div class="o-grid__col o-grid__col--2-of-12"></div>
  <div class="o-grid__col o-grid__col--2-of-12"></div>
  <div class="o-grid__col o-grid__col--2-of-12"></div>
  <div class="o-grid__col o-grid__col--2-of-12"></div>
  <div class="o-grid__col o-grid__col--2-of-12"></div>
  <div class="o-grid__col o-grid__col--2-of-12"></div>

  <div class="o-grid__col o-grid__col--6-of-12"></div>
  <div class="o-grid__col o-grid__col--2-of-12"></div>
  <div class="o-grid__col o-grid__col--3-of-12"></div>
  <div class="o-grid__col o-grid__col--1-of-12"></div>
</div>

Media

View on GitHub

The media object allows you to layout an image and a block of text beside one another. Based on Nicole Sullivan's original media object.

Aaron Robbs

Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam. Animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

<div class="o-media">
  <img class="o-media__img" src="http://i.imgur.com/GoCxCU3.jpg" width="64" alt="Aaron Robbs" />
  <div class="o-media__body">
    <p>Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam. Animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
  </div>
</div>

List-UI

View on GitHub

The List-UI object turns a ul or ol element into an unstyled, vertically stacked list of navigation items. Using the dividers modifier also adds a divider between items.

<ul class="o-list-ui u-mar-bottom-m">
  <!-- The `u-mar-bottom-m` class is just to add some space between these examples. -->
  <li><a href="#">A menu item</a></li>
  <li><a href="#">Another menu item</a></li>
  <li><a href="#">A third menu item</a></li>
  <li><a href="#">A final menu item</a></li>
</ul>

<!-- The `dividers` modifier adds dividers between the items -->
<ul class="o-list-ui o-list-ui--dividers">
  <li><a href="#">A menu item</a></li>
  <li><a href="#">Another menu item</a></li>
  <li><a href="#">A third menu item</a></li>
  <li><a href="#">A final menu item</a></li>
</ul>

Flag

View on GitHub

The Flag object is very similar to the Media object, but allows you to control the vertical alignment of the text and image. Based on Harry Roberts' flag object.

By default, elements are vertically center-aligned. Add top or bottom modifiers to align top or bottom edges respectively.

Add the rev modifier for a fixed-width right-aligned element, and flexible-with left-aligned element.

Kristen Spilman
This is a center-aligned flag object, the default state. Quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

This is a reversed flag object. Quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Linda Eliasen

Ryhan Hassan
This is a top-aligned flag object. Quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
<div class="o-flag u-mar-bottom-m">
  <div class="o-flag__fix">
    <img src="http://i.imgur.com/l2Gk1Q5.jpg" width="64" alt="Kristen Spilman" />
  </div>
  <div class="o-flag__flex">
    This is a center-aligned flag object, the default state. Quia consequuntur magni dolores eos qui ratione voluptatem sequi&nbsp;nesciunt.
  </div>
</div>

<hr/>

<!-- The `rev` modifier lets you have a right-aligned fixed-width element -->
<div class="o-flag o-flag--rev u-mar-bottom-m">
  <div class="o-flag__flex">
    This is a reversed flag object. Quia consequuntur magni dolores eos qui ratione voluptatem sequi&nbsp;nesciunt.
  </div>
  <div class="o-flag__fix">
    <img src="http://i.imgur.com/txMlllW.jpg" width="64" alt="Linda Eliasen" />
  </div>
</div>

<hr/>

<!-- The `top` modifier aligns the top edges of elements -->
<div class="o-flag o-flag--top">
  <div class="o-flag__fix">
    <img src="http://i.imgur.com/3DzNLJQ.jpg" width="64" alt="Ryhan Hassan" />
  </div>
  <div class="o-flag__flex">
    This is a top-aligned flag object. Quia consequuntur magni dolores eos qui ratione voluptatem sequi&nbsp;nesciunt.
  </div>
</div>

On this page