NYS Design System Release 1.21.1

<nys-card> size property now available

We heard you. <nys-card> text was too big for some of your sites. So we've introduced a new size property to adjust the size of the text in your cards, while keeping things as consistent as possible. Remember that md is now the default for card size. Check out the updated Card size documentation for usage instructions.

<div class="nys-grid-row nys-grid-gap" style="--nys-card-height: 100%;">
  <nys-card
    class="nys-tablet:nys-grid-col-4"
    size="sm"
    preheading="Preheading content"
    heading="This is a small card"
    subheading="Subheading content"
    description="A short description of the card's subject."
  ></nys-card>
  <nys-card
    class="nys-tablet:nys-grid-col-4"
    preheading="Preheading content"
    heading="This is the default medium card"
    subheading="Subheading content"
    description="A short description of the card's subject."
  ></nys-card>
  <nys-card
    class="nys-tablet:nys-grid-col-4"
    size="lg"
    preheading="Preheading content"
    heading="This is a large card"
    subheading="Subheading content"
    description="A short description of the card's subject."
  ></nys-card>
</div>

Font size and line-height overrides added for <nys-card> font sizes

You can now fully override the card font sizes. All slots are covered: preheading, heading, subheading, and description. Modifying the --nys-card-* variables will adjust your font sizes and line heights for all cards on a page. NOTE: you cannot override the font sizes for size="sm" or size="lg" cards. Check out the updated Card style overides for instructions.

<div class="nys-grid-row nys-grid-gap" style="--nys-card-height: 100%;--nys-card-font-size--heading: 80px; --nys-card-line-height--heading: 1.25;">
  <nys-card
    class="nys-tablet:nys-grid-col-4"
    preheading="Preheading content"
    heading="Hello"
  ></nys-card>
  <nys-card
    class="nys-tablet:nys-grid-col-4"
    preheading="Preheading content"
    heading="Big"
  ></nys-card>
  <nys-card
    class="nys-tablet:nys-grid-col-4"
    preheading="Preheading content"
    heading="World!"
  ></nys-card>
</div>

<nys-iconlist> now has an inverted variant

In preparation for upcoming components, we needed to address how <nys-iconlist> displays on dark surfaces. To address this, we've added an inverted property which will change from black text to white text. Check out the documentation for inverted

<nys-iconlist id="event-details3" divider inverted>
  <nys-iconlistitem icon="calendar_month">July 4, 2026</nys-iconlistitem>
  <nys-iconlistitem icon="schedule">5:00 PM</nys-iconlistitem>
  <nys-iconlistitem icon="location_on">
    Central Park West
    <span slot="secondary">New York, NY</span>
  </nys-iconlistitem>
</nys-iconlist>

ShadowDOM clone removal

Get ready for a technical release note! When we first began developing our custom HTML elements (Web Components) we wanted to lock everything down as tight as we could. We took the content you added to our web components and "cloned" it into the shadowDOM. This guaranteed that the content was in a format we decided upon, was styled appropriately, and properly wired up with javascript.

This had an unfortunate side-effect of dropping javascript events within some components (think: a button click in a <td> table cell), becuase the content was locked away in the shadowDOM, it was stripping javascript events and not allowing custom styles through.

Our solution comes in the way of "slots." By using slots, content you add to a component will stay in the lightDOM, and you can assume your JS events will stick. This release removed cloning from:

• <nys-breadcrumb> – Links
• <nys-globalfooter> – Links
• <nys-globalheader> – Links

Final Note: This is meant to allow javascript wiring for nested elements. This new approach will still apply all the default styles to the web components that you expect to see today.

Bug fixes

• Combobox form is required when not explicitly set
• Alert icon not centered with action links only

🚨 Breaking changes

• With the migration to the lightDOM, some components may be affected by highly specific outside CSS selectors and properties. Please check your rendered designs for any variance.

⚠️ Known issues

• Users running NYSDS 1.19.0 through 1.19.2 should immediately upgrade to the latest version to fix the default icon library bug introduced in 1.19.0.

If you notice any issues, please add them to our GitHub Issue Tracker

For full component updates, bug fixes, and the detailed changelog:

See the full developer release notes for v.1.21.1 →