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