Card

1.19.0 Beta

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

import {Card} from "@qualcomm-ui/react/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.

<Card.Root className="w-72" variant="outline">
  <Card.Media>
    <Card.Avatar>
      <Avatar.Content icon={User} />
    </Card.Avatar>
  </Card.Media>
  <Card.Content>
    <Card.Heading>
      <Card.HeadingText>Card Title</Card.HeadingText>
      <Card.SubheadingText>Subheading</Card.SubheadingText>
    </Card.Heading>

    <Card.SubheadingText>Paragraph Subheading</Card.SubheadingText>
    <Card.ParagraphText>
      This is a small card with media, header, body text, and a footer
      with actions.
    </Card.ParagraphText>
  </Card.Content>
  <Card.Footer>
    <Card.Button variant="secondary">Cancel</Card.Button>
    <Card.Button variant="primary">Confirm</Card.Button>
  </Card.Footer>
</Card.Root>

Variants

The variant prop 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.

<Card.Root className="w-64" variant="outline">
  <Card.Content>
    <Card.Heading>
      <Card.HeadingText>Outline</Card.HeadingText>
    </Card.Heading>
    <Card.ParagraphText>
      A card with a border and background color.
    </Card.ParagraphText>
  </Card.Content>
</Card.Root>

<Card.Root className="w-64" variant="outline-elevated">
  <Card.Content>
    <Card.Heading>
      <Card.HeadingText>Outline Elevated</Card.HeadingText>
    </Card.Heading>
    <Card.ParagraphText>
      A card with a border and subtle elevation.
    </Card.ParagraphText>
  </Card.Content>
</Card.Root>

<Card.Root className="w-64" variant="elevated">
  <Card.Content>
    <Card.Heading>
      <Card.HeadingText>Elevated</Card.HeadingText>
    </Card.Heading>
    <Card.ParagraphText>
      A card with a subtle elevation and no border.
    </Card.ParagraphText>
  </Card.Content>
</Card.Root>

Actions

Two types of actions are supported in cards: Card.Button and 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.

<Card.Root className="w-64 self-start" variant="outline">
  <Card.Content>
    <Card.Heading>
      <Card.HeadingText>Link Action</Card.HeadingText>
    </Card.Heading>
    <Card.ParagraphText>
      Cards can use links to navigate users to related content.
    </Card.ParagraphText>
  </Card.Content>
  <Card.Footer>
    <Card.Link endIcon={ChevronRight}>Learn More</Card.Link>
  </Card.Footer>
</Card.Root>

<Card.Root className="w-64" variant="outline">
  <Card.Content>
    <Card.Heading>
      <Card.HeadingText>Button Actions</Card.HeadingText>
    </Card.Heading>
    <Card.ParagraphText>
      Cards can use buttons for primary and secondary actions.
    </Card.ParagraphText>
  </Card.Content>
  <Card.Footer>
    <Card.Button variant="secondary">Cancel</Card.Button>
    <Card.Button variant="primary">Confirm</Card.Button>
  </Card.Footer>
</Card.Root>

Set interactive on Card.Root to enable hover and pressed visual states on the content area. Use the render prop to make the root element to a <button> so screen readers know that the element is interactive.

WARNING

Interactive cards must not contain buttons, links, or input fields. React will yell at you if you nest interactive elements. Install the QUI React ESLint Plugin to enforce this in your project.

<Card.Root
  className="w-64"
  interactive
  render={<button />}
  variant="elevated"
>
  <Card.Content>
    <Card.Heading>
      <Card.HeadingText>Interactive Card</Card.HeadingText>
    </Card.Heading>
    <Card.ParagraphText>
      Hover or press this card to see the interactive states.
    </Card.ParagraphText>
  </Card.Content>
</Card.Root>

Media

Use Card.Media to display an image or other visual content at the top of the card.

Automotive Platform

Next-gen connectivity

<Card.Root className="w-64" variant="outline">
  <Card.Media>
    <img
      alt="Qualcomm automotive technology"
      className="h-40 w-full"
      src="https://react.qui.qualcomm.com/images/auto-vertical-1.png"
    />
  </Card.Media>
  <Card.Content>
    <Card.Heading>
      <Card.HeadingText>Automotive Platform</Card.HeadingText>
      <Card.SubheadingText>Next-gen connectivity</Card.SubheadingText>
    </Card.Heading>
  </Card.Content>
  <Card.Footer>
    <Card.Link endIcon={ChevronRight}>Learn More</Card.Link>
  </Card.Footer>
