Happy Pride Month! - Also, GDS v3 is live! 💅

Success and error card examples

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

Rules For Copywriters
  • A state card’s heading and paragraph text must be descriptive enough to explain the situation, as its icon is considered ornamental and has no aria-label or anything that would reveal the confirmation type.

Success Card

Loading demo…
Rules For Designers
  • A green $color-ui-green (#057f19) checkmark-circle icon is used

Error Card

Loading demo…
Rules For Designers
  • A red $color-ui-red (#cf2a1e) error-circle icon is used