mbox style guide

For more style juice, visit mbox on github.

Address

Mozu
1835 Kramer Ln #100
Austin TX 78758
P: 1-800-965-5040
<address>
  <strong>Mozu</strong><br>
  1835 Kramer Ln #100<br>
  Austin TX 78758<br>
  <abbr title="Phone">P:</abbr> 1-800-965-5040
</address>

Basic Headings

This is an H1 heading

This is an H2 heading

This is an H3 heading

This is an H4 heading

This is an H5 heading
This is an H6 heading
<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading</h6>

Modifier Classes

There are three 3 sizes for type: Large, medium (default) and small. Simply apply the size modifier class for the desired size.

Heading Modifier Class Heading Modifier Class Heading Modifier Class

Large H1

.large

Default H1

none

Small H1

.small

Large H2

.large

Default H2

none

Small H2

.small

Large H3

.large

Default H3

none

Small H3

.small

Large H4

.large

Default H4

none

Small H4

.small
Large H5
.large
Default H5
none
Small H5
.small
Large H6
.large
Default H6
none
Small H6
.small

Basic Paragraphs

Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis.

Dolor Ligula

<p>
  Vestibulum id ligula porta <a href="#">felis euismod semper</a>. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis.</p>
  <a href="#" class="cta">Dolor Ligula</a>
</p>

Inline link

Risus Justo Vestibulum Cursus Lorem. Dolor Ligula

<p>
  Risus Justo Vestibulum Cursus Lorem. <a href="#" class="cta display-inline">Dolor Ligula</a>
</p>

Blockquotes

Left aligned

You probably haven't heard of them polaroid hoodie, DIY swag Vice cred.
Tony barnes
Chief Technology Officer, Bluefly
<blockquote>
  <div class="quote-marks">
    You probably haven't heard of them polaroid hoodie, DIY swag Vice cred.
  </div>
  <img class="quote-thumb" src="http://placehold.it/50x50" alt="">
  <div class="quote-author">Tony barnes</div>
  <div class="quote-author-info">Chief Technology Officer, Bluefly</div>
</blockquote>

Right aligned

You probably haven't heard of them polaroid hoodie, DIY swag Vice cred.
Tony barnes
Chief Technology Officer, Bluefly
<blockquote class="blockquote-reverse">
  <div class="quote-marks">
    You probably haven't heard of them polaroid hoodie, DIY swag Vice cred.
  </div>
  <img class="quote-thumb" src="http://placehold.it/50x50" alt="">
  <div class="quote-author">Tony barnes</div>
  <div class="quote-author-info">Chief Technology Officer, Bluefly</div>
</blockquote>

Center aligned

You probably haven't heard of them polaroid hoodie, DIY swag Vice cred.
Tony barnes
Chief Technology Officer, Bluefly
<blockquote class="blockquote-center">
  <div class="quote-marks">
    You probably haven't heard of them polaroid hoodie, DIY swag Vice cred.
  </div>
  <footer>
    <img class="quote-thumb" src="http://placehold.it/50x50" alt="">
    <div class="quote-author">Tony barnes</div>
    <div class="quote-author-info">Chief Technology Officer, Bluefly</div>
  </footer>
</blockquote>

Custom Type

These can be used as classes on any or other element.

Parturient Consectetur Dolor Ligula

<h2 class="h-subhead">Parturient Consectetur Dolor Ligula</h1>

Parturient Consectetur Dolor Ligula Adipiscing

<h2 class="h-prehead">Parturient Consectetur Dolor Ligula Adipiscing</h2>

Parturient Consectetur Dolor Ligula Adipiscing

<h2 class="h-event-title">Parturient Consectetur Dolor Ligula Adipiscing</h3>

Parturient Consectetur Dolor Ligula Adipiscing

<h2 class="h-event-date">Parturient Consectetur Dolor Ligula Adipiscing</h4>

Parturient Consectetur Dolor Ligula Adipiscing

<h2 class="h-press-date">Parturient Consectetur Dolor Ligula Adipiscing</h5>

Custom Type Examples

LIMITLESS COMMERCE SCALABILITY

A basic page for the modern enterprise

Built with the latest architecture, Mozu enables you to take control of your commerce by creating a true omni-channel experience - all powered by a flexible SaaS solution that’s priced on usage, not revenue.
TAKE THE TOUR
<div class="h-prehead horizontal-line">
  LIMITLESS COMMERCE SCALABILITY
</div>
<h2>
  A basic page for the modern enterprise
