Divider

The Folwell Divider component is designed to allow users to separate portions of content into sections with a horizontal line. Below are examples of the various color and width options available for the component.

Divider Examples

The following are examples of each type of divider available:

Gray 100%

Gray 50%

Gray 33%

Gold 100%

Gold 50%

Gold 33%

Usage

Usage

Access CKEditor via Layout Builder or via the Edit view of your content.

  1. Via Layout Builder, select +Add Block
    • Add block button
  2. Select + Create Content block
    • Highlighted button to create a content block
  3. Select Basic Block
    • Highlighted button that reads "Basic Block"
  4. Via Edit view
    • From your newly or previously created content, select Edit to view the WYSIWYG Editor
      • CKeditor window
  5. Within the WYSIWYG (CKEditor) window, select the divider icon, then, from the dropdown menu, select the color and divider width to be used.
    • CKEditor window with Divider button selected.
  6. The divider should now be visible within the editor window.
    • CKEditor window with gold divider component displayed.
Best Practices

Do use for tone or theme changes in a story or an article.

Accessibility
  • Only use dividers to separate content sections and not for any design or makeshift border solutions.
  • Use dividers on backgrounds of the same color, as this can create visual issues for users.
  • Do not use dividers excessively.