Buttons V2

Elements

a.v2-button.v2-button--primary
button.v2-button.v2-button--primary

Markup example

In order to support "special" states like "working" and "success" we need to use additional elements to wrap icon and text. An example of the button markup is shown below:

<a href="#" class="v2-button v2-button--primary">
  <span class="v2-button__icon">{% render 'v2-icon-plus' %}</span>
  <span class="v2-button__text">Primary</span>
</a>
<button type="submit" class="v2-button v2-button--primary">
  <span class="v2-button__icon">{% render 'v2-icon-plus' %}</span>
  <span class="v2-button__text">Primary</span>
</button>

Sizes

.v2-button.v2-button--xs
.v2-button.v2-button--sm
.v2-button
.v2-button.v2-button--lg
.v2-button.v2-button--xl

Colors

.v2-button.v2-button--primary
.v2-button.v2-button--secondary
.v2-button.v2-button--secondary-alt
.v2-button.v2-button--tertiary
.v2-button.v2-button--tertiary-alt
.v2-button.v2-button--ghost

States

Beside regualar element's states (hover, focus and active) we have a few "special" states. Please note that not all buttons have special states and check examples section below.

.v2-button.is-disabled
.v2-button.is-working
.v2-button.is-success
.v2-button.is-active

Other variants

For icons you don't need any addional classes, but for the "full" and "pill" button variants there's an additional class.

.v2-button.v2-button--primary
.v2-button.v2-button--primary
.v2-button.v2-button--full
.v2-button.v2-button--pill
.v2-button.v2-button--full-bleed

Examples

Buttons (OLD/DEPRECATED)

Buttons and styles listed below are old and will be removed when we implement new version of buttons everywhere on the website. Feel free to replace those old buttons with the new ones as you notice them in the code.

Button sizes

.button.button--sm

Button colors

For any color listed in $button-colors in variables.scss color will be generated.

For now, there's only primary button that's used for tabs.

Outlined Buttons

For any color listed in $button-outline-colors in variables.scss outline buttons will be generated.

.button.button--outline-gray

Icon buttons V2

Markup example

In order to support "special" states like "working" and "success" we need to use additional elements to wrap icon and text. An example of the icon button markup is shown below:

<a href="#" class="v2-icon-button v2-icon-button--primary">
  <span class="v2-icon-button__icon">{% render 'v2-icon-plus' %}</span>
  <span class="v2-icon-button__text">Add to Cart</span>
</a>

Colors

.v2-icon-button.v2-icon-button--primary
.v2-icon-button.v2-icon-button--secondary
.v2-icon-button.v2-icon-button--tertiary
.v2-icon-button.v2-icon-button--ghost

Sizes

.v2-icon-button.v2-icon-button--sm
.v2-icon-button
.v2-icon-button.v2-icon-button--lg
.v2-icon-button.v2-icon-button--xl

States

Beside regualar element's states (hover, focus and active) we have a few "special" states. Please note that not all buttons have special states and check examples section below.

.v2-icon-button.is-working
.v2-icon-button.is-success
.v2-icon-button.is-disabled

Examples

Quantity picker

TODO: Extract quantity picker into component - optimize JS & CSS.

Tags

Tag as a link

<div class="tag-list">
  <a href="#" class="tag">Blue</a>
  <a href="#" class="tag">Crib and Changer</a>
  <a href="#" class="tag">Contemporary</a>
</div>

Tag with remove action

Blue
Crib and Changer
Contemporary
<div class="tag-list">
  <div href="#" class="tag">
    <span>Blue</span>
    <a href="#" class="tag__remove">{% render 'v2-icon-cancel' %}</span>
  </div>
  <div href="#" class="tag">
    <span>Crib and Changer</span>
    <a href="#" class="tag__remove">{% render 'v2-icon-cancel' %}</span>
  </div>
  <div href="#" class="tag">
    <span>Contemporary</span>
    <a href="#" class="tag__remove">{% render 'v2-icon-cancel' %}</span>
  </div>
</div>

Pagination

