Sidebar Apps

Contents
Single-Line list
Two-Line List
- Two-Line List + icon
List Dividers
List Groups
Full-Width Button
Timeline
Sections
Icons + Section Headers
Collapsible Sections
Persisted Collapsible Sections
Related

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.

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

Timeline

Used for displaying time-based and event-based data

$164.00 USD was authorized. Oct 10, 2017
$132.00 USD was authorized. Oct 6, 2017
$132.00 USD was authorized. Oct 2, 2017

<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>

Persisted Collapsible Sections

You can combine the c-sb-section class with the is-persisted class so that the user’s choice to collapse or expand a section is remembered between page loads.