Sidebar Apps

Contents

Single-Line list

A single-line list is used to present multiple items vertically. Lists can contain children and are used in the sidebar. List items take up one line.

  • Charge: Oct 17, 2017
  • Charge: Oct 15, 2017
  • Charge: Oct 12, 2017
  • Charge: Oct 10, 2017
<ul class="c-sb-list">
  <li class="c-sb-list-item">Charge: Oct 17, 2017</li>
  <li class="c-sb-list-item">Charge: Oct 15, 2017</li>
  <li class="c-sb-list-item">Charge: Oct 12, 2017</li>
  <li class="c-sb-list-item">Charge: Oct 10, 2017</li>
</ul>

Single-Line list (compact)

Lists can be made more compact by using the c-sb-list--compact modifier class.

  • Charge: Oct 17, 2017
  • Charge: Oct 15, 2017
  • Charge: Oct 12, 2017
  • Charge: Oct 10, 2017
<ul class="c-sb-list c-sb-list--compact">
  <li class="c-sb-list-item">Charge: Oct 17, 2017</li>
  <li class="c-sb-list-item">Charge: Oct 15, 2017</li>
  <li class="c-sb-list-item">Charge: Oct 12, 2017</li>
  <li class="c-sb-list-item">Charge: Oct 10, 2017</li>
</ul>

Bulleted Lists

Lists can be displayed with bullets by using the c-sb-list-item--bullet modifier class.

  • Charge: Oct 17, 2017
  • Charge: Oct 15, 2017
  • Charge: Oct 12, 2017
  • Charge: Oct 10, 2017
<ul class="c-sb-list c-sb-list--compact">
  <li class="c-sb-list-item c-sb-list-item--bullet">Charge: Oct 17, 2017</li>
  <li class="c-sb-list-item c-sb-list-item--bullet">Charge: Oct 15, 2017</li>
  <li class="c-sb-list-item c-sb-list-item--bullet">Charge: Oct 12, 2017</li>
  <li class="c-sb-list-item c-sb-list-item--bullet">Charge: Oct 10, 2017</li>
</ul>

Single-Line list + icon

Lists can contain things such as icons or actions

  • Re: Merging tickets into one conversations and archive.
  • Re: When will I receive my package in the mail from you.
  • Re: Your payment was received for December!
  • Re: Your payment was received for November!
<ul class="c-sb-list">
  <li class="c-sb-list-item t-tx-charcoal-300">
    <i class="c-sb-list-item__icon icon icon-email-sm" aria-hidden="true"></i>
    Re: Merging tickets into one conversations and archive.
  </li>
  <li class="c-sb-list-item">
    <i class="c-sb-list-item__icon icon icon-email-sm" aria-hidden="true"></i>
    Re: When will I receive my package in the mail from you.
  </li>
  <li class="c-sb-list-item">
    <i class="c-sb-list-item__icon icon icon-email-sm" aria-hidden="true"></i>
    Re: Your payment was received for December!
  </li>
  <li class="c-sb-list-item">
    <i class="c-sb-list-item__icon icon icon-email-sm" aria-hidden="true"></i>
    Re: Your payment was received for November!
  </li>
</ul>

Two-Line List

You can use the c-sb-list--two-line to style a list in the two-line format. List items take up two lines . Note: You can also add more lines if needed.

  • Item Label Primary text
  • Item Label Success
  • Item Label Primary text
<ul class="c-sb-list c-sb-list--two-line">
  <li class="c-sb-list-item">
    <span class="c-sb-list-item__label">
      Item Label
      <span class="c-sb-list-item__text">
        Primary text
      </span>
    </span>
  </li>
  <li class="c-sb-list-item">
    <span class="c-sb-list-item__label">
      Item Label
      <span class="badge success">Success</span>
    </span>
  </li>
  <li class="c-sb-list-item">
    <span class="c-sb-list-item__label">
      Item Label
      <span class="c-sb-list-item__text">
        Primary text
      </span>
    </span>
  </li>
</ul>

Two-Line List + icon

Two-line lists can also contain things such as icons.

  • Item Label Primary text
  • Item Label Primary text
  • Item Label Primary text