Markup for the pagination is provided by Shopify via liquid method. You can test live pagination on the Kids' Chairs page.

Accordion

Note: Accordion works as collapsable panes. In case you want the "real" accordon behaviour just add data-parent="#parent-container-id" to the div.collapse that wrapps the .accordion__item__body.

Crib safety standards evolve as we learn more about the true risks of even popular and long-standing products. In 2011, the federal government banned drop-rail cribs after they were linked to infant suffocation deaths. Experts are now advising that parents avoid crib rail bumpers and crib tents for similar reasons. Parents can have peace of mind if they choose a new crib, use a tight-fitting, firm mattress, and put the baby to sleep on its back on a bare mattress.

  • Limited 5 year warranty
  • 52" x 27.5" x 5"

Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

  1. Limited 5 year warranty
  2. 52" x 27.5" x 5"

Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Crib safety standards evolve as we learn more about the true risks of even popular and long-standing products. In 2011, the federal government banned drop-rail cribs after they were linked to infant suffocation deaths. Experts are now advising that parents avoid crib rail bumpers and crib tents for similar reasons. Parents can have peace of mind if they choose a new crib, use a tight-fitting, firm mattress, and put the baby to sleep on its back on a bare mattress.

Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Crib safety standards evolve as we learn more about the true risks of even popular and long-standing products. In 2011, the federal government banned drop-rail cribs after they were linked to infant suffocation deaths. Experts are now advising that parents avoid crib rail bumpers and crib tents for similar reasons. Parents can have peace of mind if they choose a new crib, use a tight-fitting, firm mattress, and put the baby to sleep on its back on a bare mattress.

Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

<div id="accordion" class="accordion">
  <div class="accordion__item">
    <h5 class="mv0" id="accordion-heading-1">
      <button class="accordion__item__header collapsed" data-toggle="collapse" data-target="#accordion-collapsable-pane-1" aria-expanded="false" aria-controls="accordion-collapsable-pane-1">
        What are the crib safety standards?
        <span class="accordion__item__header-toggle-icon">
          {% render 'v2-icon-chevron-down' %}
        </span>
      </button>
    </h5>
    <div id="accordion-collapsable-pane-1" class="collapse" aria-labelledby="accordion-heading-1">
      <div class="accordion__item__body">
        <p>Crib safety standards evolve as we learn more about the true risks of even popular and long-standing products. In 2011, the federal government banned drop-rail cribs after they were linked to infant suffocation deaths. Experts are now advising that parents avoid crib rail bumpers and crib tents for similar reasons. Parents can have peace of mind if they choose a new crib, use a tight-fitting, firm mattress, and put the baby to sleep on its back on a bare mattress.</p>
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <h5 class="mv0" id="accordion-heading-2">
      <button class="accordion__item__header collapsed" data-toggle="collapse" data-target="#accordion-collapsable-pane-2" aria-expanded="false" aria-controls="accordion-collapsable-pane-2">
        How far apart should the crib slats be?
        <span class="accordion__item__header-toggle-icon">
          {% render 'v2-icon-chevron-down' %}
        </span>
      </button>
    </h5>
    <div id="accordion-collapsable-pane-2" class="collapse" aria-labelledby="accordion-heading-2">
      <div class="accordion__item__body">
        <p>Crib slats need to be close together in order to prevent a baby’s head or torso from slipping through the gap. New cribs are manufactured to a strict standard of no more than 2 and 3/8 inches between slats. If a soda can passes easily through the slats, the crib is not safe. If you are questioning the width of a crib you are considering buying, there’s no harm in checking with a ruler in the store.</p>
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <h5 class="mv0" id="accordion-heading-3">
      <button class="accordion__item__header collapsed" data-toggle="collapse" data-target="#accordion-collapsable-pane-3" aria-expanded="false" aria-controls="accordion-collapsable-pane-3">
        <div class="d-flex">
          <span class="accordion__item__header-icon">
            {% render 'v2-icon-file-text' %}
          </span>
          Product Details
        </div>
        <span class="accordion__item__header-toggle-icon">
          {% render 'v2-icon-chevron-down' %}
        </span>
      </button>
    </h5>
    <div id="accordion-collapsable-pane-3" class="collapse" aria-labelledby="accordion-heading-3">
      <div class="accordion__item__body">
        <p>Drop side cribs have been banned in the US since 2010, after they were linked to several infant deaths since 2001. Many parents enjoyed the convenience of this once popular design, but they put babies at risk of getting trapped and suffocating. Using any second hand crib comes with risks, but parents should never use a drop-rail model.</p>
      </div>
    </div>
  </div>
