Back to all examples

Show status on a card

ReactAngularWeb Components
<GoabContainer
      type="non-interactive"
      accent="thick"
      heading="Heading"
      actions={<GoabBadge type="important" content="Priority" />}
    >
      Content
    </GoabContainer>

Display status indicators on cards using badges in the actions slot, allowing workers to quickly see the priority or state of each item.

When to use

Use this pattern when:

  • Displaying items in a card-based layout that have status or priority levels
  • Workers need to quickly identify high-priority or important items
  • Status should be prominently visible in the card header area

Considerations

  • Use the actions slot to position the badge in the card header
  • Choose badge types that clearly communicate priority or status
  • Keep badge content concise (one or two words)
  • Ensure the card heading and badge work well together visually