Placement
Use separators to distinguish between sections on a page visually. Use them sparingly and purposefully to avoid cluttering the UI and distracting users from the main content.
Use to create a clear break between paragraphs, blocks, or sections.
Don’t use to separate headings and body text. Instead, emphasize hierarchy by using the proper Display font style.
Spacing
We recommend using meaningful spacing between content elements, allowing users to scan and understand information quickly.
- Use the
0pxspacing option for a tightly integrated layout without any visible gaps between elements. - Use the
24pxspacing option to visually distinguish between different sections, making it simpler for users to navigate and understand the content.
How to use this component
<i80-separator> renders a thematic break element (also known as horizontal rule, or <hr> element) with equal top and bottom margins to create space between sections.
Above the line
Below the line
<p>Above the line</p>
<i80-separator></i80-separator>
<p>Below the line</p>Spacing
The default spacing value is 24 pixels. If you need to use the separator without margins, set spacing to 0.
Above the line
Below the line
<p>Above the line</p>
<i80-separator spacing="0"></i80-separator>
<p>Below the line</p>Attributes
<i80-separator> renders this component. Everything it understands:
| Attribute | Values | Default | Notes |
|---|---|---|---|
spacing |
24 · 0 | 24 |
The margin above and below the line. |
The tag keeps any native element you write inside it, so a server-rendered form, link or button works as it is. See Web Components for loading i80.js and the reference for these examples running.
Conformance rating
When used as recommended, there should not be any WCAG conformance issues with this component.
Support
If any accessibility issues have been found within this component, let us know by submitting an issue.
0.1.0
Første i80-version (fork af upstream, se core/UPSTREAM.md).