Before the separator.
After the separator.
.sep is a simple element to provide spacing within an interface. It’s usually applied to an
<hr> tag. While it doesn’t provide a fully featured alternative to margins, it is very helpful when scaffolding interfaces.
If you think that using
<hr class="sep"> instead of
margin-bottom is an absolute abomination, you’re not alone — it goes against a lot of norms in web development, and you’re under no obligation to use it. But there’s also a growing movement that insists spacing should be a first-class component. This element caters to the latter crowd.
Maintainability — Using a
.sep is often more maintainable than using bottom or top margins, as it requires you to think about how the spacing interacts with your page’s structure.
Separation of concerns — If a component specifies its own margin, then that component isn’t truly separated from the page in which it’s embedded. Using a
.sep is a viable alternative.
Convention — If your goal is to follow traditional web development best practices, avoid using a
.sep and use margins instead.
.sep element has no variants — it’s just a vertical spacer. If you’re using Tailwind, you can change its height by using
h-x utilities (e.g.,
Visual separation is secondary to semantic separation. Not everyone will interact with your interface visually. It’s important that all visual separations are supported semantically in your content — for example, with a header, card, or other element that indicates a logical separation from what came before.
Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a
Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!
Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).
||sets the sep's height|
You can also customize this element by simply overriding any of its CSS attributes, listed
here. Contextual variable defaults (e.g.,
--color-content) and global
--family-primary) are defined here.