Go to Content
Design System
Playroom Storybook
#StandWithUkraine

Success and error card examples

State cards communicate the result of an operation. They are made of an StatusInfo component enveloped in a CardGroup.

Success Card

Loading demo…
Rules For Designers
  • A green $color-ui-green (#07a721) checkmark-circle icon is used
Rules For Copywriters
  • The heading and paragraph text must be descriptive enough to explain the situation, as the icon is considered ornamental and has no aria-label or anything that would reveal the confirmation type.

Error Card

Loading demo…
Rules For Designers
  • A red $color-ui-red (#cf2a1e) error-circle icon is used
Rules For Copywriters
  • The heading and paragraph text must be descriptive enough to explain the situation, as the icon is considered ornamental and has no aria-label or anything that would reveal the confirmation type.