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-labelor anything that would reveal the confirmation type.
Success Card
Rules For Designers
- A green
$color-ui-green (#057f19)checkmark-circleicon is used
Error Card
Rules For Designers
- A red
$color-ui-red (#cf2a1e)error-circleicon is used