Skip to main content

Action card

Action card in Storybook
Warning: This is an experimental component

This experimental component might not yet be fully accessible, fully documented, or fully covered by design tokens, and its API and behavior might change more frequently than stable components.

For more information, see Introduction to experimental components and properties.

Usage​

Overview​

The action card is a flexible container used to display related information. It comes in two variants: a standard card for general content, and an AI action card designed to indicate content generated or assisted by artificial intelligence.

When to use​

Use the action card to group and structure related information within a collapsible container.

  • Standard variant: Use for general content that is not produced by an AI model.
  • AI variant: Use when the data or text within the card is produced by an AI model. This variant applies distinct styling and icons to signal the source of the information.

Formatting​

Anatomy​

Action card anatomy including standard variant and AI action card

Action cards consist of the following elements:

  1. AI action card: header (A), content (B), and footer (C).
  2. Standard action card: header (A), content (B), and footer (C).

Placement​

Do place the action card within the page layout.

Content​

General writing guidelines​

  • Use sentence case for all aspects of designing Guidewire product interfaces. Don't use title case.
  • Use present tense verbs and active voice in most situations.
  • Use common contractions to lend your copy a more natural and informal tone.
  • Use plain language. Avoid unnecessary jargon and complex language.
  • Keep words and sentences short.

Action cards follow the same content guidelines as the Jutro card component. For all rules on card-specific writing (hierarchy, emphasis, actions), see the card content guidelines.

Accessibility​

The action card is a container component that structures content into a collapsible region. It includes a header for summary information and a content area that can be expanded or collapsed by the user.

This component is designed to meet WCAG 2.1 AA accessibility guidelines. The contrast ratio of textual elements against their background is above 4.5:1. Non-textual content that conveys meaning and keyboard focus indicators have a contrast ratio of at least 3:1 with their adjacent colors.

However, changes made by the content author or the specific implementation context can affect accessibility conformance.

Follow the guidance below and refer to the WAI-ARIA Authoring Practices Guide when using this component in your applications:

  • Expand/Collapse labels: The component relies on specific translation keys to populate the aria-label attributes for the toggle buttons. The key jutro-experimental-cards.ActionCardHeader.expandButton provides the label for the expand action, and jutro-experimental-cards.ActionCardHeader.collapseButton provides the label for the collapse action.
  • Structure and headings: The ActionCardHeader accepts a title and subtitle. Ensure the title text clearly summarizes the content within the card so users can decide whether to expand it.
  • Keyboard navigation: Users must be able to navigate to the card header and toggle the expanded state using the keyboard (typically Enter or Space).
  • Truncation: The component automatically truncates long titles and displays the full text in a tooltip. Ensure that this tooltip content remains accessible using keyboard focus or hover for users who cannot see the full text immediately.