Heading

Core

h1 (heading-core-h1)

Core h1

<h1 class="header">Core h1</h1>

h2 (heading-core-h2)

Core h2

<h2 class="header">Core h2</h2>

h3 (heading-core-h3)

Core h3

<h3 class="header">Core h3</h3>

h4 (heading-core-h4)

Core h4

<h4 class="header">Core h4</h4>

h5 (heading-core-h5)

Core h5
<h5 class="header">Core h5</h5>

h6 (heading-core-h6)

Core h6
<h6 class="header">Core h6</h6>

Explore

h1 (heading-explore-h1)

Explore h1

<h1 class="heading-editorial">Explore h1</h1>

h2 (heading-explore-h2)

Explore h2

<h2 class="heading-editorial">Explore h2</h2>

h3 (heading-explore-h3)

Explore h3

<h3 class="heading-editorial">Explore h3</h3>

h4 (heading-explore-h4)

Explore h4

<h4 class="heading-editorial">Explore h4</h4>

h5 (heading-explore-h5)

Explore h5
<h5 class="heading-editorial">Explore h5</h5>

h6 (heading-explore-h6)

Explore h6
<h6 class="heading-editorial">Explore h6</h6>

Hero

h1 (heading-hero-h1)

Hero h1

<h1 class="heading-hero">Hero h1</h1>

h2 (heading-hero-h2)

Hero h2

<h2 class="heading-hero">Hero h2</h2>

h3 (heading-hero-h3)

Hero h3

<h3 class="heading-hero">Hero h3</h3>

h4 (heading-hero-h4)

Hero h4

<h4 class="heading-hero">Hero h4</h4>

h5 (heading-hero-h5)

Hero h5
<h5 class="heading-hero">Hero h5</h5>

h6 (heading-hero-h6)

Hero h6
<h6 class="heading-hero">Hero h6</h6>

Announce

h1 (heading-announce-h1)

Announce h1

<h1 class="heading-announce">Announce h1</h1>

h2 (heading-announce-h2)

Announce h2

<h2 class="heading-announce">Announce h2</h2>

h3 (heading-announce-h3)

Announce h3

<h3 class="heading-announce">Announce h3</h3>

h4 (heading-announce-h4)

Announce h4

<h4 class="heading-announce">Announce h4</h4>

h5 (heading-announce-h5)

Announce h5
<h5 class="heading-announce">Announce h5</h5>

h6 (heading-announce-h6)

Announce h6
<h6 class="heading-announce">Announce h6</h6>

Label

h1 (heading-label-h1)

Label h1

<h1 class="label-classification">Label h1</h1>

h2 (heading-label-h2)

Label h2

<h2 class="label-classification">Label h2</h2>

h3 (heading-label-h3)

Label h3

<h3 class="label-classification">Label h3</h3>

h4 (heading-label-h4)

Label h4

<h4 class="label-classification">Label h4</h4>

h5 (heading-label-h5)

Label h5
<h5 class="label-classification">Label h5</h5>

h6 (heading-label-h6)

Label h6
<h6 class="label-classification">Label h6</h6>

Button

Core

Primary (button-core-primary) 

<button type="button" class="btn btn-primary">Core</button>

Secondary (button-core-secondary) 

<button type="button" class="btn btn-default">Core</button>

Black (button-core-black) 

<button type="button" class="btn btn-primary btn-contrast">Core</button>

White (button-core-white) 

<button type="button" class="btn btn-default btn-contrast">Core</button>

Explore

Primary (button-explore-primary) 

<button type="button" class="btn btn-explore btn-primary">
  Explore<span class="icon icon-rei-tree-arrow" aria-hidden="true"></span>
</button>

Secondary (button-explore-secondary) 

<button type="button" class="btn btn-explore btn-default">
  Explore<span class="icon icon-rei-tree-arrow" aria-hidden="true"></span>
</button>

Black (button-explore-black) 

<button type="button" class="btn btn-contrast btn-primary">
    Explore<span class="icon icon-rei-tree-arrow" aria-hidden="true"></span>
</button>

White (button-explore-white) 

