6 #permalink Features
Features are collections of compounds within a band. These are set mini-templates that can be used to display content. All content should fit into one of these "Features".
Hello, world!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor.
Nunc lacinia, libero quis semper elementum, magna ipsum consequat nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec turpis at, vulputate bibendum leo. Sed eu vulputate leo. Vivamus dictum gravida tempor. ed consequat nec tellus nec tempus. Etiam dignissim id odio sit amet pulvinar.
Third Header
Maecenas id lorem vitae odio blandit dapibus eget sit amet turpis. Proin euismod metus sed lectus eleifend porttitor. Pellentesque at sagittis elit, id mattis urna. Mauris euismod tortor ac turpis condimentum molestie. Curabitur interdum metus at condimentum cursus. Integer malesuada massa nisi, eu eleifend nulla egestas eu. Nullam id erat fermentum, euismod lectus et, iaculi nisi. Nam condimentum diam et ligula tincidunt, eget rutrum turpis feugiat.
Tincidunt mattis
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.
Hello, world!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor.
Nunc lacinia, libero quis semper elementum, magna ipsum consequat nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec turpis at, vulputate bibendum leo. Sed eu vulputate leo. Vivamus dictum gravida tempor. ed consequat nec tellus nec tempus. Etiam dignissim id odio sit amet pulvinar.
Third Header
Maecenas id lorem vitae odio blandit dapibus eget sit amet turpis. Proin euismod metus sed lectus eleifend porttitor. Pellentesque at sagittis elit, id mattis urna. Mauris euismod tortor ac turpis condimentum molestie. Curabitur interdum metus at condimentum cursus. Integer malesuada massa nisi, eu eleifend nulla egestas eu. Nullam id erat fermentum, euismod lectus et, iaculi nisi. Nam condimentum diam et ligula tincidunt, eget rutrum turpis feugiat.
Tincidunt mattis
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.
<section class="band">
<div class="band-body">
<div class="grid grid-two-col grid-col-right [modifier class]">
<div class="grid-col">
<h2 class="band-title">Hello, world!</h2>
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed dignissim facilisis lacus, tincidunt mattis dolor.
</p>
<p>
Nunc lacinia, libero quis semper elementum, magna ipsum
consequat nibh, non fringilla orci quam at tellus. Nam
nunc mi, aliquam nec turpis at, vulputate bibendum leo.
Sed eu vulputate leo. Vivamus dictum gravida tempor.
ed consequat nec tellus nec tempus. Etiam dignissim
id odio sit amet pulvinar.
</p>
<h3>Third Header</h3>
<p>
Maecenas id lorem vitae odio blandit dapibus eget sit
amet turpis. Proin euismod metus sed lectus eleifend
porttitor. Pellentesque at sagittis elit, id mattis
urna. Mauris euismod tortor ac turpis condimentum
molestie. Curabitur interdum metus at condimentum cursus.
Integer malesuada massa nisi, eu eleifend nulla egestas eu.
Nullam id erat fermentum, euismod lectus et, iaculi
nisi. Nam condimentum diam et ligula tincidunt,
eget rutrum turpis feugiat.
</p>
</div>
<div class="grid-col">
<div class="box">
<div class="asset"><img src="http://www.fillmurray.com/600/400"/></div>
<h4>Tincidunt mattis</h4>
<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>
</div>
</div>
</div>
</section>A title goes here
A short eye-catching header
Box title
- List item
- List item
- List item
- List item
A short eye-catching header
Box title
- List item
- List item
- List item
- List item
A title goes here
A short eye-catching header
Box title
- List item
- List item
- List item
- List item
A short eye-catching header
Box title
- List item
- List item
- List item
- List item
<section class="band [modifier class]">
<div class="band-body">
<h2 class="band-title">A title goes here</h2>
<div class="grid grid-two-col">
<div class="grid-col">
<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>
<h4>Box title</h4>
<ul class="list">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
<div class="grid-col">
<div class="box">
<div class="asset">
<img src="http://www.fillmurray.com/1400/1101"/>
<div class="heading">
<div class="bubble bubble-secondary">
<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>
<h4>Box title</h4>
<ul class="list">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
</div>
</div>
</section>A title goes here
Box title
- List item
- List item
- List item
- List item
Box title
- List item
- List item
- List item
- List item
Box title
- List item
- List item
- List item
- List item
A title goes here
Box title
- List item
- List item
- List item
- List item
Box title
- List item
- List item
- List item
- List item
Box title
- List item
- List item
- List item
- List item
<section class="band [modifier class]">
<div class="band-body">
<h2 class="band-title">A title goes here</h2>
<div class="grid grid-three-col">
<div class="grid-col">
<div class="box">
<div class="asset">
<img src="http://www.fillmurray.com/1400/1100"/>
</div>
<h4>Box title</h4>
<ul class="list">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
<div class="grid-col">
<div class="box">
<div class="asset">
<img src="http://www.fillmurray.com/1400/1101"/>
</div>
<h4>Box title</h4>
<ul class="list">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
<div class="grid-col">
<div class="box">
<div class="asset">
<img src="http://www.fillmurray.com/1400/1102"/>
</div>
<h4>Box title</h4>
<ul class="list">
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
</div>
</div>
</section>Is this product right for me?
Key Features
- Suitable for large properties
- Hot water is instantly available
- Hot water and central heating temperatures can be controlled separately
- Can be sited in a wide variety of places
- Suitable for large properties
<section class="band">
<div class="band-body">
<div class="grid grid-two-col grid-col-left ">
<div class="grid-col">
<div class="bubble bubble-semi">
<div class="bubble-outer">
<div class="bubble-inner">
<div class="bubble-text">
<h2 class="bubble-title">Is this product right for me?</h2>
</div>
</div>
</div>
</div>
</div>
<div class="grid-col">
<h4>Key Features</h4>
<ul class="tick">
<li>Suitable for large properties</li>
<li>Hot water is instantly available</li>
<li>Hot water and central heating temperatures can be controlled separately</li>
<li>Can be sited in a wide variety of places</li>
<li>Suitable for large properties</li>
</ul>
</div>
</div>
</div>
</section>A title goes here
<section class="band">
<div class="band-body">
<h2 class="band-title">A title goes here</h2>
<div class="grid grid-two-col ">6.7 #permalink Content with two boxes different size
.grid-col-right - Right bias. .grid-col-left - Left bias.
<div class="grid-col">
<div class="box">
<h4>Title of box</h4>
<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>
</div>
<div class="grid-col">
<div class="box helper">
<h4>Title of box</h4>
<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>
</div>
</div>
A title goes here
<section class="band">
<div class="band-body">
<h2 class="band-title">A title goes here</h2>
<div class="grid grid-two-col "><div class="grid-listing">
<div class="items">
<div class="grid grid-four-col">
<div class="grid-col">
<div class="box box-cosy">
<div
class="asset"
style="background: url(http://lorempixel.com/250/250/nature); background-size: cover;">
</div>
<h4>Relax Flyer A</h4>
<div class="btn-row">
<a href="#" class="btn btn-default btn-block">
Select
</a>
</div>
</div>
</div>
<div class="grid-col">
<div class="box box-cosy">
<div
class="asset"
style="background: url(http://lorempixel.com/250/251/nature); background-size: cover;">
</div>
<h4>Relax Flyer B</h4>
<div class="btn-row">
<a href="#" class="btn btn-default btn-block">
Select
</a>
</div>
</div>
</div>
<div class="grid-col">
<div class="box box-cosy">
<div
class="asset"
style="background: url(http://lorempixel.com/250/252/nature); background-size: cover;">
</div>
<h4>Relax Flyer C</h4>
<div class="btn-row">
<a href="#" class="btn btn-default btn-block">
Select
</a>
</div>
</div>
</div>
<div class="grid-col">
<div class="box box-cosy">
<div
class="asset"
style="background: url(http://lorempixel.com/250/253/nature); background-size: cover;">
</div>
<h4>Come Home Flyer</h4>
<div class="btn-row">
<a href="#" class="btn btn-default btn-block">
Select
</a>
</div>
</div>
</div>
</div>
</div>
</div><div class="grid-listing grid-splitview">
<div class="items">
<div class="grid grid-three-col">
<div class="grid-col">
<div class="box box-split">
<div
class="asset"
style="background-image: url(http://lorempixel.com/250/250/nature);"
data-href="#"
></div>
<h4>
<a href="#">10% off Bosch Professional Power Tools</a>
</h4>
</div>
</div>
<div class="grid-col">
<div class="box box-split">
<div
class="asset"
style="background-image: url(http://lorempixel.com/250/251/nature);"
data-href="#"
></div>
<h4>
<a href="#">50% off APHC membership</a>
</h4>
</div>
</div>
<div class="grid-col">
<div class="box box-split">
<div
class="asset"
style="background-image: url(http://lorempixel.com/250/252/nature);"
data-href="#"
></div>
<h4>
<a href="#">
Join checkatrade and save £100 off your
first year of membership
</a>
</h4>
</div>
</div>
</div>
</div>
</div>6.10 #permalink Band Video Playlist
Used when showing related videos
<section class="band band-inverse">
<div class="band-body">
<div class="grid grid-two-col grid-col-left">
<div class="grid-col">
<h2 class="band-title">Home Heating Tips</h2>
<ul class="list list-alt">
<li><a href="">Home heating & hot water tips</a></li>
<li><a href="">Boiler tips for homeowners</a></li>
<li><a href="">Handy Greenstar boiler checks</a></li>
<li><a href="">Winter energy saving tips from Worcester</a></li>
</ul>
</div>
<div class="grid-col">
<div class="embed-responsive">
<iframe src="https://www.youtube.com/embed/7dtwza-Azr0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>