mbox style guide

For more style juice, visit mbox on github.

Buttons

Button styles can be applied to any element. Typically you'll want to use either a <button> or an <a> element.

If your button is actually a link to another page, please use the <a> element, while if your button performs an action, such as submitting a form or triggering some javascript event, then use a <button> element.

Dark on light

<button class='btn btn-red'>Button text</button>
<button class='btn btn-black'>Button text</button>
<button class='btn btn-grey'>Button text</button>
<button class='btn btn-red-outline'>Button text</button>
<button class='btn btn-black-outline'>Button text</button>
<button class='btn btn-grey-outline'>Button text</button>
<button class='btn btn-link'>Button text</button>

Light on dark

<div class="well bg-grey">
  <button class='btn btn-white'>Button text</button>
  <button class='btn btn-white-outline'>Button text</button>
</div>

Button Sizes

There are three 4 sizes for buttons: Large, medium (default) and extra small. Simply apply the size modifier class for the desired size. There is also an additional modifier that will make the button take the full width of the container. It may be used with the any of the button size and style modifiers.

Button Modifier class Source code
.btn-lg <button class="btn btn-red btn-lg">Large</button>
none <button class="btn btn-red">Default</button>
.btn-sm <button class="btn btn-red btn-sm">Small</button>
.btn-xs <button class="btn btn-red btn-xs">Extra Small</button>
.btn-block <button class="btn btn-red btn-block">Full width</button>

Code

To display code, wrap it in <pre> <code> tags, and replace the carats with the &lt; or &gt;. Below is the output of a code block, followed by the html.

Basic code block


  <div class="jumbotron my-jumbotron">
    <div class="container text-center">
      <h1>This is a title</h1>
      <div class="h-subhead">This is a subhead</div>
    </div>
  </div>


<pre>
<code>
  &lt;div class="jumbotron my-jumbotron"&gt;
    &lt;div class="container text-center"&gt;
      &lt;h1&gt;This is a title&lt;/h1&gt;
      &lt;div class="h-subhead"&gt;This is a subhead&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</code>
</pre>

Scrollable code block


  <div class="jumbotron my-jumbotron">
    <div class="container text-center">
      <h1>This is a title</h1>
      <div class="h-subhead">This is a subhead</div>
      <p>This is a really long paragraph. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
  </div>


<pre class="pre-scrollable">
<code>
  &lt;div class="jumbotron my-jumbotron"&gt;
    &lt;div class="container text-center"&gt;
      &lt;h1&gt;This is a title&lt;/h1&gt;
      &lt;div class="h-subhead"&gt;This is a subhead&lt;/div&gt;
      &lt;p&gt;This is a really long paragraph. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
      &lt;p&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
      &lt;p&gt;Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</code>
</pre>

Color

See also background color, border color, or text color utilities.

$red
#df3018
$black
#1d2021
$darker-grey
#3f4243
$dark-grey
#727779
$grey
#bbbebf
$light-grey
#e8e8e8
$lighter-grey
#eef0f0
$white
#FFFFFF
$trans-white
rgba(255,255,255,.85)

Forms

Marketo forms

Wrap the Marketo embed code in .marketo-form with an optional class for the number of form columns. To leverage the dropdown styles shown here, you must also use the Mozu custom implementation (for all features) or use the Fancy Select library and call the .fancySelect() method on the form (for dropdown styles only).

Form Variations

style class usage features/notes
default .marketo-form use default marketo embed code
  • ugly dropdowns
mozu custom .marketo-form use custom embed code (below)
requires marketoForms.js
  • fancy dropdown
  • on-page thank you message
  • push to data layer
  • additional functions on load and submit (optional)
1 column .form--1-col add class to .marketo-form element
2 column .form--2-col add class to .marketo-form element columns must be configured in Marketo
3 column .form--3-col add class to .marketo-form element columns must be configured in Marketo
autofill with linkedin .form--linkedin add class to .marketo-form element social sign on must be turned on in Marketo
Select...
  • President / CEO
  • Marketing - VP / CMO
  • Marketing - Manager
Select...
  • Less than $1M
  • $1M - $5M
  • $5M - $10M 
<!-- default marketo embed code
<script src="//app-sjg.marketo.com/js/forms2/js/forms2.min.js"></script>
  <form id="mktoForm_35"></form>
<script>MktoForms2.loadForm("//app-sjg.marketo.com", "702-MYH-396", 35);</script>
-->

<!-- custom marketo embed code
<div class="marketo-form">
  <div class="thankyou-msg"></div>
