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