<ul class="c-sb-list c-sb-list--two-line">
  <li class="c-sb-list-item">
    <i class="c-sb-list-item__icon icon icon-email-sm t-tx-charcoal-200" aria-hidden="true"></i>
    <span class="c-sb-list-item__label">
      Item Label
      <span class="c-sb-list-item__text">Primary text</span>
    </span>
  </li>
  <li class="c-sb-list-item">
    <i class="c-sb-list-item__icon icon icon-email-sm t-tx-charcoal-200" aria-hidden="true"></i>
    <span class="c-sb-list-item__label">
      Item Label
      <span class="c-sb-list-item__text">Primary text</span>
    </span>
  </li>
  <li class="c-sb-list-item">
    <i class="c-sb-list-item__icon icon icon-email-sm t-tx-charcoal-200" aria-hidden="true"></i>
    <span class="c-sb-list-item__label">
      Item Label
      <span class="c-sb-list-item__text">Primary text</span>
    </span>
  </li>
</ul>

List Dividers

Lists contains an c-sb-list-divider classes which can be used as a separator between related groups of content.

  • Item 1 - Division 1
  • Item 2 - Division 1
  • Item 3 - Division 1
  • Item 1 - Division 2
  • Item 2 - Division 2
  • Item 3 - Division 2
<ul class="c-sb-list">
  <li class="c-sb-list-item">Item 1 - Division 1</li>
  <li class="c-sb-list-item">Item 2 - Division 1</li>
  <li class="c-sb-list-item">Item 3 - Division 1</li>
  <li role="separator" class="c-sb-list-divider"></li>
  <li class="c-sb-list-item">Item 1 - Division 2</li>
  <li class="c-sb-list-item">Item 2 - Division 2</li>
  <li class="c-sb-list-item">Item 3 - Division 2</li>
</ul>

List Groups

Multiple related lists can be grouped together using the c-sb-list-group class on a containing element.

Subscribed
  • Single-line item
  • Single-line item
  • Single-line item
Available
  • Item Label Primary text
  • Item Label Primary text
  • Item Label Primary text
<div class="c-sb-list-group">
  <div class="c-sb-list-group__subheader t-tx-charcoal-500 tx-13 tx-500">Subscribed</div>
  <ul class="c-sb-list c-sb-list--compact">
    <li class="c-sb-list-item">Single-line item</li>
    <li class="c-sb-list-item">Single-line item</li>
    <li class="c-sb-list-item">Single-line item</li>
  </ul>

  <div class="c-sb-list-divider"></div>

  <div class="c-sb-list-group__subheader t-tx-charcoal-500 tx-13 tx-500">Available</div>
  <ul class="c-sb-list c-sb-list--two-line">
    <li class="c-sb-list-item">
      <span class="c-sb-list-item__label t-tx-charcoal-300">
        Item Label
        <span class="c-sb-list-item__text t-tx-charcoal-500">
          Primary text
        </span>
      </span>
    </li>
    <li class="c-sb-list-item">
      <span class="c-sb-list-item__label t-tx-charcoal-300">
        Item Label
        <span class="c-sb-list-item__text t-tx-charcoal-500">
          Primary text
        </span>
      </span>
    </li>
    <li class="c-sb-list-item">
      <span class="c-sb-list-item__label t-tx-charcoal-300">
        Item Label
        <span class="c-sb-list-item__text t-tx-charcoal-500">
          Primary text
        </span>
      </span>
    </li>
  </ul>
</div>

Full-Width Button

This c-button--sidebar button is used for important primary action in sidebar panels. The button should git go at the bottom of the panel.

<button href="#" class="c-button c-button--sidebar">Add to Capsule</button>

Timeline

Used for displaying time-based and event-based data

<ul class="c-sb-timeline c-sb-timeline--list u-mrg-0">
  <li class="c-sb-timeline-item">
    <span class="c-sb-timeline-item__text">
      <a class="c-sb-timeline-item__link t-tx-blue-500" href="#!">
        $164.00 USD was authorized.
      </a>
      <span class="c-sb-list-item__text__secondary t-tx-charcoal-400">
        Oct 10, 2017
      </span>
    </span>
  </li>
  <li class="c-sb-timeline-item">
    <span class="c-sb-timeline-item__text">
      <a class="c-sb-timeline-item__link t-tx-blue-500" href="#!">
        $132.00 USD was authorized.
      </a>
      <span class="c-sb-list-item__text__secondary t-tx-charcoal-400">
        Oct 6, 2017
      </span>
    </span>
  </li>
  <li class="c-sb-timeline-item">
    <span class="c-sb-timeline-item__text">
      <a class="c-sb-timeline-item__link t-tx-blue-500" href="#!"> 
        $132.00 USD was authorized.
      </a>
      <span class="c-sb-list-sb--item__text__secondary t-tx-charcoal-400">
        Oct 2, 2017
      </span>
    </span>
  </li>
