Empty State Card

Updated 2 weeks ago

Code

<div class="ps-empty-state">
  <h2 class="ps-empty-state__title">{{title}}</h2>
  <p class="ps-empty-state__body">{{body}}</p>
  <div class="ps-empty-state__links">{{links}}</div>
</div>

Dependencies

Primitives: color, typography (display + body), spacing, border
Assets: none
No JavaScript — the card is a static container. If it replaces a live region on state change, the surrounding page owns the aria-live wiring (see Accessibility).

Important Information

Design System disclosure

This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.