Breakout background block

Overview
The breakout background block is a rendering which is full width grey background across the page, and fixed width placeholders can be placed within the block.

The background colour by default is grey.

Example
breakout block example
WCMS use
  1. Add a rendering to a place holder by clicking the placeholder and clicking 'Add here"
  2. From the rendering list select 'Breakout Background Block'.  This can be found by navigating to
  3. Renderings > Building Blocks > Grids
  4. Choose Breakout background block and press Select
  5. The break out block will appear (Hantsweb default background is dark grey)

    Within the breakout block is a placeholder called “breakout_block” – this placeholder can accept any rendering.

If you want the placeholder to expand to the full width of the block you need to use a Breakout Area rendering

MVC.net use
Code 

<div class="breakout-bg">
</div>
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release
Go to breakout area style guide