</ul>

Sections

Section Heading
  • Score $2,000
  • Create Date July 20, 2017 8:00 am
<div class="c-sb-section">
  <div class="c-sb-section__title">
    Section Heading
  </div>
  <div class="c-sb-section__body">
    <ul class="c-sb-list c-sb-list--two-line">
      <li class="c-sb-list-item">
        <span class="c-sb-list-item__label t-tx-charcoal-300">
          Score
          <span class="c-sb-list-item__text t-tx-charcoal-500">
            $2,000
          </span>
        </span>
      </li>
      <li class="c-sb-list-item">
        <span class="c-sb-list-item__label t-tx-charcoal-300">
          Create Date
          <span class="c-sb-list-item__text t-tx-charcoal-500">
            July 20, 2017 8:00 am
          </span>
        </span>
      </li>
    </ul>
  </div>
</div>

Icons + Section Headers

Orders (1)
  • Order 1
  • Order 2
Subscriptions (1)
  • Subscriptions 1
  • Subscriptions 2
Products (1)
  • Product 1
  • Product 2
<div class="c-sb-section c-sb-section--toggle">
  <div class="c-sb-section__title js-sb-toggle">
    <i class="icon-cart icon-sb"></i> Orders (1)
    <i class="caret sb-caret"></i>
  </div>
  <div class="c-sb-section__body">
    <ul class="c-sb-list c-sb-list--compact">
      <li class="c-sb-list-item">Order 1</li>
      <li class="c-sb-list-item">Order 2</li>
    </ul>
  </div>
</div>
<div class="c-sb-section c-sb-section--toggle">
  <div class="c-sb-section__title js-sb-toggle">
    <i class="icon-star icon-sb"></i> Subscriptions (1)
    <i class="caret sb-caret"></i>
  </div>
  <div class="c-sb-section__body">
    <ul class="c-sb-list c-sb-list--compact">
      <li class="c-sb-list-item">Subscriptions 1</li>
      <li class="c-sb-list-item">Subscriptions 2</li>
    </ul>
  </div>
</div>
<div class="c-sb-section c-sb-section--toggle">
  <div class="c-sb-section__title js-sb-toggle">
    <i class="icon-tag icon-sb"></i> Products (1)
    <i class="caret sb-caret"></i>
  </div>
  <div class="c-sb-section__body">
    <ul class="c-sb-list c-sb-list--compact">
      <li class="c-sb-list-item">Product 1</li>
      <li class="c-sb-list-item">Product 2</li>
    </ul>
  </div>
</div>

Collapsible Sections

Available Lists
  • JG - Plans and Pricing
  • The Walking Dead
  • Curly Girl Blog Read
Recent Events
  • Charge: Oct 17, 2017
  • Charge: Oct 15, 2017
  • Charge: Oct 12, 2017
  • Charge: Oct 10, 2017
<div class="c-sb-section c-sb-section--toggle">
    <div class="c-sb-section__title js-sb-toggle">
      Available Lists <i class="caret sb-caret"></i>
    </div>
    <div class="c-sb-section__body">
      <ul class="c-sb-list c-sb-list--compact">
        <li class="c-sb-list-item c-sb-list-item--bullet">JG - Plans and Pricing</li>
        <li class="c-sb-list-item c-sb-list-item--bullet">The Walking Dead</li>
        <li class="c-sb-list-item c-sb-list-item--bullet">Curly Girl Blog Read</li>
      </ul>
    </div>
  </div>
  <div class="c-sb-section c-sb-section--toggle">
    <div class="c-sb-section__title js-sb-toggle">
      Recent Events <i class="caret sb-caret"></i>
    </div>
    <div class="c-sb-section__body">
      <ul class="c-sb-list c-sb-list--compact">
        <li class="c-sb-list-item c-sb-list-item--bullet">Charge: Oct 17, 2017</li>
        <li class="c-sb-list-item c-sb-list-item--bullet">Charge: Oct 15, 2017</li>
        <li class="c-sb-list-item c-sb-list-item--bullet">Charge: Oct 12, 2017</li>
        <li class="c-sb-list-item c-sb-list-item--bullet">Charge: Oct 10, 2017</li>
      </ul>
    </div>
  </div>