</Card.Root>

Badge

Use Card.Badge to place 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.

<Card.Root className="w-72" variant="outline">
  <Card.Badge>
    <Badge emphasis="brand">NEW</Badge>
  </Card.Badge>
  <Card.Content>
    <Card.Heading>
      <Card.HeadingText>Snapdragon X2 Elite</Card.HeadingText>
      <Card.SubheadingText>
        A legendary leap in performance
      </Card.SubheadingText>
    </Card.Heading>
    <Card.ParagraphText>
      Unleash your masterpiece with ultra-premium performance, multi-day
      battery life, and blazing AI processing power.
    </Card.ParagraphText>
  </Card.Content>
  <Card.Footer>
    <Card.Link endIcon={ChevronRight}>Learn More</Card.Link>
  </Card.Footer>
</Card.Root>

Alignment

Set alignment on Card.Root 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.

startcenter

<Card.Root alignment={alignment} className="w-80" variant="outline">
  <Card.Content>
    <Card.Heading>
      <Card.EyebrowText>Eyebrow</Card.EyebrowText>
      <Card.HeadingText>Card Title</Card.HeadingText>
      <Card.SubheadingText>Subheading</Card.SubheadingText>
    </Card.Heading>
    <Card.ParagraphText>
      Toggle between start and center alignment to see how heading and
      footer content repositions.
    </Card.ParagraphText>
  </Card.Content>
  <Card.Footer>
    <Card.Button variant="secondary">Cancel</Card.Button>
    <Card.Button variant="primary">Confirm</Card.Button>
  </Card.Footer>
</Card.Root>

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.

smmdlg

<Card.Root size={size} style={{width}} variant="outline">
  <Card.Media>
    <Card.Avatar>
      <Avatar.Content icon={User} />
    </Card.Avatar>
  </Card.Media>
  <Card.Content>
    <Card.Heading>
      <Card.EyebrowText>Eyebrow</Card.EyebrowText>
      <Card.HeadingText>Card Title</Card.HeadingText>
    </Card.Heading>
    <Card.SubheadingText>Subheading</Card.SubheadingText>
    <Card.ParagraphText>
      Resize this card using the controls below to see how spacing and
      typography scale across sizes.
    </Card.ParagraphText>
  </Card.Content>
  <Card.Footer>
    <Card.Button variant="secondary">Cancel</Card.Button>
    <Card.Button variant="primary">Confirm</Card.Button>
  </Card.Footer>
</Card.Root>

Explorer

Eyebrow

Card Title

Subheading

A brief description that provides additional context about this card.

Learn more

Component Anatomy

Hover to highlight, click to view API

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

API

<Card.Root>

The outer container for a card. Provides size and variant context to all child card parts. Renders a <div> element by default.

Prop	Type	Default
alignment The alignment of the card's content. 'start': The content is aligned to the start of the card. 'center': The content is centered horizontally within the card.	\| 'start' \| 'center'
children React children prop.	ReactNode
dir The document's text/writing direction.	'ltr' \| 'rtl'	'ltr'
interactive If `true`, the root of the card will be styled as a button with interactive states.	boolean
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
size The size of the card, controlling internal spacing and typography.	\| 'sm' \| 'md' \| 'lg'	'sm'
variant The visual style of the card. `outline`: The card has a border and a background color. `outline-elevated`: The card has a border and a subtle elevation. `elevated`: The card has a subtle elevation.	\| 'outline' \| 'outline-elevated' \| 'elevated'	'outline'

alignment

Type

| 'start'
| 'center'

Description

The alignment of the card's content.

'start': The content is aligned to the start of the card.
'center': The content is centered horizontally within the card.

children

Type

ReactNode

Description

React children prop.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

interactive

Type

boolean

Description

If true, the root of the card will be styled as a button with interactive states.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

size

Type

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

Description

The size of the card, controlling internal spacing and typography.

variant

Type

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

Description

The visual style of the card.

outline: The card has a border and a background color.
outline-elevated: The card has a border and a subtle elevation.
elevated: The card has a subtle elevation.

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

className

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'

<Card.Media>

