- Address
- Basic Headings
- Basic Paragraphs
- Blockquotes
- Custom Type
- Custom Type Examples
- Text Alignment
- Text Utilities
Address
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.![]()
<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.![]()
<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.
<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
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
A basic page for the modern enterprise
<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>
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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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>