</div>
      

~~~ OLD ELEMENTS ~~~


Forms

Checkbox
Radio
<div class="form__group">
  <label class="form__label" for="exampleFormControlInput1">Email address</label>
  <input type="email" class="form__control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="form__group">
  <label class="form__label" for="exampleFormControlSelect1">Example select</label>
  <select class="form__control" id="exampleFormControlSelect1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>
<div class="form__group">
  <label class="form__label" for="exampleFormControlTextarea1">Example textarea</label>
  <textarea class="form__control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form__check">
  <input type="checkbox" class="form__check-control" id="exampleCheck1">
  <label class="form__check-label" for="exampleCheck1">Check me out</label>
</div>
<div class="form__check">
  <input type="radio" class="form__check-control" id="exampleRadio1">
  <label class="form__check-label" for="exampleRadio1">Default radio</label>
</div>

Form groups

<div class="input-group mb3">
  <input type="text" class="form__control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group__append">
    <button class="button button--outline-gray" type="button">Button</button>
  </div>
</div>

Dropdown

<div class="dropdown">
  <button class="button button--primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu dropdown__menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown__item" href="#">Action</a>
    <a class="dropdown__item" href="#">Another action</a>
    <a class="dropdown__item" href="#">Something else here</a>
  </div>
</div>

Tabs

First tab content

Second tab content

Third tab content

<div class="tabs">
  
  <ul class="tabs__list nav nav-tabs" role="tablist">
    <li class="nav-item tabs__list-item">
      <a class="nav-link active" id="first-tab" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-selected="true">
        First
      </a>
    </li>
    <li class="tabs__list-item">
      <a class="nav-link" id="second-tab" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-selected="false">Second</a>
    </li>
    <li class="tabs__list-item">
      <a class="nav-link" id="third-tab" data-toggle="tab" href="#third" role="tab" aria-controls="third" aria-selected="false">Third</a>
    </li>
  </ul>

  <div class="tabs__content">
    <div id="first" class="tab-pane active" role="tabpanel" aria-labelledby="first-tab">
      <h3>First tab content</h3>
    </div>
    <div id="second" class="tab-pane" role="tabpanel" aria-labelledby="returns-tab">
      <h3>Second tab content</h3>
    </div>
    <div id="third" class="tab-pane" role="tabpanel" aria-labelledby="inqurieis-tab">
      <h3>Third tab content</h3>
    </div>
  </div>

</div>
  

Tabs underlined

First tab content

Second tab content

Third tab content

<div class="tabs">
  
  <ul class="tabs__list nav nav-tabs" role="tablist">
    <li class="nav-item tabs__list-item tabs__list-item--underlined">
      <a class="nav-link active" id="first-tab" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-selected="true">
        First
      </a>
    </li>
    <li class="tabs__list-item tabs__list-item--underlined">
      <a class="nav-link" id="second-tab" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-selected="false">Second</a>
    </li>
    <li class="tabs__list-item tabs__list-item--underlined">
      <a class="nav-link" id="third-tab" data-toggle="tab" href="#third" role="tab" aria-controls="third" aria-selected="false">Third</a>
    </li>
  </ul>

  <div class="tabs__content">
    <div id="first" class="tab-pane active" role="tabpanel" aria-labelledby="first-tab">
      <h3>First tab content</h3>
    </div>
    <div id="second" class="tab-pane" role="tabpanel" aria-labelledby="returns-tab">
      <h3>Second tab content</h3>
    </div>
    <div id="third" class="tab-pane" role="tabpanel" aria-labelledby="inqurieis-tab">
      <h3>Third tab content</h3>
    </div>
  </div>

