- Margin top: 10
- Margin bottom: 10
- Separator type: Transparent
Separator component
The Separator component is used to add space between content on a page by adding a horizontal line that's either visible or invisible and configurable in size.
Guidelines
The Separator is a horizontal rule that divides content into different sections. Use it to organize information on a page. It can improve the layout by adding white space between components. This provides more ‘breathing room’ and helps visually separate related pieces of content.
- The Separator is designed with a built-in top and bottom margin of 30px.
- When you add the component to the page, the default type is the Transparent type separator. It displays as a grey line when viewed in Authoring mode so that it's easy to work with, but is invisible in preview mode and once activated on the Live page.
- You could also select Grey line, which displays a 2px solid grey line on the live page.
Change the margins around the Separator
- Increase or decrease the default height with the top and bottom margins.
Note: There's no need to explicitly type “px” after entering a number in these fields since they were developed for measurements in pixels, however the number must be a whole number and not include decimals.
Accessibility
Accessible content is well-structured semantic content. This means that the content inside HTML tags should reflect the intended purpose of the tags. Authors sometimes simply press “return” or “enter” to skip a line after a paragraph in order to create more space. Doing so creates an empty paragraph with a non-breaking space in the HTML code, i.e., <p> </p>. Although this doesn't strictly violate accessibility standards, it's nevertheless not considered to be best practice because it's not semantic. Therefore, the Separator is the better option.
The Introduction component & the Separator
This overview in the Introduction is followed by a Separator.
Here we add a Separator below the Introduction component. This creates ‘breathing room’ before continuing with the rest of the content on the page. This example uses the Grey line type so there's a visible grey line. No specifications were made to the margin or padding in this case.
Below are two rows of Buttons, each row within a Column Control component. We add default transparent Separators above and below each row to create some space. We want the height of the separation to be less than the default size so we specify 10 (pixels) for the top and bottom margins of each.
Settings
Notice that in Authoring mode, we still see the grey lines of the Transparent type Separators.
Dos
- Do opt for a transparent Separator as much as possible when separating sections on a page as this will result in less clutter and a cleaner layout with fewer visual distractions.
Don'ts
- Don't put a Separator above a page title.
- Don't put a Separator between the last component on a page and the grey footer. See the Advanced tab of the Page properties for that.
- Don't add one Separator directly after another; adjust the height of the Separator in the settings if more whitespace is needed.
- Don't put a Separator in between individual buttons.
- Don't use empty paragraphs or line breaks to create separation since the Separator component exists for this purpose.
- You will mainly be using the top and bottom margins to specify the size of the Separator, and in most cases, both will be set to the same value for even spacing, e.g., top margin: 20 and bottom margin: 20.
- In Authoring mode, there's an extra top and bottom padding of 30px added to the built-in top and bottom margin of 30px so the Separator will appear to have a lot more space around it; this was done so the component would be easier to select when working in Author mode.
Training
The Separator component is covered in the Advanced training course.
Need support?
The Web team is here to help.