Breakout area

A full width placeholder

Overview

The breakout area is a component which creates a full width area within which placeholders can be added.

Example
openingtimes
WCMS use
 
MVC.net use
Code

<div class="breakout-area ">

<div id="slideshow">
<ul>
<li>
<h2><a href="/thingstodo/hilliergardens/visitus/families">Families at Hillier Gardens</a></h2>
<div class='caption'>
<p></p>
</div>
<a href="/thingstodo/hilliergardens/visitus/families">
<picture class="scale-images">
<source srcset="/-/media/hero-images/thingstodo/hilliergardens/hilliers-children480x480.jpg" media="(max-width: 30em)"/>
<source srcset="https://www.hants.gov.uk:443/-/media/hero-images/thingstodo/hilliergardens/hilliers-children480x480/30-hilliers-children1024x400.jpg" media="(max-width: 64em)"/>
<source srcset="https://www.hants.gov.uk:443/-/media/hero-images/thingstodo/hilliergardens/hilliers-children480x480/64-hilliers-children1440x400.jpg" media="(max-width: 90em)"/>
<img src="https://www.hants.gov.uk:443/-/media/hero-images/thingstodo/hilliergardens/hilliers-children480x480/30-hilliers-children1024x400.jpg" alt="Children at Hillier Gardens"/>
</picture>
</a>
</li>
<li>
<h2><a href="/thingstodo/hilliergardens/explorethegardens">Explore the Gardens</a></h2>
<div class='caption'>
<p></p>
</div>
<a href="/thingstodo/hilliergardens/explorethegardens">
<picture class="scale-images">
<source srcset="/-/media/hero-images/thingstodo/hilliergardens/hilliers-walkway1440x400.jpg" media="(max-width: 30em)"/>
<img src="/-/media/hero-images/thingstodo/hilliergardens/hilliers-walkway1440x400.jpg" alt="Aerial view of Hillier Gardens"/>
</picture>
</a>
</li>
<li>
<h2><a href="https://www.hants.gov.uk/shop/product.php?productid=49330&cat=311&page=1">Family Summer's End picnic with fireworks</a></h2>
<div class='caption'>
<p>Saturday 26 August 2017</p>
</div>
<a href="https://www.hants.gov.uk/shop/product.php?productid=49330&cat=311&page=1">
<picture class="scale-images">
<source srcset="/-/media/hero-images/thingstodo/hilliergardens/hilliersfireworks1440x400.jpg" media="(max-width: 30em)"/>
<img src="/-/media/hero-images/thingstodo/hilliergardens/hilliersfireworks1440x400.jpg" alt="Fireworks at Hillier Gardens"/>
</picture>
</a>
</li>
<li>
<h2><a href="/thingstodo/hilliergardens/membership">Become a member</a></h2>
<div class='caption'>
<p>Enjoy everything our 180 acre garden has to offer</p>
</div>
<a href="/thingstodo/hilliergardens/membership">
<picture class="scale-images">
<source srcset="/-/media/hero-images/thingstodo/hilliergardens/hilliersmontage1440x400.jpg" media="(max-width: 30em)"/>
<img src="/-/media/hero-images/thingstodo/hilliergardens/hilliersmontage1440x400.jpg" alt="Hillier Gardens"/>
</picture>
</a>
</li>
</ul>
<p class="slideshowmenu invisible"></p>
</div>

</div>
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release