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
  1. In Experience Editor, select to Add a new component
  2. Select Renderings > Building blocks > Grids > Breakout area
  3. Once the breakout area is on the page you will see the greyed out full width area. Within this area you can add another rendering such as an image from media library. This will result in a full width image.
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