Breakout background block

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.

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 use

<div class="breakout-bg">
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release