Divider

The <nys-divider> component visually separates content or sections within an interface.

Sample content above
Sample content below
Copy Code
<div>Sample content above</div>
<nys-divider></nys-divider>
<div>Sample content below</div>

Options

Inverse

On dark background, add the inverted property to ensure the <nys-divider> is visible.

Sample content above
Sample content below
Copy Code
<div>Sample content above</div>
<nys-divider inverted></nys-divider>
<div>Sample content below</div>

Can't use NYS design System web components in your project? Try using the CSS Variables instead.


Usage

When to use this component

  • Use dividers for dense copy or when separating content helps users digest content, otherwise use white space.
  • Make sure the divider is helping users understand structure or hierarchy — not just adding visual decoration.

When to consider something else

  • When content is formatted side bys side.
  • When content is already organized in groups.

Do

  • Ensure consistent padding/margin above and below dividers to avoid crowding.
  • Use the inverted option on dark backgrounds.

Don't

  • Overuse dividers and clutter the interface, reducing scannability.
  • Use the divider to separate content appearing side bys side.
  • Use the inverted option on light backgrounds.

Accessibility

The <nys-divider> component includes the following accessibility-focused features:

  • The native <hr> element is used to ensure ARIA compliance

Properties

Property Type
inverted boolean

CSS Variables

There are no existing CSS variables for this component. Explore existing options, or propose a new one with a Component Proposal.


Events

The <nys-divider> is a visual component that does not emit any events.

Suggest a New Component

Do you have an idea for a new NYS Design System web component? Look through the existing proposals in our GitHub discussions board to see if someone already proposed something similar. If not, feel free to submit one.

Edit this page on GitHub (Permissions required)

Last updated: November 4, 2025