<button type="button" class="btn btn-contrast btn-default">
    Explore<span class="icon icon-rei-tree-arrow" aria-hidden="true"></span>
</button>

Outline (button-explore-outline) 

<button type="button" class="btn btn-outline-alternate btn-primary">
    Explore<span class="icon icon-rei-tree-arrow" aria-hidden="true"></span>
</button>

Offprice

Primary (button-offprice-primary) 

<button type="button" class="btn btn-off-price btn-primary">Offprice</button>

Secondary (button-offprice-secondary) 

<button type="button" class="btn btn-off-price btn-default">Offprice</button>

Filter-Remove (button-filter-remove) 

<button class="btn btn-primary btn-contrast btn-xs btn-fixed remove-toggle">
  <span class="icon icon-rei-close-small" aria-hidden="true"></span>
  <span class="sr-only">Remove</span>
  <span>Remove Filter</span>
</button>

Remove (button-remove) 

<button type="button" class="close" aria-label="Close">
  <span class="icon icon-rei-close-small" aria-hidden="true"></span>
  <span class="sr-only">Close button</span>
</button>

Close (button-close) 

<button type="button" class="close" aria-label="Close">
  <span class="icon icon-rei-close" aria-hidden="true"></span>
  <span class="sr-only">Close button</span>
</button>

Link

Core

Normal (link-core-normal)

Normal 
<a class="link-body" href="">Normal</a>

Overlay (link-core-overlay)

Overlay 
<a class="link-overlay" href="">Overlay</a>

Overlay-Contrast (link-core-overlay-contrast)

Overlay 
<a class="link-contrast-overlay" href="">Overlay</a>

Standalone (link-core-standalone)

Standalone 
<a class="link_stag" href="">Standalone</a>

Standalone-Text (link-core-standalone-text)

Standalone-Text 
<a href="">Standalone-Text</a>

Standalone-Title (link-core-standalone-title)

Standalone-Title 
<a class="link_stag-title" href="">Standalone-Title</a>

Standalone-Overlay (link-core-standalone-overlay)

Standalone-Overlay 
<a class="link_stag-overlay" href="">Standalone-Overlay</a>

Standalone-Overlay-Text (link-core-standalone-overlay-text)

Standalone-Overlay-Text 
<a class="link_stag-overlay-body" href="">Standalone-Overlay-Text</a>

Standalone-Overlay-Title (link-core-standalone-overlay-title)

Standalone-Overlay-Title 
<a class="link_stag-title-overlay" href="">Standalone-Overlay-Title</a>

Explore

Normal (link-explore-normal)

Explore 
<a class="link-explore" href="">Explore</a>

Normal-Overlay (link-explore-normal-overlay)

Explore Overlay 
<a class="link-explore-overlay" href="">Explore Overlay</a>

Standalone (link-explore-standalone)

Explore Standalone 
<a class="link_stag-explore" href="#">
  Explore Standalone<span class="icon icon-rei-tree-arrow" aria-hidden="true"> </span>
</a>

Standalone-Overlay (link-explore-standalone-overlay)

Explore Standalone Overlay 
<a class="link_stag-explore-overlay" href="#">
  Explore Standalone Overlay<span class="icon icon-rei-tree-arrow" aria-hidden="true"> </span>
</a>

Offprice

Normal (link-offprice-normal)

Offprice 
<a class="link-off-price" href="">Offprice</a>

Normal-Overlay (link-offprice-normal-overlay)

Offprice Overlay 
<a class="link-off-price-overlay" href="">Offprice Overlay</a>

Standalone (link-offprice-standalone)

Standalone Offprice 
<a class="link-off-price-standalone" href="">Standalone Offprice</a>

Standalone-Overlay (link-offprice-standalone-overlay)

Standalone-Overlay Offprice 
<a class="link-off-price-standalone-overlay" href="">Standalone-Overlay Offprice</a>

Header-Core

h1 (link-header-core-h1)

h1 Header Link 

<h1>
  <a href="#" class="link_header text-icon-right-arrow">
    h1 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h1>