</div>
  

Dropdown tabs

1111

2222

<div class="dropdown">
  <button class="button button--primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Select a tab
  </button>
  <div class="dropdown-menu dropdown__menu" aria-labelledby="dropdownMenuButton">
    <ul class="nav nav-tabs nav-tabs--dropdown" role="tablist">
      <li class="dropdown__item">
        <a class=" js-tab-selector nav-link active" aria-selected="true" data-toggle="tab" role="tab" data-target="#first-drop" href="#first-drop">First tab</a>
      </li>
      <li class="dropdown__item">
        <a class=" js-tab-selector nav-link" aria-selected="false" data-toggle="tab" role="tab" data-target="#second-drop" href="#second-drop">Second tab</a>
      </li>
    </ul>
  </div>
</div>
<div class="tabs__content">
  <div id="first-drop" class="tab-pane active" role="tabpanel" aria-labelledby="first-drop">
    <h3>First dropdown tab content</h3>
  </div>
  <div id="second-drop" class="tab-pane" role="tabpanel" aria-labelledby="returns-tab">
    <h3>Second dropdown tab content</h3>
  </div>
</div> 

Modal

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Add .modal-dialog-transparent to .modal-dialog for a transparent background. This also removes the box shadow on the modal dialog. Shaddow, if needed, will have to be added manualy for element(s) in the transparent dialog.

You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.

Size Class Modal max-width
Small .modal-sm 300px
Default None 500px
Large .modal-lg 800px
Extra large .modal-xl 1140px
  <button type="button" class="button button--primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>

  
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">{% include 'icon-close' %}</span>
          </button>
        </div>
        <div class="modal-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus similique reiciendis ipsam modi odio laudantium labore cupiditate.
        </div>
        <div class="modal-footer">
          <button type="button" class="button button--danger button--sm" data-dismiss="modal">Close</button>
          <button type="button" class="button button--primary button--sm">Save changes</button>
        </div>
      </div>
    </div>
  </div>

Media object

Generic placeholder image

Media heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione officiis et cum, nesciunt magnam rerum consectetur rem sunt? Odio eaque sit modi quas debitis, quae sed odit repudiandae sequi nostrum!
<div class="media">
  <img class="mr4" src="https://via.placeholder.com/100" alt="Generic placeholder image">
  <div class="media-body">
    <h3 class="mt0">Media heading</h3>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione officiis et cum, nesciunt magnam rerum consectetur rem sunt? Odio eaque sit modi quas debitis, quae sed odit repudiandae sequi nostrum!
  </div>
</div>

Helper classes

Spacing

 An eight step powers of two scale ranging from 0 to 16rem.

Base:
  p = padding
  m = margin

Modifiers:
  a = all
  h = horizontal
  v = vertical
  t = top
  r = right
  b = bottom
  l = left

  0 = none ($spacing-none)
  1 = 1st step in spacing scale ($spacing-xs - 5px)
  2 = 2nd step in spacing scale ($spacing-sm - 10px)
  3 = 3rd step in spacing scale ($spacing-base - 15px)
  4 = 4th step in spacing scale ($spacing-lg - 30px)
  5 = 5th step in spacing scale ($spacing-xl - 50px)
  6 = 6th step in spacing scale ($spacing-xxl - 100px)
  7 = 7th step in spacing scale ($spacing-xxxl - 150px)

Media Query Extensions:
  --sm: 576px,
  --md: 768px,
  --lg: 992px,
  --xl: 1200px

Example Media Query Extensions usage: .mt2.mt3--md.mt4--lg

Text align

Base
  t = text-align
Modifiers
  l = left
  r = right
  c = center
  j = justify
Media Query Extensions:
  --sm: 576px,
  --md: 768px,
  --lg: 992px,
  --xl: 1200px

Display

To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

Complete reference