Separators

Separators are organizational blocks that allow editors to visually break up sections of content. There are two separator blocks available: Separator and Category Separator. They are comprised of a horizontal line, with and without a category title.

System ref: Separator, category separator


2.0 Layout/Organization

Separator Samples


The horizontal line above was created using the Separator block. It can be used to break up sections of content that don’t have specific titles. In this example, the block is set to the default style and has been center-aligned.


The dotted line above was also created using the Separator block. In this example, the block is set to the dot style and has been center-aligned. The color has been set to black.


The horizontal line above was created using the Separator block. In this example, the block is set to to wide-aligned.

Category separator example


The horizontal line and title shown above can be recreated using the Category Separator block. In this example, the block has been set to default width alignment. In the example below, the block has been set to wide width alignment.

Separator settings


There are a few settings that you can adjust on the separator blocks. These can be found in the block toolbar and the Block Settings tab.

Separator Setting Options:

Screenshot of the default separator block. This includes the style and color options in the Block Settings panel. The block toolbar hovers above the block.
The Separator block allows you to edit the style, color, and alignment of your separator.
  • Styles: Choose from default and dots. This is found in the Block Settings tab.
  • Color: This sets the color for the separator. When choosing a color, consider the colors used on the rest of the site and make sure that your color choice meets AA accessibility standards.
  • Alignment: In your block toolbar, you can change the alignment of your separator to center aligned, wide width, and full width.

Category Separator Setting Options:

Screenshot of the default category separator block. This includes the text field, block toolbar, and content tag dropdown in the Block Settings panel.
The Category Separator block allows you to edit the the text, content tag, and alignment.
  • Write Section Name: Edit the text for this block by clicking here. Keep the section name short.
  • Content Tag: This field is found in the Block Settings on the right-hand side. Here, you can change the content tag from paragraph to a heading. This selection will not change the style, it will just add the appropriate heading or paragraph tag to the code.
  • Alignment: In the block toolbar, you can adjust the alignment so the separator is displayed at different widths on the screen.