h2 (link-header-core-h2)

h2 Header Link 

<h2>
  <a href="#" class="link_header text-icon-right-arrow">
    h2 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h2>

h3 (link-header-core-h3)

h3 Header Link 

<h3>
  <a href="#" class="link_header text-icon-right-arrow">
    h3 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h3>

h4 (link-header-core-h4)

h4 Header Link 

<h4>
  <a href="#" class="link_header text-icon-right-arrow">
    h4 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h4>

h5 (link-header-core-h5)

h5 Header Link 
<h5>
  <a href="#" class="link_header text-icon-right-arrow">
    h5 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h5>

h6 (link-header-core-h6)

h6 Header Link 
<h6>
  <a href="#" class="link_header text-icon-right-arrow">
    h6 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h6>

Header-Explore

h1 (link-header-explore-h1)

h1 Header Link 

<h1>
  <a href="#" class="link_header-explore text-icon-right-arrow">
    h1 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h1>

h2 (link-header-explore-h2)

h2 Header Link 

<h2>
  <a href="#" class="link_header-explore text-icon-right-arrow">
    h2 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h2>

h3 (link-header-explore-h3)

h3 Header Link 

<h3>
  <a href="#" class="link_header-explore text-icon-right-arrow">
    h3 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h3>

h4 (link-header-explore-h4)

h4 Header Link 

<h4>
  <a href="#" class="link_header-explore text-icon-right-arrow">
    h4 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h4>

h5 (link-header-explore-h5)

h5 Header Link 
<h5>
  <a href="#" class="link_header-explore text-icon-right-arrow">
    h5 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h5>

h6 (link-header-explore-h6)

h6 Header Link 
<h6>
  <a href="#" class="link_header-explore text-icon-right-arrow">
    h6 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h6>

Header-Offprice

h1 (link-header-offprice-h1)

h1 Header Link 

<h1>
  <a href="#" class="link_header-off-price text-icon-right-arrow">
    h1 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h1>

h2 (link-header-offprice-h2)

h2 Header Link 

<h2>
  <a href="#" class="link_header-off-price text-icon-right-arrow">
    h2 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h2>

h3 (link-header-offprice-h3)

h3 Header Link 

<h3>
  <a href="#" class="link_header-off-price text-icon-right-arrow">
    h3 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h3>

h4 (link-header-offprice-h4)

h4 Header Link 

<h4>
  <a href="#" class="link_header-off-price text-icon-right-arrow">
    h4 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h4>

h5 (link-header-offprice-h5)

h5 Header Link 
<h5>
  <a href="#" class="link_header-off-price text-icon-right-arrow">
    h5 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h5>

h6 (link-header-offprice-h6)

h6 Header Link 
<h6>
  <a href="#" class="link_header-off-price text-icon-right-arrow">
    h6 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h6>

Header-Overlay

h1 (link-header-overlay-h1)

h1 Header Link 

<h1>
  <a href="#" class="link_header-overlay text-icon-right-arrow">
    h1 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h1>

h2 (link-header-overlay-h2)

h2 Header Link 

<h2>
  <a href="#" class="link_header-overlay text-icon-right-arrow">
    h2 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h2>

h3 (link-header-overlay-h3)

h3 Header Link 

<h3>
  <a href="#" class="link_header-overlay text-icon-right-arrow">
    h3 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h3>

h4 (link-header-overlay-h4)

h4 Header Link 

<h4>
  <a href="#" class="link_header-overlay text-icon-right-arrow">
    h4 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h4>

h5 (link-header-overlay-h5)

h5 Header Link 
<h5>
  <a href="#" class="link_header-overlay text-icon-right-arrow">
    h5 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h5>

h6 (link-header-overlay-h6)

h6 Header Link 
<h6>
  <a href="#" class="link_header-overlay text-icon-right-arrow">
    h6 Header Link<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>
   </a>
</h6>

Navigation

Normal (link-navigation-normal)

Normal 
<a class="link_navigation" href="">Normal</a>

Title (link-navigation-title)

Title 
<a class="link_navigation-title" href="">Title</a>

