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., the default
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).