</h2>
<div class="h-subhead">
  Built with the latest architecture, Mozu enables you to take control of your commerce by creating a true omni-channel experience - all powered by a flexible SaaS solution that’s priced on usage, not revenue.
</div>
<a href="#" class="cta">TAKE THE TOUR</a>

This section breaks up the page

Our clients enjoy the benefits of having a highly-trained staff of e-commerce professionals dedicated to the ongoing success of their Mozu store. Brand Labs handles all of the technical, design, and marketing needs of their websites so that they can focus on what they do best: running their business.

read more
<h4>
  This section breaks up the page
</h4>
<p>
  Our clients enjoy the benefits of having a highly-trained staff of e-commerce professionals dedicated to the ongoing success of their Mozu store. Brand Labs handles all of the technical, design, and marketing needs of their websites so that they can focus on what they do best: running their business.
</p>
<a href="#" class="cta">
  read more
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
  </span>
</a>

Resoure title

Echidna is a full service agency specializing in user experience design and ecommerce strategy. Our leaders have run and built large ecommerce sites like Sam’s Club, Urban Outfitters, Best Buy and Anthropologie among many others and we bring this expertise to help you build and manage world-class commerce experiences.

<h3>
  Resoure title
</h3>
<p>
  Echidna is a full service agency specializing in user experience design and ecommerce strategy. Our leaders have run and built large ecommerce sites like Sam’s Club, Urban Outfitters, Best Buy and Anthropologie among many others and we bring this expertise to help you build and manage world-class commerce experiences.
</p>
A spectacular event
march 14, 2015 | bat bar | austin, texas | 7-11PM

Join Mozu at SXSW as we discuss responsive design. Can’t make the session? Join us for our official SXSW party!

Register today!
<div class="h-event-title">
  A spectacular event
</div>
<div class="h-event-date">
  march 14, 2015 | bat bar | austin, texas | 7-11PM
</div>
<p>
  Join Mozu at SXSW as we discuss responsive design. Can’t make the session? Join us for our official SXSW party!
</p>
<a href="#" class="cta">
  Register today!
</a>

This Press Release Secured $55 Million in Financing to Accelerate Growth Plans

Thursday, jan 29, 2015
Read More
<h3>
  This Press Release Secured $55 Million in Financing to Accelerate Growth Plans
</h3>
<div class="h-press-date">
  Thursday, jan 29, 2015
</div>
<a href="#" class="cta">
  Read More
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
  </span>
</a>

Text Alignment

Class Extra small devices (<768px) Small devices (>768px) Medium devices (>992px) Large devices (>1200px)
.text-left left left left left
.text-right right right right right
.text-center center center center center
.text-justify justify justify justify justify
.xs-text-left left inherit inherit inherit
.sm-text-left inherit left inherit inherit
.md-text-left inherit inherit left left
.lg-text-left inherit inherit inherit hidden
.xs-text-right right inherit inherit inherit
.sm-text-right inherit right inherit inherit
.md-text-right inherit inherit right right
.lg-text-right inherit inherit inherit hidden
.xs-text-center center inherit inherit inherit
.sm-text-center inherit center inherit inherit
.md-text-center inherit inherit center inherit
.lg-text-center inherit inherit inherit center
.xs-text-justify justify inherit inherit inherit
.sm-text-justify inherit justify inherit inherit
.md-text-justify inherit inherit justify inherit
.lg-text-justify inherit inherit inherit justify

Basic Text Alignment

text-left
text-right
text-center
text-justify
<div class="row">
  <div class="col-md-3 border-grey">
    <div class="text-left">text-left</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="text-right">text-right</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="text-center">text-center</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="text-justify">text-justify</div>
  </div>
</div>

Responsive Text Alignment

Text left

xs-text-left
sm-text-left
md-text-left
lg-text-left
<div class="row">
  <div class="col-md-3 border-grey">
    <div class="xs-text-left">xs-text-left</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="sm-text-left">sm-text-left</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="md-text-left">md-text-left</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="lg-text-left">lg-text-left</div>
  </div>
</div>

Text right

xs-text-right
sm-text-right
md-text-right
lg-text-right
<div class="row">
  <div class="col-md-3 border-grey">
    <div class="xs-text-right">xs-text-right</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="sm-text-right">sm-text-right</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="md-text-right">md-text-right</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="lg-text-right">lg-text-right</div>
  </div>
</div>

Text center

xs-text-center
sm-text-center
md-text-center
lg-text-center
<div class="row">
  <div class="col-md-3 border-grey">
    <div class="xs-text-center">xs-text-center</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="sm-text-center">sm-text-center</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="md-text-center">md-text-center</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="lg-text-center">lg-text-center</div>
  </div>
