Card

2.4.0

Cards group related content and actions into a contained, scannable unit. They support media, headers, body text, and footers for flexible content layouts.

import {CardModule} from "@qualcomm-ui/angular/card"

Examples

Showcase

All card parts are optional. Combine them to fit the content you need to display.

Card Title

Subheading

Paragraph Subheading

This is a small card with media, header, body text, and a footer with actions.

<div class="w-72" q-card variant="outline">
  <div q-card-media>
    <div q-card-avatar>
      <div q-avatar-content>
        <svg aria-label="User" qIcon="User"></svg>
      </div>
    </div>
  </div>
  <div q-card-content>
    <div q-card-heading>
      <div q-card-heading-text>Card Title</div>
      <div q-card-subheading-text>Subheading</div>
    </div>

    <div q-card-subheading-text>Paragraph Subheading</div>
    <p q-card-paragraph-text>
      This is a small card with media, header, body text, and a footer
      with actions.
    </p>
  </div>
  <div q-card-footer>
    <button q-card-button variant="secondary">Cancel</button>
    <button q-card-button variant="primary">Confirm</button>
  </div>
</div>

Variants

The variant input controls border and shadow styles.

Outline

A card with a border and background color.

Outline Elevated

A card with a border and subtle elevation.

Elevated

A card with a subtle elevation and no border.

<div class="w-64" q-card variant="outline">
  <div q-card-content>
    <div q-card-heading>
      <div q-card-heading-text>Outline</div>
    </div>
    <p q-card-paragraph-text>
      A card with a border and background color.
    </p>
  </div>
</div>

<div class="w-64" q-card variant="outline-elevated">
  <div q-card-content>
    <div q-card-heading>
      <div q-card-heading-text>Outline Elevated</div>
    </div>
    <p q-card-paragraph-text>
      A card with a border and subtle elevation.
    </p>
  </div>
</div>

<div class="w-64" q-card variant="elevated">
  <div q-card-content>
    <div q-card-heading>
      <div q-card-heading-text>Elevated</div>
    </div>
    <p q-card-paragraph-text>
      A card with a subtle elevation and no border.
    </p>
  </div>
</div>

Actions

Two types of actions are supported in cards: q-card-button and q-card-link.

Link Action

Cards can use links to navigate users to related content.

Button Actions

Cards can use buttons for primary and secondary actions.

<div class="w-64 self-start" q-card variant="outline">
  <div q-card-content>
    <div q-card-heading>
      <div q-card-heading-text>Link Action</div>
    </div>
    <p q-card-paragraph-text>
      Cards can use links to navigate users to related content.
    </p>
  </div>
  <div q-card-footer>
    <a endIcon="ChevronRight" q-card-link>Learn More</a>
  </div>
</div>

<div class="w-64" q-card variant="outline">
  <div q-card-content>
    <div q-card-heading>
      <div q-card-heading-text>Button Actions</div>
    </div>
    <p q-card-paragraph-text>
      Cards can use buttons for primary and secondary actions.
    </p>
  </div>
  <div q-card-footer>
    <button q-card-button variant="secondary">Cancel</button>
    <button q-card-button variant="primary">Confirm</button>
  </div>
</div>

Interactive

Set interactive on q-card to enable hover and pressed visual states on the content area. Place the directive on a <button> element so screen readers know that the element is interactive.

WARNING

Interactive cards must not contain buttons, links, or input fields. Nesting interactive elements produces invalid HTML and breaks assistive technology.

<button class="w-64" interactive q-card variant="elevated">
  <div q-card-content>
    <div q-card-heading>
      <div q-card-heading-text>Interactive Card</div>
    </div>
    <p q-card-paragraph-text>
      Hover or press this card to see the interactive states.
    </p>
  </div>
</button>

Media

Use q-card-media to display an image or other visual content at the top of the card.

Automotive Platform

Next-gen connectivity

<div class="w-64" q-card variant="outline">
  <div q-card-media>
    <img
      alt="Qualcomm automotive technology"
      class="h-40 w-full"
      src="https://react.qui.qualcomm.com/images/auto-vertical-1.png"
    />
  </div>
  <div q-card-content>
    <div q-card-heading>
      <div q-card-heading-text>Automotive Platform</div>
      <div q-card-subheading-text>Next-gen connectivity</div>
    </div>
  </div>
  <div q-card-footer>
    <a endIcon="ChevronRight" q-card-link>Learn More</a>
  </div>
</div>

Badge

Use the q-card-badge directive to position a badge within the card.

NEW