</div>
<script>
jQuery(document).ready(function(){
    formatForm.init({
        formContainerClass: 'marketo-form',
        formMarketoID: '35',
        onSubmitShowClass: 'thankyou-msg',
        onSubmitHideClass: 'mktoForm',
        dataLayerOnOff: true,
        dataLayerEvent: 'track',
        dataLayerEventWhat: 'Lead Form Submitted',
        dataLayerEventWhere: 'Main Content',
        dataLayerEventHow: 'Click Submit',
        dataLayerContactType: 'gatedContent'
        // dataLayerContactTypeFieldID: '#Inquiry_type__c',
        // onLoadFunction: null,
        // onSubmitFunction: null
    });
});
</script>
-->

<div class="marketo-form form--2-col">
  <!--begin code returned from marketo...-->
  <form id="mktoForm_35" novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft" style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: rgb(51, 51, 51); width: 541px;"> <div class="mktoFormRow"> <div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;"> <div class="mktoOffset" style="width: 10px;"> </div><div class="mktoFieldWrap mktoRequiredField"> <label for="FirstName" class="mktoLabel mktoHasWidth" style="width: 100px;"> <div class="mktoAsterix"> * </div>First Name </label> <div class="mktoGutter mktoHasWidth" style="width: 10px;"> </div><input id="FirstName" name="FirstName" placeholder="" maxlength="255" title="First Name*" type="text" class="mktoField mktoTextField mktoHasWidth mktoRequired" style="width: 150px; cursor: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;"> <div class="mktoClear"> </div></div><div class="mktoClear"> </div></div><div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;"> <div class="mktoOffset" style="width: 10px;"> </div><div class="mktoFieldWrap mktoRequiredField"> <label for="LastName" class="mktoLabel mktoHasWidth" style="width: 100px;"> <div class="mktoAsterix"> * </div>Last Name </label> <div class="mktoGutter mktoHasWidth" style="width: 10px;"> </div><input id="LastName" name="LastName" placeholder="" maxlength="255" title="Last Name*" type="text" class="mktoField mktoTextField mktoHasWidth mktoRequired" style="width: 150px;"> <div class="mktoClear"> </div></div><div class="mktoClear"> </div></div><div class="mktoClear"> </div></div><div class="mktoFormRow"> <div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;"> <div class="mktoOffset" style="width: 10px;"> </div><div class="mktoFieldWrap mktoRequiredField"> <label for="Email" class="mktoLabel mktoHasWidth" style="width: 100px;"> <div class="mktoAsterix"> * </div>Business Email Address </label> <div class="mktoGutter mktoHasWidth" style="width: 10px;"> </div><input id="Email" name="Email" placeholder="" maxlength="255" title="Business Email Address*" type="email" class="mktoField mktoEmailField mktoHasWidth mktoRequired" style="width: 150px;"> <div class="mktoClear"> </div></div><div class="mktoClear"> </div></div><div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;"> <div class="mktoOffset" style="width: 10px;"> </div><div class="mktoFieldWrap mktoRequiredField"> <label for="Phone" class="mktoLabel mktoHasWidth" style="width: 100px;"> <div class="mktoAsterix"> * </div>Phone Number </label> <div class="mktoGutter mktoHasWidth" style="width: 10px;"> </div><input id="Phone" name="Phone" placeholder="" maxlength="255" title="Phone Number*" type="tel" class="mktoField mktoTelField mktoHasWidth mktoRequired" style="width: 150px;"> <div class="mktoClear"> </div></div><div class="mktoClear"> </div></div><div class="mktoClear"> </div></div><div class="mktoFormRow"> <div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;"> <div class="mktoOffset" style="width: 10px;"> </div><div class="mktoFieldWrap mktoRequiredField"> <label for="Company" class="mktoLabel mktoHasWidth" style="width: 100px;"> <div class="mktoAsterix"> * </div>Company </label> <div class="mktoGutter mktoHasWidth" style="width: 10px;"> </div><input id="Company" name="Company" placeholder="" maxlength="255" title="Company*" type="text" class="mktoField mktoTextField mktoHasWidth mktoRequired" style="width: 150px;"> <div class="mktoClear"> </div></div><div class="mktoClear"> </div></div><div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;"> <div class="mktoOffset" style="width: 10px;"> </div><div class="mktoFieldWrap mktoRequiredField"> <label for="Job_Function__c" class="mktoLabel mktoHasWidth" style="width: 100px;"> <div class="mktoAsterix"> * </div>Job Function </label> <div class="mktoGutter mktoHasWidth" style="width: 10px;"> </div><div class="fancy-select"> <select id="Job_Function__c" name="Job_Function__c" class="mktoField mktoHasWidth mktoRequired fancy-select fancified" style="width: 1px; height: 1px; display: block; position: absolute; top: 0px; left: 0px; opacity: 0;"> <option value=""> Select... </option> <option value="President / CEO"> President / CEO </option> <option value="Marketing - VP / CMO"> Marketing - VP / CMO </option> <option value="Marketing - Manager"> Marketing - Manager </option> </select> <div class="trigger"> Select... </div><ul class="options"> <li data-raw-value="President / CEO"> President / CEO </li><li data-raw-value="Marketing - VP / CMO"> Marketing - VP / CMO </li><li data-raw-value="Marketing - Manager"> Marketing - Manager </li></ul> </div><div class="mktoClear"> </div></div><div class="mktoClear"> </div></div><div class="mktoClear"> </div></div><div class="mktoFormRow"> <div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;"> <div class="mktoOffset" style="width: 10px;"> </div><div class="mktoFieldWrap mktoRequiredField"> <label for="Online_Revenue__c" class="mktoLabel mktoHasWidth" style="width: 100px;"> <div class="mktoAsterix"> * </div>Online Revenue </label> <div class="mktoGutter mktoHasWidth" style="width: 10px;"> </div><div class="fancy-select"> <select id="Online_Revenue__c" name="Online_Revenue__c" class="mktoField mktoHasWidth mktoRequired fancy-select fancified" style="width: 1px; height: 1px; display: block; position: absolute; top: 0px; left: 0px; opacity: 0;"> <option value=""> Select... </option> <option value="Less than $1M"> Less than $1M </option> <option value="$1M - $5M"> $1M - $5M </option> <option value="$5M - $10M"> $5M - $10M </option> </select> <div class="trigger"> Select... </div><ul class="options"> <li data-raw-value="Less than $1M"> Less than $1M </li><li data-raw-value="$1M - $5M"> $1M - $5M </li><li data-raw-value="$5M - $10M"> $5M - $10M </li></ul> </div><div class="mktoClear"> </div></div><div class="mktoClear"> </div></div><div class="mktoClear"> </div></div><div class="mktoFormRow"> <input type="hidden" name="Business_type__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="mozu" placeholder="" style="margin-bottom: 10px;"> <div class="mktoClear"> </div></div><div class="mktoFormRow"> <input type="hidden" name="LeadSource" class="mktoField mktoFieldDescriptor mktoFormCol" value="Mozu - Request demo webform" placeholder="" style="margin-bottom: 10px;"> <div class="mktoClear"> </div></div><div class="mktoFormRow"> <input type="hidden" name="Demo_Requested__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="Yes" placeholder="" style="margin-bottom: 10px;"> <div class="mktoClear"> </div></div><div class="mktoFormRow"> <input type="hidden" name="Inquiry_type__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="Sales" placeholder="" style="margin-bottom: 10px;"> <div class="mktoClear"> </div></div><div class="mktoFormRow"> <input type="hidden" name="InternalUseMunchkinId__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="id:702-MYH-396&amp;token:_mch-mozu.com-1438726296298-60876" placeholder="" style="margin-bottom: 10px;"> <div class="mktoClear"> </div></div><div class="mktoButtonRow"> <span class="mktoButtonWrap mktoSimple" style="margin-left: 17px;"> <button type="submit" class="mktoButton"> Request a demo </button> </span> </div><input type="hidden" name="formid" class="mktoField mktoFieldDescriptor" value="35" placeholder=""> <input type="hidden" name="munchkinId" class="mktoField mktoFieldDescriptor" value="702-MYH-396" placeholder=""></form>
  <!--end code returned from marketo...-->
