Marketing Analytics Platform - Application Style Guide

Colors

.bg-primary
.bg-secondary
.bg-success
.bg-orange
.bg-gray-darker
.bg-gray-dark
.bg-gray
.bg-gray-mid
.bg-gray-light
.bg-gray-lighter
.bg-gray-lightest
.bg-primary-g
.bg-secondary-g
.bg-green-g
.bg-orange-g
.bg-charting-blue
.bg-charting-blue-light
.bg-charting-teal
.bg-charting-teal-light
.bg-charting-orange
.bg-charting-orange-light
.bg-charting-yellow
.bg-charting-yellow-light
.bg-charting-gray
.bg-charting-gray-light
<div class="p-2 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-2 mb-2 bg-secondary text-gray-dark">.bg-secondary</div>
<div class="p-2 mb-2 bg-success text-white">.bg-success</div>
<div class="p-2 mb-2 bg-orange text-white">.bg-orange</div>
<div class="p-2 mb-2 bg-gray-darker text-white">.bg-gray-darker</div>
<div class="p-2 mb-2 bg-gray-dark text-white">.bg-gray-dark</div>
<div class="p-2 mb-2 bg-gray text-white">.bg-gray</div>
<div class="p-2 mb-2 bg-gray-mid text-white">.bg-gray-mid</div>
<div class="p-2 mb-2 bg-gray-light text-gray-dark">.bg-gray-light</div>
<div class="p-2 mb-2 bg-gray-lighter text-gray-dark">.bg-gray-lighter</div>
<div class="p-2 mb-2 bg-gray-lightest text-gray-dark">.bg-gray-lightest</div>

<!-- Gradients -->
<div class="p-2 mb-2 bg-primary-g text-white">.bg-primary-g</div>
<div class="p-2 mb-2 bg-secondary-g text-gray-dark">.bg-secondary-g</div>
<div class="p-2 mb-2 bg-green-g text-white">.bg-green-g</div>
<div class="p-2 mb-2 bg-orange-g text-white">.bg-orange-g</div>

<!-- Charting Colors -->
<div class="p-2 mb-2 bg-charting-blue text-white">.bg-charting-blue</div>
<div class="p-2 mb-2 bg-charting-blue-light text-gray-dark">.bg-charting-blue-light</div>
<div class="p-2 mb-2 bg-charting-teal text-white">.bg-charting-teal</div>
<div class="p-2 mb-2 bg-charting-teal-light text-gray-dark">.bg-charting-teal-light</div>
<div class="p-2 mb-2 bg-charting-orange text-white">.bg-charting-orange</div>
<div class="p-2 mb-2 bg-charting-orange-light text-gray-dark">.bg-charting-orange-light</div>
<div class="p-2 mb-2 bg-charting-yellow text-white">.bg-charting-yellow</div>
<div class="p-2 mb-2 bg-charting-yellow-light text-gray-dark">.bg-charting-yellow-light</div>
<div class="p-2 mb-2 bg-charting-gray text-white">.bg-charting-gray</div>
<div class="p-2 mb-2 bg-charting-gray-light text-gray-dark">.bg-charting-gray-light</div>

Typography arrow_upward

Primary font is Source Sans Pro by Google Fonts.

Heading 1

Heading 2

Heading 3

Heading 4

Bold text.

Normal weight text.

Italicized text.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

$85,295,535

<p>
  Primary font is <a href="https://fonts.google.com/specimen/Source+Sans+Pro" target="_blank">Source Sans Pro</a> by Google Fonts.
</p>

<h1>Heading 1</h1>
<h2>Heading 2</h1>
<h3>Heading 3</h1>
<h4>Heading 4</h1>

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-italic">Italicized text.</p>
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

<h4 class="text-success font-weight-normal">$85,295,535</h4>

Iconography arrow_upward

Icons are from the Google Material Design Icons library. Access over 900 material system icons, available in a variety of sizes and densities, and as a web font.

arrow_upward wb_sunny home edit notifications

check info
<p>
  Icons are from the <a href="https://material.io/icons/" target="_blank">Google Material Design Icons</a> library. Access over 900 material system icons, available in a variety of sizes and densities, and as a web font.
</p>