Utility (link-navigation-utility)

Utility 
<a class="link-utility" href="">Utility</a>

Overlay (link-navigation-overlay)

Overlay 
<a class="link_navigation-overlay" href="">Overlay</a>

Overlay-Title (link-navigation-overlay-title)

Overlay-Title 
<a class="link_navigation-title-overlay" href="">Overlay-Title</a>

Overlay-Utility (link-navigation-overlay-utility)

Overlay-Utility 
<a class="link-utility-overlay" href="">Overlay-Utility</a>

Overlay-Sub-Navigation (link-navigation-overlay-sub-navigation)

Overlay-Sub-Navigation 
<a class="link-sub-navigation" href="">Overlay-Sub-Navigation</a>

List

Unstyled (list-unstyled)

  • Lorem ipsum dolor sit amet
  • Facilisis in pretium nisl aliquet
<ul class="list-text">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Facilisis in pretium nisl aliquet</li>
</ul>

Bullets (list-bullets)

  • Lorem ipsum dolor sit amet
  • Facilisis in pretium nisl aliquet
<ul class="list-decoration">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Facilisis in pretium nisl aliquet</li>
</ul>

Ordered (list-ordered)

  1. Lorem ipsum dolor sit amet
  2. Facilisis in pretium nisl aliquet
<ol class="list-text-ordered">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Facilisis in pretium nisl aliquet</li>
</ol>

Inline (list-inline)

  1. Thing 1
  2. Thing 2
<ol class="list-inline">
  <li>Thing 1</li>
  <li>Thing 2</li>
</ol>

Inline-Padding (list-inline-padding)

  1. Thing 1
  2. Thing 2
<ol class="list-inline list-inline-md">
  <li>Thing 1</li>
  <li>Thing 2</li>
</ol>

Inline-Padding-Lg (list-inline-padding-lg)

  1. Thing 1
  2. Thing 2
<ol class="list-inline list-inline-lg">
  <li>Thing 1</li>
  <li>Thing 2</li>
</ol>

Inline-Pipe (list-inline-pipe)

  1. Thing 1
  2. Thing 2
<ol class="list-inline list-inline-md list-inline-pipe">
  <li>Thing 1</li>
  <li>Thing 2</li>
</ol>

Inline-Feature-Link (list-inline-feature-link)

  1. Link 1
  2. Link 2
<ol class="list-inline list-inline-lg use_link-stag-explore">
  <li><a href="">Link 1</a></li>
  <li><a href="">Link 2</a></li>
</ol>

Input

Text (input-text) 

<form>
  <input type="text" class="form-control" placeholder="Text input">
</form>

Textarea (input-textarea) 

<form>
  <textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
</form>

Select (input-select) 

<form>
  <select class="form-control">
    <option>1</option>
  </select>
</form>

Checkbox (input-checkbox) 

<div class="checkbox">
   <input type="checkbox" value="" id="">
   <label for="">Checkbox</label>
</div>

Radio (input-radio) 

<div class="radio">
   <input type="radio" name="" value="" id="">
   <label for="">Radio</label>
</div>

Icon

Menu (icon-menu) 

<span class="icon icon-rei-hamburger-menu" aria-hidden="true"></span>

Cart-Empty (icon-cart-empty) 

<span class="icon icon-rei-cart-empty" aria-hidden="true"></span>

Cart-Full (icon-cart-full) 

<span class="icon icon-rei-cart" aria-hidden="true"></span>

Account (icon-account) 

<span class="icon icon-rei-profile" aria-hidden="true"></span>

Search (icon-search) 

<span class="icon icon-rei-search" aria-hidden="true"></span>

Locator (icon-locator) 

<span class="icon icon-rei-location" aria-hidden="true"></span>

Devices (icon-devices) 

<span class="icon icon-rei-devices" aria-hidden="true"></span>

Email (icon-email) 

<span class="icon icon-rei-email" aria-hidden="true"></span>

Call (icon-call) 

<span class="icon icon-rei-call" aria-hidden="true"></span>

Chat (icon-chat) 

