Company 1
Company 2
Action Another action Something else here
$brand-primary
$blue
$green
$green-light
$white
$gray-dark
$gray
$gray-light
$gray-lighter
$gray-lightest

text-muted

text-primary

text-success

text-info

text-warning

text-danger

text-white

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bolded Italicized Colored Underlined

Unorderd List

  • Item 1
  • Item 2
    • Item 2.1
    • Item 2.2
  • Item 3

Orderd List

  1. Item 1
  2. Item 2
    • Item 2.1
    • Item 2.2
  3. Item 3

Unstyled List

  • Item 1
  • Item 2
    • Item 2.1
    • Item 2.2
  • Item 3
We'll never share your email with anyone else.

This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Legend
@
Buttons
Outline buttons

Cards

Cards uses the default bootstrap card with some modifiers

  • .module-card
  • .module-card-tranparent
  • .module-card-info
  • .module-card-info-title
  • .module-card-info-content

Example

<div class="card module-card">
  <div class="card-block">
    <h4 class="card-title">Title</h4>
    <p>Content</p>
  </div>
</div>

Transparent

<div class="card module-card module-card-transparent">
  <div class="card-block">
    <h4 class="card-title">Title</h4>
    <p>Content</p>
  </div>
</div>
Load Time

5.24 s

Requests

42

Page Size

515.3 kB

Info Card

<div class="card module-card module-card-info">
  <div class="card-block">
    <h6 class="card-title module-card-info-title">Title</h6>
    <p class="module-card-info-content">Content</p>
  </div>
</div>

Using the flexbox grid -sm modifier from bootstrap the table collapse nicely on smaller devices

  • .module-card-table
  • .module-card-table-header
  • .module-card-table-row
Title
Time
Lorem ipsum dolor
10 minuate ago
col
col
Consectetur adipisicing elit
10 days ago
col
col
Lorem ipsum dolor sit amet
10 January 2016
col
col
Lorem ipsum dolor sit amet, consectetur adipisicing elit
10 January 2016
col
col
<div class="card module-card">
<div class="card-block">
  <div class="module-card-table">
    <div class="row module-card-table-row module-card-table-header">
      <div class="col-sm">Title</div>
      <div class="col-sm">Time</div>
    </div>
    <div class="row module-card-table-row">
      <div class="col-sm">Lorem ipsum dolor </div>
      <div class="col-sm">10 minuate ago</div>
    </div>
  </div>
</div>
</div>

Tabs uses the default Bootstrap tabs with a few added modifier classes

  • .module-tab
  • .module-tab-item
  • .module-tab-link
  • .module-tab-content

The tabs become responsive with the data-name="module-tab" attribute

<ul class="nav nav-tabs module-tab" role="tablist" data-name="module-tab" >
<li class="nav-item module-tab-item">
  <a class="nav-link module-tab-link active" data-toggle="tab" href="#tab-name-1" role="tab">Tab 1</a>
</li>
<li class="nav-item module-tab-item">
  <a class="nav-link module-tab-link" data-toggle="tab" href="#tab-name-2" role="tab">Tab 2</a>
</li>
</ul>
<div class="tab-content module-tab-content">
<div class="tab-pane active" id="tab-name-1" role="tabpanel">
  <div class="card module-card">
    <div class="card-block">
    </div>
  </div>
</div>
<div class="tab-pane" id="tab-name-2" role="tabpanel">
  <div class="card module-card">
    <div class="card-block">
    </div>
  </div>
</div>
</div>

Tabs uses the default Bootstrap tabs with a few added modifier classes

  • .module-tab-vertical
  • .module-tab-vertical-item
  • .module-tab-vertical-link
  • .module-tab-vertical-content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.