5 #permalink Boxes
Boxes should be able to contain almost any other element, but mostly they will contain header text, paragraph text, lists, forms and buttons.
Title of box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut. Fusce tincidunt ligula quis dolor tempus, at tincidunt diam lacinia.
Title of box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut. Fusce tincidunt ligula quis dolor tempus, at tincidunt diam lacinia.
<div class="box [modifier class]">
<h3 class="box-title">Title of box</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
Fusce tincidunt ligula
<a href="#">quis dolor tempus</a>, at tincidunt diam lacinia.
</p>
<div class="btn-row">
<a href="#" class="btn btn-default" role="button">Button</a>
</div>
</div>
Title of box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut. Fusce tincidunt ligula quis dolor tempus, at tincidunt diam lacinia.
<div class="box">
<div class="asset">
<img src="http://www.fillmurray.com/1200/800"/>
</div>
<h3 class="box-title">Title of box</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
Fusce tincidunt ligula
<a href="#">quis dolor tempus</a>, at tincidunt diam lacinia.
</p>
<div class="btn-row">
<a href="#" class="btn btn-default" role="button">Button</a>
</div>
</div>
5.3 #permalink With Image and header feature
In the real version of the theme, the circle will appear much smaller and fixed to the left
A short eye-catching header
Title of box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut. Fusce tincidunt ligula quis dolor tempus, at tincidunt diam lacinia.
<div class="box">
<div class="asset">
<img src="http://www.fillmurray.com/1400/1100"/>
<div class="heading">
<div class="bubble">
<div class="bubble-outer">
<div class="bubble-inner">
<div class="bubble-text">
<h2 class="bubble-title">A short eye-catching header</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<h3 class="box-title">Title of box</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
Fusce tincidunt ligula
<a href="#">quis dolor tempus</a>, at tincidunt diam lacinia.
</p>
<div class="btn-row">
<a href="#" class="btn btn-default" role="button">Button</a>
</div>
</div>
Title of box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut. Fusce tincidunt ligula quis dolor tempus, at tincidunt diam lacinia.
<div class="box box-cosy">
<div class="asset">
<img src="http://www.fillmurray.com/1400/1100"/>
</div>
<h3 class="box-title">Title of box</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
Fusce tincidunt ligula
<a href="#">quis dolor tempus</a>, at tincidunt diam lacinia.
</p>
<div class="btn-row">
<a href="#" class="btn btn-default" role="button">Button</a>
</div>
</div>
5.5 #permalink Filter box
These are used for thing such as news category lists. It will collapse to an accordian style menu at mobile size.
Select a category
<main>
<div class="box">
<h3 data-toggle="collapse" data-target="#something-categories-collapse">Select a category</h3>
<nav class="navbar navbar-default" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#something-categories-collapse">
<span class="sr-only">Toggle filter</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="something-categories-collapse">
<ul class="filter">
<li class="active">
<a href="#">
<span class="badge pull-right">423</span>Category Item A
</a>
</li>
<li>
<a href="#">
<span class="badge pull-right">148</span>Category Item B
</a>
</li>
<li>
<a href="#">
<span class="badge pull-right">120</span>Category Item C
</a>
</li>
</ul>
</div>
</nav>
</div>
</main>
5.6 #permalink Btn Row Text
Used for text that needs the same spacing as a button
Content here
<div class="box">
<p>Content here</p>
<div class="btn-row">
<span class="btn-row-text pull-left">01-05-2014</span>
<span class="btn btn-link pull-right">Read More</span>
</div>
</div>
5.7 #permalink Box No Padding
Used for image picker where theres' no body content.
<div class="box box-nopad">
<div class="asset">
<img src="http://www.fillmurray.com/1400/1100"/>
</div>
<div class="btn-row">
<a href="#" class="btn btn-default" role="button">Button</a>
</div>
</div>
5.8 #permalink Box Active
5.10 #permalink Box Flex
Box that flexes to a parent flexer flex flex, requires box-body
Title of box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut. Fusce tincidunt ligula quis dolor tempus, at tincidunt diam lacinia.
<div style='background: #eee; height: 500px; display: flex;'>
<div class="box box-flex">
<div class="box-body">
<h3 class="box-title">Title of box</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
Fusce tincidunt ligula
<a href="#">quis dolor tempus</a>, at tincidunt diam lacinia.
</p>
</div>
<div class="btn-row">
<a href="#" class="btn btn-default" role="button">Button</a>
</div>
</div>
</div>
5.11 #permalink Box Plain
Box that has no border, box shadow or background color.
Title of box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut. Fusce tincidunt ligula quis dolor tempus, at tincidunt diam lacinia.
<div>
<div class="box box-plain">
<div class="box-body">
<h3 class="box-title">Title of box</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
Fusce tincidunt ligula
<a href="#">quis dolor tempus</a>, at tincidunt diam lacinia.
</p>
</div>
<div class="btn-row">
<a href="#" class="btn btn-default" role="button">Button</a>
</div>
</div>
</div>