<span class="icon icon-rei-chat" aria-hidden="true"></span>

Help (icon-help) 

<span class="icon icon-rei-help" aria-hidden="true"></span>

Add (icon-add) 

<span class="icon icon-rei-add" aria-hidden="true"></span>

Close (icon-close) 

<span class="icon icon-rei-close" aria-hidden="true"></span>

Remove (icon-remove) 

<span class="icon icon-rei-close-small" aria-hidden="true"></span>

Up-Arrow (icon-up-arrow) 

<span class="icon icon-rei-up-arrow" aria-hidden="true"></span>

Right-Arrow (icon-right-arrow) 

<span class="icon icon-rei-right-arrow" aria-hidden="true"></span>

Down-Arrow (icon-down-arrow) 

<span class="icon icon-rei-down-arrow" aria-hidden="true"></span>

Left-Arrow (icon-left-arrow) 

<span class="icon icon-rei-left-arrow" aria-hidden="true"></span>

Expand (icon-expand) 

<span class="icon icon-rei-expand" aria-hidden="true"></span>

Collapse (icon-collapse) 

<span class="icon icon-rei-collapse" aria-hidden="true"></span>

Tree-Arrow (icon-tree-arrow) 

<span class="icon icon-rei-tree-arrow" aria-hidden="true"></span>

Inline-Search (icon-inline-search) 

<span class="icon icon-rei-inline-search" aria-hidden="true"></span>

Zoom (icon-zoom) 

<span class="icon icon-rei-zoom" aria-hidden="true"></span>

Check (icon-check) 

<span class="icon icon-rei-check" aria-hidden="true"></span>

External-Link (icon-external-link) 

<span class="icon icon-rei-external-link" aria-hidden="true"></span>

Play-Small (icon-play-small) 

<span class="icon icon-rei-play-small" aria-hidden="true"></span>

Play-Large (icon-play-large) 

<span class="icon icon-rei-play-large" aria-hidden="true"></span>

Size-Chart (icon-size-chart) 

<span class="icon icon-rei-size-chart" aria-hidden="true"></span>

Locate (icon-locate) 

<span class="icon icon-rei-target" aria-hidden="true"></span>

Print (icon-print) 

<span class="icon icon-rei-print" aria-hidden="true"></span>

Shipping (icon-shipping) 

<span class="icon icon-rei-shipping" aria-hidden="true"></span>

Calendar (icon-calendar) 

<span class="icon icon-rei-calendar" aria-hidden="true"></span>

Error (icon-error) 

<span class="icon icon-rei-error" aria-hidden="true"></span>

Warning (icon-warning) 

<span class="icon icon-rei-warning" aria-hidden="true"></span>

Info (icon-info) 

<span class="icon icon-rei-info" aria-hidden="true"></span>

Success (icon-success) 

<span class="icon icon-rei-success" aria-hidden="true"></span>

Backorder (icon-backorder) 

<span class="icon icon-rei-backorder" aria-hidden="true"></span>

Star-100 (icon-star-100) 

<span class="icon icon-rei-star-100" aria-hidden="true"></span>

Star-75 (icon-star-75) 

<span class="icon icon-rei-star-75" aria-hidden="true"></span>

Star-50 (icon-star-50) 

<span class="icon icon-rei-star-50" aria-hidden="true"></span>

Star-25 (icon-star-25) 

<span class="icon icon-rei-star-25" aria-hidden="true"></span>

Share (icon-share) 

<span class="icon icon-rei-social-share" aria-hidden="true"></span>

Facebook (icon-facebook) 

<span class="icon icon-rei-social-facebook" aria-hidden="true"></span>

Twitter (icon-twitter) 

<span class="icon icon-rei-social-twitter" aria-hidden="true"></span>

Pinterest (icon-pinterest) 

<span class="icon icon-rei-social-pinterest" aria-hidden="true"></span>

Youtube (icon-youtube) 

<span class="icon icon-rei-social-youtube" aria-hidden="true"></span>

Instagram (icon-instagram) 

<span class="icon icon-rei-social-instagram" aria-hidden="true"></span>

Alert

