View the example page to see this paragraph-type in action.

Divider example

Guidelines for use

  1. This paragraph is always used at 100% width of the browser window

  1. Consider how you want your overall page content to be displayed. Identify places where a visual separator between content may be helpful to your visitors. 

Use this paragraph to create a visual separator between sections of content on your page.

There is no change in how this paragraph is displayed on a mobile device.

How to implement

  1. Create a Basic Page.

  2. Scroll down to the Paragraphs section, click the drop-down arrow, and click "Add Divider".
    screenshot of paragraph listing with divider selected

  3. Proceed to the Overview of a Divider section of this guide below.

  4. Once you've added your divider, choose your publishing options and click Save at the bottom of the page.

Template options

screenshot of the divider paragraph fields

  1. Click and drag the crosshairs handle to rearrange your paragraphs.
  2. Remove this entire paragraph.
  3. Divider Colour - select the colour of the divider that you'd like to use
  4. Divider Type - select the style of divider that you'd like to use
  5. Grey Background Toggle - if this option is unchecked, the divider will appear on a white background. If it is checked, it will appear with a grey background. Only use the grey background if you are adding a divider between two paragraphs that also use a grey background.