Card

Cards are flexible containers used for displaying content.

Examples

To display a card, use the class chi-card.

Web component coming soon

Key	Function
`Tab`	Moves focus to the card element if it is interactive (e.g., a button or link inside).
`Shift + Tab`	Moves focus to the previous focusable element.
`Enter`,`Space`	Activates an interactive element inside the card, such as a button or link.
`Esc`	Closes any associated popovers or tooltips if present.

For detailed keyboard interactions, refer to our Keyboard Control Guide.

Visit WebAIM for general keyboard techniques.

Ensure that static cards do not receive focus by default. Use tabindex="-1" if necessary.
If the card is interactive (clickable), assign it a semantic role such as role="button" or role="link" for assistive technologies.
Use appropriate heading levels (h1-h6) within cards to provide a logical content structure.
Ensure sufficient color contrast between text, backgrounds, and borders inside the card to meet WCAG contrast guidelines.
Provide clear focus indicators for all interactive elements inside the card, ensuring keyboard users can navigate efficiently.
Ensure all images inside a card have descriptive alt text unless they are decorative (use alt="" and aria-hidden="true").
Avoid relying solely on color to convey meaning. Supplement with icons, text labels, or patterns.
Ensure interactive cards meet minimum touch target sizes (44x44 pixels) for accessibility compliance.
If the card contains dynamic content, use aria-live="polite" to announce updates for screen readers.
Test with screen readers and keyboard navigation to ensure seamless usability.

Use clear, concise typography and maintain proper heading structure inside cards for easy scanning.
Ensure interactive cards have a clear hover and focus state for both visual and keyboard users.
Provide high contrast between the text and background to meet WCAG compliance.
Use alternative text or accompanying labels for icons or graphical elements to convey meaning effectively.
Maintain a consistent layout and spacing inside cards for optimal readability and accessibility.
If a card has actions, make sure the click target is large enough (minimum 44x44 pixels) for users with motor impairments.
Provide adequate spacing around cards to prevent accidental clicks, especially on mobile devices.

Explore live examples in the ARIA Practices Guide.

Find additional accessibility tips in our Accessibility Guide.

Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)