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.

tctClick

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

Event Detail Type signature

undefined

Patterns

Provide clean examples of how to compose multiple components together in order to achieve a specific visual outcome that is curated and maintained by Tecton.

Full-page patterns

  • Account List Page

    How to build an Account List page in Tecton: a summary header and a searchable, client-filtered account list.

  • Account Settings Page

    How to build an Account Settings page in Tecton: six independent settings sections covering nickname, notifications, statement delivery, card management, spending limits, and overdraft protection.

  • Bank Statement Page

    How to build a Bank Statement page in Tecton: a computed account summary and a q2-data-table of transactions for a statement period.

  • Message Center Page

    How to build a Message Center page in Tecton: a two-panel layout with a message list on the left and a selected message detail plus response form on the right.

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!

Changelog

The changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.

Show changelog (19)