</div>

Horizontal rule

<hr>

Images

Responsive images

Ensures image doesn't scale beyond its parent

<img src="http://loremflickr.com/g/320/240/puppy?randomize=1" class="img-responsive">

Image thumbnails

<img src="http://loremflickr.com/g/320/240/puppy?randomize=2" class="img-thumbnail">

Perfect circle

<img src="http://loremflickr.com/g/320/320/puppy?randomize=3" class="img-circle">

Lists

Default

  • Chillwave
  • Kickstarter
  • Bicycle rights
<ul>
  <li>Chillwave</li>
  <li>Kickstarter</li>
  <li>Bicycle rights</li>
</ul>

Unstyled

  • Direct trade
  • Godard
  • Biodiesel
<ul class="list-unstyled">
  <li>Direct trade</li>
  <li>Godard</li>
  <li>Biodiesel</li>
</ul>

No bullet

  • Banksy
  • Fixie
  • Umami
<ul class="list-nobullet">
  <li>Banksy</li>
  <li>Fixie</li>
  <li>Umami</li>
</ul>

Inline

  • Pour-over
  • Drinking vinegar
  • Kale chips
<ul class="list-inline">
  <li>Pour-over</li>
  <li>Drinking vinegar</li>
  <li>Kale chips</li>
</ul>

Description Lists

