Back to all examples

Show status on a card

<GoabContainer
      type="non-interactive"
      accent="thick"
      heading="Heading"
      actions={<GoabxBadge type="important" content="Priority" />}
    >
      Content
    </GoabContainer>
<goab-container type="non-interactive" accent="thick" [title]="title" [actions]="actions">
  <ng-template #title>Heading</ng-template>
  <ng-template #actions>
    <goabx-badge type="important" content="Priority"></goabx-badge>
  </ng-template>
  Content
</goab-container>
<goa-container type="non-interactive" accent="thick">
  <div slot="title">Heading</div>
  <div slot="actions">
    <goa-badge version="2" type="important" content="Priority"></goa-badge>
  </div>
  Content
</goa-container>

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