Success (alert-success) 

<div class="alert alert-success" role="alert">
 <span class="icon icon-rei-success" aria-hidden="true"></span>
  <span class="alert-text">
   <span class="sr-only">Success:</span>
   Success Alert
  </span>
 </span>
</div>

Info (alert-info) 

<div class="alert alert-info" role="alert">
 <span class="icon icon-rei-info" aria-hidden="true"></span>
  <span class="alert-text">
   Info Alert
  </span>
 </span>
</div>

Warning (alert-warning) 

<div class="alert alert-warning" role="alert">
 <span class="icon icon-rei-warning" aria-hidden="true"></span>
  <span class="alert-text">
   <span class="sr-only">Warning:</span>
   Warning Alert
  </span>
 </span>
</div>

Backorder (alert-backorder) 

<div class="alert alert-warning" role="alert">
 <span class="icon icon-rei-backorder" aria-hidden="true"></span>
  <span class="alert-text">
   <span class="sr-only">Warning:</span>
   Backorder Alert
  </span>
 </span>
</div>

Error (alert-error) 

<div class="alert alert-danger" role="alert">
 <span class="icon icon-rei-error" aria-hidden="true"></span>
  <span class="alert-text">
   <span class="sr-only">Error:</span>
   Error Alert
  </span>
 </span>
</div>

List-Group

Sort (list-group-sort) 

<ul class="list-group">
 <li class="list-group-item radio toggle-sort">
   <input type="radio" name="" id="" value="">
   <label for="">Label</label>
 </li>
</ul>

Filter (list-group-filter) 

<ul class="list-group-filter">
 <li class="list-group-item collapsibleList checkbox toggle-expand-collapse">
  <input type="checkbox" value="" id="list-group-item-1">
  <label for="list-group-item-1">list-group-filter-item 1</label>
  <ul class="nest">
   <li class="item-secondary">
     <div class="checkbox">
       <input type="checkbox" value="" id="filter-one">
       <label for="filter-one">Sub-option 1</label>
     </div>
   </li>
     <li class="item-secondary">
       <div class="checkbox">
         <input type="checkbox" value="" id="filter-two">
         <label for="filter-two">Sub-option 2 </label>
       </div>
     </li>
     <li class="item-secondary">
       <div class="checkbox">
         <input type="checkbox" value="" id="filter-three">
         <label for="filter-three">Sub-option 3</label>
       </div>
     </li>
   </ul>
 </li>
 <li class="list-group-item collapsed">
   <a href="#">
     <span>list-group-item 2</span>
   </a>
 </li>
</ul>

Menu (list-group-menu) 

<ul class="list-group-menu">
  <li class="list-group-item collapsibleList checkbox toggle-expand-collapse">
    <input type="checkbox" value="" id="menu-list-group-item-1">
    <label for="menu-list-group-item-1">menu-list-group-item 1</label>
    <ul class="nest">
      <li class="item-secondary">
        <a href="#">
          <span>Sub-option 1</span>
        </a>
      </li>
    </ul>
  </li>
  <li class="list-group-item">
    <a href="#list-group-menu">
      <span>list-group-item 2</span>
    </a>
  </li>
</ul>

Breadcrumb

  1. Item 1
  2. Item 2
  3. Item 3 
<ol class="breadcrumb" itemscope="" itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/item1">
            <span itemprop="name">Item 1</span></a>
        <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/item1/item2">
            <span itemprop="name">Item 2</span></a>
        <meta itemprop="position" content="2">
    </li>
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/item1/item2/item3">
            <span itemprop="name">Item 3</span></a>
        <meta itemprop="position" content="3">
    </li>
</ol>

Button-Group

<div class="btn-group inline-group" role="group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <button type="button" class="btn btn-default">3</button>
  <button type="button" class="btn btn-default">4</button>
</div>

Form

Inline (form-inline) 

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <div class="form-group non-label">
    <button type="submit" class="btn btn-primary">Send invitation</button>
  </div>
</form>

Horizontal (form-horizontal) 

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email" autocomplete="off">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password" autocomplete="off">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>