Lo-fi
Kitsch heirloom meggings
Scenester
Retro kale chips McSweeney's
Godard
Hashtag normcore tofu
<dl>
  <dt>Lo-fi</dt>
  <dd>Kitsch heirloom meggings</dd>
  <dt>Scenester</dt>
  <dd>Retro kale chips McSweeney's</dd>
  <dt>Godard</dt>
  <dd>Hashtag normcore tofu</dd>
</dl>

Horizontal description lists

Migas
Fixie before they sold out post-ironic
Gastropub
PBR next level Etsy twee ugh roof party
XOXO
Cray cardigan Schlitz
<dl class="dl-horizontal">
  <dt>Migas</dt>
  <dd>Fixie before they sold out post-ironic</dd>
  <dt>Gastropub</dt>
  <dd>PBR next level Etsy twee ugh roof party</dd>
  <dt>XOXO</dt>
  <dd>Cray cardigan Schlitz</dd>
</dl>

Tables

Basic Table

Table caption.
#First NameLast NameUsername
1HarryPotter@patronusmaximus
2RonWeasley@gingerbunny
3HermioneGranger@littlemissfancypants
 
<table class="table">
  <caption>Table caption.</caption>
  <thead>
    <tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td>Harry</td><td>Potter</td><td>@patronusmaximus</td></tr>
    <tr><th scope="row">2</th><td>Ron</td><td>Weasley</td><td>@gingerbunny</td></tr>
    <tr><th scope="row">3</th><td>Hermione</td><td>Granger</td><td>@littlemissfancypants</td></tr>
  </tbody>
</table>

Condensed Table

Table caption.
#First NameLast NameUsername
1HarryPotter@patronusmaximus
2RonWeasley@gingerbunny
3HermioneGranger@littlemissfancypants
 
<table class="table table-condensed">
  <caption>Table caption.</caption>
  <thead>
    <tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td>Harry</td><td>Potter</td><td>@patronusmaximus</td></tr>
    <tr><th scope="row">2</th><td>Ron</td><td>Weasley</td><td>@gingerbunny</td></tr>
    <tr><th scope="row">3</th><td>Hermione</td><td>Granger</td><td>@littlemissfancypants</td></tr>
  </tbody>
</table>

Bordered Table

Table caption.
#First NameLast NameUsername
1HarryPotter@patronusmaximus
2RonWeasley@gingerbunny
3HermioneGranger@littlemissfancypants
 
<table class="table table-bordered">
  <caption>Table caption.</caption>
  <thead>
    <tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td>Harry</td><td>Potter</td><td>@patronusmaximus</td></tr>
    <tr><th scope="row">2</th><td>Ron</td><td>Weasley</td><td>@gingerbunny</td></tr>
    <tr><th scope="row">3</th><td>Hermione</td><td>Granger</td><td>@littlemissfancypants</td></tr>
  </tbody>
</table>

Striped Table

Table caption.
#First NameLast NameUsername
1HarryPotter@patronusmaximus
2RonWeasley@gingerbunny
3HermioneGranger@littlemissfancypants
 
<table class="table table-striped">
  <caption>Table caption.</caption>
  <thead>
    <tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td>Harry</td><td>Potter</td><td>@patronusmaximus</td></tr>
    <tr><th scope="row">2</th><td>Ron</td><td>Weasley</td><td>@gingerbunny</td></tr>
    <tr><th scope="row">3</th><td>Hermione</td><td>Granger</td><td>@littlemissfancypants</td></tr>
  </tbody>
</table>

Hover Table

Table caption.
#First NameLast NameUsername
1HarryPotter@patronusmaximus
2RonWeasley@gingerbunny
3HermioneGranger@littlemissfancypants
 
<table class="table table-hover">
  <caption>Table caption.</caption>
  <thead>
    <tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td>Harry</td><td>Potter</td><td>@patronusmaximus</td></tr>
    <tr><th scope="row">2</th><td>Ron</td><td>Weasley</td><td>@gingerbunny</td></tr>
    <tr><th scope="row">3</th><td>Hermione</td><td>Granger</td><td>@littlemissfancypants</td></tr>
  </tbody>
</table>

Responsive Table

Wrap any .table in .table-responsive to make it scroll horizontally on small devices (under 768px).

Table caption.
#First NameLast NameUsername
1HarryPotter@patronusmaximus
2RonWeasley@gingerbunny
3HermioneGranger@littlemissfancypants
 
<div class="table-responsive">
  <table class="table table-bordered">
  <caption>Table caption.</caption>
  <thead>
    <tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td>Harry</td><td>Potter</td><td>@patronusmaximus</td></tr>
    <tr><th scope="row">2</th><td>Ron</td><td>Weasley</td><td>@gingerbunny</td></tr>
    <tr><th scope="row">3</th><td>Hermione</td><td>Granger</td><td>@littlemissfancypants</td></tr>
  </tbody>
</table>
</div>