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
-
- 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