Snapdragon X2 Elite

A legendary leap in performance

Unleash your masterpiece with ultra-premium performance, multi-day battery life, and blazing AI processing power.

<div class="w-72" q-card variant="outline">
  <div q-card-badge>
    <span emphasis="brand" q-badge>NEW</span>
  </div>
  <div q-card-content>
    <div q-card-heading>
      <div q-card-heading-text>Snapdragon X2 Elite</div>
      <div q-card-subheading-text>A legendary leap in performance</div>
    </div>
    <p q-card-paragraph-text>
      Unleash your masterpiece with ultra-premium performance, multi-day
      battery life, and blazing AI processing power.
    </p>
  </div>
  <div q-card-footer>
    <a endIcon="ChevronRight" q-card-link>Learn More</a>
  </div>
</div>

Alignment

Set alignment on q-card to control horizontal positioning of heading and footer content. Defaults to start.

Eyebrow

Card Title

Subheading

Toggle between start and center alignment to see how heading and footer content repositions.

start center

<div class="w-80" q-card variant="outline" [alignment]="alignment()">
  <div q-card-content>
    <div q-card-heading>
      <span q-card-eyebrow-text>Eyebrow</span>
      <div q-card-heading-text>Card Title</div>
      <div q-card-subheading-text>Subheading</div>
    </div>
    <p q-card-paragraph-text>
      Toggle between start and center alignment to see how heading and
      footer content repositions.
    </p>
  </div>
  <div q-card-footer>
    <button q-card-button variant="secondary">Cancel</button>
    <button q-card-button variant="primary">Confirm</button>
  </div>
</div>

Sizes

Cards support sm, md, and lg sizes that control internal spacing and typography.

Eyebrow

Card Title

Subheading

Resize this card using the controls below to see how spacing and typography scale across sizes.

sm md lg

<div q-card variant="outline" [size]="size()" [style.width.px]="width()">
  <div q-card-media>
    <div q-card-avatar>
      <div q-avatar-content>
        <svg aria-label="User" qIcon="User"></svg>
      </div>
    </div>
  </div>
  <div q-card-content>
    <div q-card-heading>
      <span q-card-eyebrow-text>Eyebrow</span>
      <div q-card-heading-text>Card Title</div>
    </div>
    <div q-card-subheading-text>Subheading</div>
    <p q-card-paragraph-text>
      Resize this card using the controls below to see how spacing and
      typography scale across sizes.
    </p>
  </div>
  <div q-card-footer>
    <button q-card-button variant="secondary">Cancel</button>
    <button q-card-button variant="primary">Confirm</button>
  </div>
</div>

Explorer

Component Anatomy

Hover to highlight, click to view API

root badge media avatar content heading eyebrow-text heading-text subheading-text paragraph-text footer link button

API

q-card

Prop	Type	Default
alignment The horizontal alignment of card content and footer.	\| 'start' \| 'center'	'start'
dir The document's text/writing direction.	'ltr' \| 'rtl'	'ltr'
interactive When `true`, the card renders as an interactive element with hover and active states.	boolean
size The size of the card and its elements. Governs padding, spacing, and typography.	\| 'sm' \| 'md' \| 'lg'	'sm'
variant The visual style of the card.	\| 'outline' \| 'outline-elevated' \| 'elevated'	'outline'

alignment

Type

| 'start'
| 'center'

Description

The horizontal alignment of card content and footer.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

interactive

Type

boolean

Description

When true, the card renders as an interactive element with hover and active states.

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the card and its elements. Governs padding, spacing, and typography.

variant

Type

| 'outline'
| 'outline-elevated'
| 'elevated'

Description

The visual style of the card.

Attribute / Property	Value
`class`	'qui-card__root'
`data-alignment`	\| 'start' \| 'center'
`data-card-part`	'root'
`data-interactive`
`data-size`	\| 'sm' \| 'md' \| 'lg'
`data-variant`	\| 'outline' \| 'outline-elevated' \| 'elevated'

class

Value

'qui-card__root'

data-alignment

Value

| 'start'
| 'center'

data-card-part

Value

'root'

data-interactive

Value

data-size

Value

| 'sm'
| 'md'
| 'lg'

data-variant

Value

| 'outline'
| 'outline-elevated'
| 'elevated'

q-card-media

Prop	Type	Default
padding The padding around the media content.	'sm' \| 'lg'	'sm'

padding

Type

'sm' | 'lg'

Description

The padding around the media content.

Attribute / Property	Value
`class`	'qui-card__media'
`data-card-part`	'media'
`data-padding`	'sm' \| 'lg'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-card__media'

