Card

Updated:

Provides a container to display content in a card-like tile.

Static Cards

By default, q2-card components are clickable, much like buttons or links. However, you may want to make use of the card as a static element, such as an item in a list. To do this, set the is-static property to true.

Doing this will remove any borders, padding, drop-shadows, and clickable behavior from the element.

<q2-card avatar-icon="document" title="Card title" description="Card description" is-static></q2-card>

Properties

Learn more about properties.

avatarIcon
avatar-icon

The q2-icon to be displayed in the avatar location.

avatarInitials
avatar-initials

The initials to be placed in the avatar of the card.

avatarName
avatar-name

The name to be used for the avatar of the card which will be converted to initials.

avatarSrc
avatar-src

The source of the image to be displayed in the avatar location.

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.

description

The description of the card (truncated after two lines).

isSmall
is-small

Display the card with a view optimized for smaller displays.

This will be determined automatically if the attribute is not manually provided.

isStatic
is-static

Display the card with no borders, padding, drop-shadows, or clickable behavior.

isTouch
is-touch

Display the card with a view optimized for touch displays.

This will be determined automatically if the attribute is not manually provided.

target

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

title

The title of the card.

type

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

url

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

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

Release Notes

Initial Release

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.

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

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!

  • q2-icon
  • q2-avatar