A media area at the top of the card for images, avatars, or other visual content. Renders a <div> element by default.

Prop	Type	Default
children React children prop.	ReactNode
padding The vertical padding of the media component.	'sm' \| 'lg'	'sm'
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

padding

Type

'sm' | 'lg'

Description

The vertical padding of the media component.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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

className

Value

'qui-card__media'

data-card-part

Value

'media'

data-padding

Value

'sm' | 'lg'

data-size

Value

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

<Card.Avatar>

A slot for an avatar within the card. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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

<Card.Badge>

A badge slot within the card, typically used to display a status or category badge. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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

<Card.Content>

The main content area of the card that wraps text, headings, and other body content. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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

className

Value

'qui-card__content'

data-alignment

Value

| 'start'
| 'center'

data-card-part

Value

'content'

data-size

Value

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

<Card.Heading>

A container that wraps the eyebrow text, heading text, and optional menu trigger. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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

className

Value

'qui-card__heading'

data-alignment

Value

| 'start'
| 'center'

data-card-part

Value

'heading'

data-size

Value

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

<Card.EyebrowText>

A small label above the heading, typically used for categorization. Renders a <span> element by default.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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

className

Value

'qui-card__eyebrow-text'

data-card-part

Value

'eyebrow-text'

data-size

Value

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

<Card.HeadingText>

The primary heading of the card. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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

className

Value

'qui-card__heading-text'

data-card-part

Value

'heading-text'

data-size

Value

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

A trigger area for an overflow menu within the card heading. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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

className

Value

'qui-card__menu-trigger'

data-card-part

Value

'menu-trigger'

data-size

Value

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

<Card.SubheadingText>

A secondary heading below the main heading. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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

className

Value

'qui-card__subheading-text'

data-card-part

Value

'subheading-text'

data-size

Value

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

<Card.ParagraphText>

A paragraph of body text within the card. Renders a <p> element by default.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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

className

Value

'qui-card__paragraph-text'

data-card-part

Value

'paragraph-text'

data-size

Value

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

<Card.Footer>

The bottom section of the card, typically for actions like buttons or links. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

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

className

Value

'qui-card__footer'

data-alignment

Value

| 'start'
| 'center'

data-card-part

Value

'footer'

data-size

Value

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

<Card.Button>

A button area within the card footer. Renders a <button> element by default.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
variant The style variant of the button. `primary`: reserved for the primary action of the card. `secondary`: a secondary action denoted by a subtle outline style.	\| 'primary' \| 'secondary'

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

variant

Type

| 'primary'
| 'secondary'

Description

The style variant of the button.

primary: reserved for the primary action of the card.
secondary: a secondary action denoted by a subtle outline style.

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

<Card.Link>

A link within the card footer. Renders an <a> element by default.

Prop	Type	Default
children React children prop.	ReactNode
dir The document's text/writing direction.	'ltr' \| 'rtl'	'ltr'
disabled Controls whether the link is interactive. When `true`, pointer/focus events are blocked, and the link is visually dimmed.	boolean
endIcon Icon positioned after the text content. If supplied as a `LucideIcon`, the size will automatically match the size prop. Supply as a `ReactElement` for additional customization.	\| LucideIcon \| ReactNode
inheritFontSize v1.28.0 Controls whether the link inherits font size from its parent element.	boolean
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
startIcon Icon positioned before the text content. If supplied as a `LucideIcon`, the size will automatically match the size prop. Supply as a `ReactElement` for additional customization.	\| LucideIcon \| ReactNode
variant The style variant of the button. `primary`: reserved for the primary link of the card. `secondary`: a secondary link denoted by a subtle style.	\| 'primary' \| 'secondary'

children

Type

ReactNode

Description

React children prop.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

disabled

Type

boolean

Description

Controls whether the link is interactive. When true, pointer/focus events are blocked, and the link is visually dimmed.

endIcon

Type

| LucideIcon
| ReactNode

Description

Icon positioned after the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.

inheritFontSize

v1.28.0

Type

boolean

Description

Controls whether the link inherits font size from its parent element.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

startIcon

Type

| LucideIcon
| ReactNode

Description

Icon positioned before the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.

variant

Type

| 'primary'
| 'secondary'

Description

The style variant of the button.

primary: reserved for the primary link of the card.
secondary: a secondary link denoted by a subtle style.

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

className

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