data-card-part

Value

'media'

data-padding

Value

'sm' | 'lg'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-card-avatar

Prop	Type
dir The document's text/writing direction.	'ltr' \| 'rtl'
id HTML id attribute. If omitted, a unique identifier will be generated for accessibility.)	string
(stateChanged) Function called when the avatar state is changed.	{ state: string }

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

Type

string

Description

HTML id attribute. If omitted, a unique identifier will be generated for accessibility.)

(stateChanged)

Type

{
  state: string
}

Description

Function called when the avatar state is changed.

Attribute / Property	Value
`class`	'qui-card__avatar'
`data-card-part`	'avatar'
`data-size`	'xl'

q-card-badge

Attribute / Property	Value
`class`	'qui-card__badge'
`data-card-part`	'badge'

q-card-content

Attribute / Property	Value
`class`	'qui-card__content'
`data-alignment`	\| 'start' \| 'center'
`data-card-part`	'content'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-card__content'

data-alignment

Value

| 'start'
| 'center'

data-card-part

Value

'content'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-card-heading

Attribute / Property	Value
`class`	'qui-card__heading'
`data-alignment`	\| 'start' \| 'center'
`data-card-part`	'heading'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-card__heading'

data-alignment

Value

| 'start'
| 'center'

data-card-part

Value

'heading'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-card-eyebrow-text

Attribute / Property	Value
`class`	'qui-card__eyebrow-text'
`data-card-part`	'eyebrow-text'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-card__eyebrow-text'

data-card-part

Value

'eyebrow-text'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-card-heading-text

Attribute / Property	Value
`class`	'qui-card__heading-text'
`data-card-part`	'heading-text'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-card__heading-text'

data-card-part

Value

'heading-text'

data-size

Value

| 'sm'
| 'md'
| 'lg'

Attribute / Property	Value
`class`	'qui-card__menu-trigger'
`data-card-part`	'menu-trigger'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-card__menu-trigger'

data-card-part

Value

'menu-trigger'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-card-subheading-text

Attribute / Property	Value
`class`	'qui-card__subheading-text'
`data-card-part`	'subheading-text'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-card__subheading-text'

data-card-part

Value

'subheading-text'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-card-paragraph-text

Attribute / Property	Value
`class`	'qui-card__paragraph-text'
`data-card-part`	'paragraph-text'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-card__paragraph-text'

data-card-part

Value

'paragraph-text'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-card-footer

Attribute / Property	Value
`class`	'qui-card__footer'
`data-alignment`	\| 'start' \| 'center'
`data-card-part`	'footer'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-card__footer'

data-alignment

Value

| 'start'
| 'center'

data-card-part

Value

'footer'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-card-button

Prop	Type	Default
endIcon lucide-angular icon, positioned after the label.	\| LucideIconData \| string

startIcon lucide-angular icon, positioned before the label.	\| LucideIconData \| string

variant The visual variant of the card button. Maps to underlying QDS button emphasis and variant props.	\| 'primary' \| 'secondary'	'primary'

endIcon

Type

| LucideIconData
| string

Description

lucide-angular icon, positioned after the label.

startIcon

Type

| LucideIconData
| string

Description

lucide-angular icon, positioned before the label.

variant

Type

| 'primary'
| 'secondary'

Description

The visual variant of the card button. Maps to underlying QDS button emphasis and variant props.

Attribute / Property	Value
`class`	'qui-card__button'
`data-card-part`	'button'
`data-size`	\| 'sm' \| 'md' \| 'lg'

q-card-link

Prop	Type	Default
endIcon lucide-angular icon, positioned after the label.	\| LucideIconData \| string

startIcon lucide-angular icon, positioned before the label.	\| LucideIconData \| string

variant The visual variant of the card link. Maps to underlying QDS link emphasis.	\| 'primary' \| 'secondary'	'primary'

endIcon

Type

| LucideIconData
| string

Description

lucide-angular icon, positioned after the label.

startIcon

Type

| LucideIconData
| string

Description

lucide-angular icon, positioned before the label.

variant

Type

| 'primary'
| 'secondary'

Description

The visual variant of the card link. Maps to underlying QDS link emphasis.

Attribute / Property	Value
`class`	'qui-card__link'
`data-card-part`	'link'
`data-size`	\| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'

class

Value

'qui-card__link'

data-card-part

Value

'link'

data-size

Value

| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| 'xxl'

Last updated on May 15, 2026 by Ryan Bower

Button Group

Checkbox