<i class="material-icons">arrow_upward</i>
<i class="material-icons">wb_sunny</i>
<i class="material-icons">home</i>
<i class="material-icons">edit</i>
<i class="material-icons">notifications</i>

<br /> <br /> <!-- with color classes -->
<i class="material-icons text-success">check</i>
<i class="material-icons text-gray-light">info</i>

Buttons arrow_upward







<!-- Inline Buttons -->
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Green</button>
<button type="button" class="btn btn-orange">Orange</button>

<br /> <br /> <!-- Buttons with Icon -->
<button type="button" class="btn btn-link">Link <i class="material-icons">arrow_forward</i></button>
<button type="button" class="btn btn-primary">Primary <i class="material-icons">arrow_forward</i></button>
<button type="button" class="btn btn-secondary">Secondary <i class="material-icons">arrow_forward</i></button>
<button type="button" class="btn btn-success">Green <i class="material-icons">arrow_forward</i></button>
<button type="button" class="btn btn-orange">Orange <i class="material-icons">arrow_forward</i></button>

<br /> <br /> <!-- Icon Only -->
<button type="button" class="btn btn-icon btn-link"><i class="material-icons">home</i></button>
<button type="button" class="btn btn-icon btn-primary"><i class="material-icons">home</i></button>
<button type="button" class="btn btn-icon btn-secondary"><i class="material-icons">home</i></button>
<button type="button" class="btn btn-icon btn-success"><i class="material-icons">home</i></button>
<button type="button" class="btn btn-icon btn-orange"><i class="material-icons">home</i></button>


<br /> <br /> <!-- Block Buttons -->
<button type="button" class="btn btn-block btn-link">Link</button>
<button type="button" class="btn btn-block btn-primary">Primary Block</button>
<button type="button" class="btn btn-block btn-secondary">Secondary Block</button>
<button type="button" class="btn btn-block btn-success">Green Block</button>
<button type="button" class="btn btn-block btn-orange">Orange Block</button>

Input & Form Elements arrow_upward









@

@example.com

https://example.com/users/

$ .00

$ .00

$ 0.00

@











<!-- Radio Buttons -->
<label class="custom-control custom-radio">
  <input id="radio1" name="radio" type="radio" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Toggle this custom radio</span>
</label>
<label class="custom-control custom-radio">
  <input id="radio2" name="radio" type="radio" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Or toggle this other custom radio</span>
</label>

<br /> <br /> <!-- Checkboxes -->
<label class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Check this custom checkbox</span>
</label>

<br /> <br /> <!-- Button Radio Groups -->
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

<br /> <br /> <!-- Select List -->
<select class="custom-select">
  <option selected="">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<br /> <br /> <!-- Input Groups -->
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<br>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<br>
<div class="input-group">
  <span class="input-group-addon">$</span>
  <select class="custom-select">
    <option selected="">Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
  <span class="input-group-addon">$</span>
  <span class="input-group-addon">0.00</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
<br>
<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="sizing-addon2">
</div>

<br /> <br /> <!-- Progress Bars -->
<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<br /> <br /> <!-- Select List -->


<br /> <br /> <!-- Select List -->


<br /> <br /> <!-- Select List -->

<br /> <br /> <!-- Select List -->

Badges arrow_upward

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Primary Success Info Warning Danger
<h1>Example heading <span class="badge badge-primary">New</span></h1>
<h2>Example heading <span class="badge badge-primary">New</span></h2>
<h3>Example heading <span class="badge badge-primary">New</span></h3>
<h4>Example heading <span class="badge badge-primary">New</span></h4>
<h5>Example heading <span class="badge badge-primary">New</span></h5>
<h6>Example heading <span class="badge badge-primary">New</span></h6>

<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>

<!-- Gradients -->

Tooltips arrow_upward

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Cards arrow_upward

Card Header info

Card body

<!-- Layout Cards -->
<div class="card bg-white">
  <div class="card-header">
    <h4>Card Header <i class="material-icons text-gray-light">info</i></h4>
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off"> Option
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off" checked> Another Option
      </label>
    </div>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col">
        <P>Card body</P>
        </div>
    </div>
  </div>
</div>

Modals arrow_upward

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal3">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModal3Label" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header bg-primary-g">
        <h5 class="modal-title" id="exampleModal3Label">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        Modal body content here. 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>