Card

Updated:

Use for grouping related content in a contained, elevated surface.

Properties

Learn more about properties.

bar

Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:

  • primary
  • secondary
  • tertiary
  • info
  • success
  • warning
  • alert
  • accent-1
  • accent-2
  • accent-3
  • accent-4
  • accent-5
  • accent-6
  • accent-7
  • accent-8
  • accent-9
  • accent-10
  • accent-11
  • accent-12

Any other value (e.g. "#990000", "purple") will be treated as a custom color.

elevation

The size of the box-shadow applied to the component, giving it a sense of depth.

Set to 0 to disable.

target

Target to be applied to the link when a URL is provided.

Do not use in Online Banking. Use the openURL capability on the click event instead.

type

Alters the interactive behavior of the card while maintaining visual appearance.

url

URL to navigate the user to when the card is clicked.

Do not use in Online Banking. Use the openURL capability on the click event instead.

Events

The q2-card element exposes events that can be used to send and receive data from the component based on user interaction.

Learn more about events.

click

Emitted when the card is clicked and the url property is not provided.

Event Detail Type signature

undefined

tctClick

Emitted when the card is clicked and the url property is not provided.

Event Detail Type signature

undefined

Accessibility

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

CSS Variables

The following CSS variables are available to override the default theme styles of the q2-card component.

Dependencies

Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!