</div>

Text justify

xs-text-justify
sm-text-justify
md-text-justify
lg-text-justify
<div class="row">
  <div class="col-md-3 border-grey">
    <div class="xs-text-justify">xs-text-justify</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="sm-text-justify">sm-text-justify</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="md-text-justify">md-text-justify</div>
  </div>
  <div class="col-md-3 border-grey">
    <div class="lg-text-justify">lg-text-justify</div>
  </div>
</div>

Text Utilities

Small

Keffiyeh fashion axe biodiesel tote bag meditation.
Pour-over crucifix hella, seitan Wes Anderson PBR Blue Bottle.
<div class="small">Keffiyeh fashion axe biodiesel tote bag meditation.</div>
<small>Pour-over crucifix hella, seitan Wes Anderson PBR Blue Bottle.</small>

Text width

Jean shorts McSweeney's art party normcore raw denim cred.
Shoreditch McSweeney's Echo Park PBR, 8-bit flexitarian deep v ethical.
<div class="text-narrow">Jean shorts McSweeney's art party normcore raw denim cred.</div>
<div class="text-wide">Shoreditch McSweeney's Echo Park PBR, 8-bit flexitarian deep v ethical.</div>

Text transform

Selfies leggings flexitarian squid roof party fingerstache.
Quinoa wolf cliche, kale chips vinyl fingerstache church-key before they sold out.
<div class="text-uppercase">Selfies leggings flexitarian squid roof party fingerstache.</div>
<div class="text-default-case">Quinoa wolf cliche, kale chips vinyl fingerstache church-key before they sold out.</div>

Text weight and style

Austin polaroid chillwave, squid health goth butcher actually master cleanse chia.
Small batch pickled lo-fi 90's, cold-pressed migas lomo kitsch.
Pour-over synth aesthetic fashion axe.
Cronut sartorial disrupt stumptown, taxidermy 3 wolf moon Blue Bottle readymade mixtape.
Narwhal scenester keytar skateboard butcher, Neutra pickled crucifix literally.
Helvetica lomo narwhal, keytar street art kitsch ethical Wes Anderson.
<div class="text-bold">Austin polaroid chillwave, squid health goth butcher actually master cleanse chia.</div>
<div class="text-light">Small batch pickled lo-fi 90's, cold-pressed migas lomo kitsch.</div>
<div class="text-book">Pour-over synth aesthetic fashion axe.</div>
<div class="text-medium">Cronut sartorial disrupt stumptown, taxidermy 3 wolf moon Blue Bottle readymade mixtape.</div>
<div class="text-normal">Narwhal scenester keytar skateboard butcher, Neutra pickled crucifix literally.</div>
<div class="text-italic">Helvetica lomo narwhal, keytar street art kitsch ethical Wes Anderson.</div>

Text color

Fingerstache health goth pop-up umami bicycle rights fashion axe vinyl readymade.
Tousled drinking vinegar hella whatever single-origin coffee viral selfies fixie letterpres.
Synth twee artisan before they sold out pop-up bitters, Brooklyn keffiyeh tattooed.
Four dollar toast locavore, Vice flexitarian trustfund umami artisan chambray gastropub.
McSweeney's flexitarian literally artisan synth YOLO try-hard.
Pitchfork shabby chic single-origin coffee, twee Intelligentsia cronut.
Locavore master cleanse Pitchfork, church-key flannel put a bird on it.
Letterpress art party narwhal, jean shorts four loko locavore Bushwick pickled.
<div class="bg-light-grey text-white">Fingerstache health goth pop-up umami bicycle rights fashion axe vinyl readymade.</div>
<div class="text-black">Tousled drinking vinegar hella whatever single-origin coffee viral selfies fixie letterpres.</div>
<div class="text-red">Synth twee artisan before they sold out pop-up bitters, Brooklyn keffiyeh tattooed.</div>
<div class="text-grey">Four dollar toast locavore, Vice flexitarian trustfund umami artisan chambray gastropub.</div>
<div class="text-dark-grey">McSweeney's flexitarian literally artisan synth YOLO try-hard.</div>
<div class="text-darker-grey">Pitchfork shabby chic single-origin coffee, twee Intelligentsia cronut.</div>
<div class="text-light-grey">Locavore master cleanse Pitchfork, church-key flannel put a bird on it.</div>
<div class="text-lighter-grey">Letterpress art party narwhal, jean shorts four loko locavore Bushwick pickled.</div>