Overview

The .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.

Considerations

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.

Variants

The .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 h-12, h-8, h-24, etc.).

Accessibility

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 title attribute.

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).

Examples

Seps are a very simple element. You can use them pretty much anywhere.

The only limit is your imagination!

Example code

<p>Seps are a very simple element. You can use them pretty much anywhere.</p>
<hr class="sep">
<p>The only limit is your imagination!</p>