17.2 #permalink Band Default
Only used at top of page for title
This is a title
Hello, world!
Lorem ipsum dolor sit amet, consectetur adipiscing. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
Nunc lacinia, libero quis semper elementum, magna ipsum consequat nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at, vulputate bibendum leo. Sed eu vulputate leo. Vivamus dictum gravida tempor. Sed consequat nec tellus nec tempus. Etiam dignissim id odio sit amet pulvinar.
Third Header
Nunc lacinia, libero quis semper elementum, magna ipsum consequat nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at, vulputate bibendum leo. Sed eu vulputate leo. Vivamus dictum gravida tempor. Sed consequat nec tellus nec tempus. Etiam dignissim id odio sit amet pulvinar.
<section class="band">
<div class="band-body">
<h1 class="band-title">This is a title</h1>
<h2>Hello, world!</h2>
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipiscing.
Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
</p>
<p>
Nunc lacinia, libero quis semper elementum, magna ipsum consequat
nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at,
vulputate bibendum leo. Sed eu vulputate leo. Vivamus dictum gravida tempor.
Sed consequat nec tellus nec tempus. Etiam dignissim id odio sit amet pulvinar.
</p>
<h3>Third Header</h3>
<p>
Nunc lacinia, libero quis semper elementum, magna ipsum consequat
nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at,
vulputate bibendum leo. Sed eu vulputate leo. Vivamus dictum gravida tempor.
Sed consequat nec tellus nec tempus. Etiam dignissim id odio sit amet pulvinar.
</p>
</div>
</section>
This is a title
Hello, world!
Lorem ipsum dolor sit amet, consectetur adipiscing. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
Nunc lacinia, libero quis semper elementum, magna ipsum consequat nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at, vulputate bibendum leo. Sed eu vulputate leo. Vivamus dictum gravida tempor. Sed consequat nec tellus nec tempus. Etiam dignissim id odio sit amet pulvinar.
Third Header
Nunc lacinia, libero quis semper elementum, magna ipsum consequat nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at, vulputate bibendum leo. Sed eu vulputate leo. Vivamus dictum gravida tempor. Sed consequat nec tellus nec tempus. Etiam dignissim id odio sit amet pulvinar.
<section class="band band-thin">
<div class="band-body">
<h1 class="band-title">This is a title</h1>
<h2>Hello, world!</h2>
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipiscing.
Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
</p>
<p>
Nunc lacinia, libero quis semper elementum, magna ipsum consequat
nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at,
vulputate bibendum leo. Sed eu vulputate leo. Vivamus dictum gravida tempor.
Sed consequat nec tellus nec tempus. Etiam dignissim id odio sit amet pulvinar.
</p>
<h3>Third Header</h3>
<p>
Nunc lacinia, libero quis semper elementum, magna ipsum consequat
nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at,
vulputate bibendum leo. Sed eu vulputate leo. Vivamus dictum gravida tempor.
Sed consequat nec tellus nec tempus. Etiam dignissim id odio sit amet pulvinar.
</p>
</div>
</section>
This is a title
Hello, world!
Lorem ipsum dolor sit amet, consectetur adipiscing. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
Nunc lacinia, libero quis semper elementum, magna ipsum consequat nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at, vulputate bibendum leo. Sed eu vulputate leo. Vivamus dictum gravida tempor. Sed consequat nec tellus nec tempus. Etiam dignissim id odio sit amet pulvinar.
Third Header
Nunc lacinia, libero quis semper elementum, magna ipsum consequat nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at, vulputate bibendum leo. Sed eu vulputate leo. Vivamus dictum gravida tempor. Sed consequat nec tellus nec tempus. Etiam dignissim id odio sit amet pulvinar.
<section class="band band-wide">
<div class="band-body">
<h1 class="band-title">This is a title</h1>
<h2>Hello, world!</h2>
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipiscing.
Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
</p>
<p>
Nunc lacinia, libero quis semper elementum, magna ipsum consequat
nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at,
vulputate bibendum leo. Sed eu vulputate leo. Vivamus dictum gravida tempor.
Sed consequat nec tellus nec tempus. Etiam dignissim id odio sit amet pulvinar.
</p>
<h3>Third Header</h3>
<p>
Nunc lacinia, libero quis semper elementum, magna ipsum consequat
nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at,
vulputate bibendum leo. Sed eu vulputate leo. Vivamus dictum gravida tempor.
Sed consequat nec tellus nec tempus. Etiam dignissim id odio sit amet pulvinar.
</p>
</div>
</section>
17.5 #permalink Heading Band
Only used at top of page for title (Only use in WAI)
This is a title
<section class="band band-heading band-inverse">
<div class="band-body">
<h1 class="band-title">This is a title</h1>
</div>
</section>
This is a title
<section class="band band-inverse">
<div class="band-body">
<h1 class="band-title">This is a title</h1>
</div>
</section>
This is a title
<section class="band band-tertiary">
<div class="band-body">
<h1 class="band-title">This is a title</h1>
</div>
</section>
17.8 #permalink Band Image
Inline snug image
Hello, world!
Lorem ipsum dolor sit amet, consectetur adipiscing. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
Nunc lacinia, libero quis semper elementum, magna ipsum consequat nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at.
Hello, world!
Lorem ipsum dolor sit amet, consectetur adipiscing. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
Nunc lacinia, libero quis semper elementum, magna ipsum consequat nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at.
<section class="band">
<div class="band-image [modifier class]" style="height: 400px; background-image: url(http://fillmurray.com/1000/1000)"></div>
<div class="band-body">
<h2 class="band-title">Hello, world!</h2>
<div class="grid grid-two-col">
<div class="grid-col">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing.
Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
</p>
</div>
<div class="grid-col">
<p>
Nunc lacinia, libero quis semper elementum, magna ipsum consequat
nibh, non fringilla orci quam at tellus. Nam nunc mi, aliquam nec at.
</p>
</div>
</div>
</div>
</section>
The all new WAVE
Lorem ipsum dolor sit amet, consectetur adipiscing. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
<section class="band" style="background-image: url(/img/band-wave.png);">
<div class="band-body">
<h2 class="band-title">The all new WAVE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.</p>
</div>
</section>
Want to know more about working with Worcester?
If you have any questions at all, you can either send us an enquiry using our online form, or give our support team a call on 0330 123 9339.
<section class="band band-info">
<div class="band-body">
<h3 class="band-title">Want to know more about working with Worcester?</h3>
<p>
If you have any questions at all, you can either
<a href="#" class="link-alt">send us an enquiry</a> using our online form,
or give our support team a call on 0330 123 9339.
</p>
</div>
</section>
17.11 #permalink Band Nth Child Test
Examples of bands composing together to check we haven't broken the nth-child styling Each band has text inside indicating what style it should be.
<section class="band"><div class="band-body band-title">Default</div></section>
<section class="band"><div class="band-body band-title">Grey</div></section>
<section class="band"><div class="band-body band-title">Default</div></section>
<section class="band"><div class="band-body band-title">Grey</div></section>
<section class="band band-inverse"><div class="band-body band-title">Inverse</div></section>
<section class="band"><div class="band-body band-title">Default</div></section>
<section class="band"><div class="band-body band-title">Grey</div></section>
<section class="band"><div class="band-body band-title">Default</div></section>
<section class="band band-grey"><div class="band-body band-title">Grey</div></section>
<section class="band"><div class="band-body band-title">Default</div></section>
<section class="band"><div class="band-body band-title">Grey</div></section>
<section class="band"><div class="band-body band-title">Default</div></section>
<section class="band"><div class="band-body band-title">Default</div></section>
<section class="band"><div class="band-body band-title">Grey</div></section>
<section class="band"><div class="band-body band-title">Default</div></section>
<section class="band band-inverse"><div class="band-body band-title">Inverse</div></section>
<section class="band"><div class="band-body band-title">Default</div></section>
<section class="band"><div class="band-body band-title">Grey</div></section>
<section class="band"><div class="band-body band-title">Default</div></section>
<section class="band"><div class="band-body band-title">Default</div></section>
<section class="band"><div class="band-body band-title">Grey</div></section>
<section class="band"><div class="band-body band-title">Default</div></section>
<section class="band band-grey"><div class="band-body band-title">Grey</div></section>
<section class="band"><div class="band-body band-title">Default</div></section>
<section class="band"><div class="band-body band-title">Grey</div></section>
<section class="band"><div class="band-body band-title">Default</div></section>
<section class="band band-callouts">
<div class="band-body">
<ul class="list list-callouts">
<li class="pull-left">
<a href="">
View our award winning products
</a>
</li>
<li class="pull-right">
<a href="">
Professional trade area
</a>
</li>
<li>
<a href="">
Register your guarantee
</a>
</li>
</ul>
</div>
</section>
17.14 #permalink Band Overflow Hidden
For bubbles and similar components that require their overflow to be clipped