Card

Cards group information into flexible containers. They let users browse a collection of related items and actions.

import {QCard} from "@qui/react"

Examples

Showcase

The card's children are rendered at the top of the card (or left, depending on orientation). The rest of the content is customized through React Nodes.

Telematics FrameworkAutomotiveYour path for developing telematics applications for the future of connected cars.

import {ReactNode} from "react"

import {
  QCard,
  QCardContent,
  QCardDescription,
  QCardMedia,
  QCardSubtitle,
  QCardTitle,
} from "@qui/react"

export default function Showcase(): ReactNode {
  return (
    <QCard className="w-[240px]">
      <QCardMedia
        alt="Auto"
        as="img"
        height="160"
        src="/images/auto-vertical-1.png"
        width="240"
      />

      <QCardContent>
        <QCardTitle>Telematics Framework</QCardTitle>
        <QCardSubtitle>Automotive</QCardSubtitle>

        <QCardDescription>
          Your path for developing telematics applications for the future of
          connected cars.
        </QCardDescription>
      </QCardContent>
    </QCard>
  )
}

Customization

The card component is modular and supports a wide range of content. Combine it with our other components and typography to customize for your use case.

NEW

ConnectivityTelematicsYour path for developing telematics applications for the future of connected cars.

import {ReactNode} from "react"

import {AlertCircleIcon, Info} from "lucide-react"

import {
  QBadge,
  QButton,
  QCard,
  QCardActions,
  QCardAdornment,
  QCardContent,
  QCardDescription,
  QCardMedia,
  QCardSubtitle,
  QCardTitle,
  QIconButton,
  useNotification,
} from "@qui/react"

export default function Customization(): ReactNode {
  const {notify} = useNotification()

  const onIconClick = () => {
    notify({
      notification: {
        color: "informative",
        description: "You clicked a button, that was amazing!",
        icon: Info,
        label: "Notification!",
      },
    })
  }

  return (
    <div className="grid justify-center gap-8">
      <QCard background={1} className="w-[260px]">
        <QCardMedia
          alt="Auto"
          as="img"
          src="/images/connected-l.png"
          width="100%"
        />

        <QCardAdornment placement="top-left">
          <QIconButton
            aria-label="Warning"
            color="warning"
            icon={AlertCircleIcon}
            onClick={onIconClick}
          />
        </QCardAdornment>

        <QCardAdornment placement="top-right-outer">
          <QBadge color="informative">NEW</QBadge>
        </QCardAdornment>

        <QCardContent>
          <QCardTitle className="q-font-heading-md">Connectivity</QCardTitle>
          <QCardSubtitle className="text-primary q-font-metadata-md-strong">
            Telematics
          </QCardSubtitle>

          <QCardDescription className="text-primary">
            Your path for developing telematics applications for the future of
            connected cars.
          </QCardDescription>

          <QCardActions>
            <QButton
              color="primary"
              size="s"
              startIcon={Info}
              variant="outline"
            >
              Action
            </QButton>
          </QCardActions>
        </QCardContent>
      </QCard>
    </div>
  )
}

Card Layout

Cards can be laid out vertically (column-based) or horizontally (row-based). Use the orientation property to change to horizontal.

Telematics FrameworkAutomotiveYour path for developing telematics applications for the future of connected cars.

import {ReactNode} from "react"

import {
  QCard,
  QCardContent,
  QCardDescription,
  QCardMedia,
  QCardSubtitle,
  QCardTitle,
} from "@qui/react"

export default function Layout(): ReactNode {
  return (
    <div className="grid justify-center gap-8">
      <QCard className="w-[400px]" orientation="horizontal">
        <QCardMedia
          alt="Auto"
          as="img"
          height="160"
          src="/images/auto-horizontal-1.png"
          width="160"
        />

        <QCardContent>
          <QCardTitle>Telematics Framework</QCardTitle>
          <QCardSubtitle>Automotive</QCardSubtitle>

          <QCardDescription>
            Your path for developing telematics applications for the future of
            connected cars.
          </QCardDescription>
        </QCardContent>
      </QCard>

      <QCard className="w-[240px]">
        <QCardMedia
          alt="Auto"
          as="img"
          height="160"
          src="/images/auto-vertical-1.png"
          width="240"
        />

        <QCardContent>
          <QCardTitle>Telematics Framework</QCardTitle>
          <QCardSubtitle>Automotive</QCardSubtitle>

          <QCardDescription>
            Your path for developing telematics applications for the future of
            connected cars.
          </QCardDescription>
        </QCardContent>
      </QCard>
    </div>
  )
}

Content Alignment

Text can be centered using the alignment property.

Verified

Wi-Fi Hub4 DevicesLorem ipsum dolor sit amet, consectetur adipiscing elit.

Verified

Wi-Fi Hub4 DevicesLorem ipsum dolor sit amet, consectetur adipiscing elit.

import {ReactNode} from "react"

import {CheckCircle2Icon, GaugeIcon, WifiIcon} from "lucide-react"

import {
  QAvatar,
  QBadge,
  QButton,
  QCard,
  QCardAdornment,
  QCardContent,
  QCardDescription,
  QCardSubtitle,
  QCardTitle,
  QIcon,
} from "@qui/react"

export default function ContentAlignment(): ReactNode {
  return (
    <div className="grid justify-center gap-8">
      <QCard className="w-[240px]" size="l">
        <QCardAdornment placement="top-right-outer">
          <QBadge
            color="positive"
            icon={CheckCircle2Icon}
            iconPlacement="start"
          >
            Verified
          </QBadge>
        </QCardAdornment>

        <QCardContent>
          <QAvatar
            aria-label="Wifi"
            className="mb-3"
            color="green"
            icon={<QIcon icon={WifiIcon} size={32} />}
            size={56}
            variant="icon"
          />
          <QCardTitle>Wi-Fi Hub</QCardTitle>
          <QCardSubtitle className="mt-2">4 Devices</QCardSubtitle>

          <QCardDescription>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </QCardDescription>

          <QButton
            className="mt-3"
            color="primary"
            startIcon={GaugeIcon}
            variant="outline"
          >
            Run speed test
          </QButton>
        </QCardContent>
      </QCard>

      <QCard alignment="center" className="w-[240px]" size="l">
        <QCardAdornment placement="top-right-outer">
          <QBadge
            color="positive"
            icon={CheckCircle2Icon}
            iconPlacement="start"
          >
            Verified
          </QBadge>
        </QCardAdornment>

        <QCardContent>
          <QAvatar
            aria-label="Wifi"
            className="mb-3"
            color="green"
            icon={<QIcon icon={WifiIcon} size={32} />}
            size={56}
            variant="icon"
          />
          <QCardTitle>Wi-Fi Hub</QCardTitle>
          <QCardSubtitle className="mt-2">4 Devices</QCardSubtitle>

          <QCardDescription>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </QCardDescription>

          <QButton
            className="mt-3"
            color="primary"
            startIcon={GaugeIcon}
            variant="outline"
          >
            Run speed test
          </QButton>
        </QCardContent>
      </QCard>
    </div>
  )
}

Badges and Indicators

Cards can show badges and icon buttons using the <QCardAdornment> component.

Quantized

AI ModelLorem ipsum dolor sit amet, consectetur adipiscing elit.

Qualcomm

AI ModelLorem ipsum dolor sit amet, consectetur adipiscing elit.

import {ReactNode} from "react"

import {AlertCircleIcon, NetworkIcon} from "lucide-react"

import {
  QAvatar,
  QBadge,
  QButton,
  QCard,
  QCardAdornment,
  QCardContent,
  QCardDescription,
  QCardTitle,
  QIcon,
  QIconButton,
} from "@qui/react"

export default function BadgesAndIndicators(): ReactNode {
  const cardContent = (
    <QCardContent>
      <QAvatar
        aria-label="Network"
        className="mb-3"
        color="brand"
        icon={<QIcon icon={NetworkIcon} size={32} />}
        size={56}
        variant="icon"
      />
      <QCardTitle>AI Model</QCardTitle>
      <QCardDescription>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </QCardDescription>

      <QButton className="mt-3" color="primary" variant="outline">
        Visualize
      </QButton>
    </QCardContent>
  )

  return (
    <div className="flex flex-col gap-8">
      <div className="flex justify-center gap-8">
        <QCard alignment="center" className="w-[240px]">
          <QCardAdornment placement="top-left-outer">
            <QBadge color="positive">Quantized</QBadge>
          </QCardAdornment>
          {cardContent}
        </QCard>

        <QCard alignment="center" className="w-[240px]">
          <QCardAdornment placement="top-right-outer">
            <QBadge color="brand">Qualcomm</QBadge>
          </QCardAdornment>
          {cardContent}
        </QCard>
      </div>

      <div className="flex justify-center gap-8">
        <QCard alignment="center" className="w-[240px]">
          <QCardAdornment placement="top-left">
            <QIconButton
              aria-label="Alert"
              color="primary"
              icon={AlertCircleIcon}
              size="s"
            />
          </QCardAdornment>
          {cardContent}
        </QCard>

        <QCard alignment="center" className="w-[240px]">
          <QCardAdornment placement="top-right">
            <QIconButton
              aria-label="Alert"
              color="negative"
              icon={AlertCircleIcon}
              size="s"
            />
          </QCardAdornment>
          {cardContent}
        </QCard>
      </div>
    </div>
  )
}

Sizes

Control the padding, element spacing, and text size using the size property. The default size is m, and the other available sizes are xs, s, and l.

TitleSubtitleLorem ipsum dolor sit amet, consectetur adipiscing elit.

import {ReactNode} from "react"

import {
  QButton,
  QCard,
  QCardActions,
  QCardContent,
  QCardDescription,
  QCardMedia,
  QCardSubtitle,
  QCardTitle,
} from "@qui/react"

export default function Sizes(): ReactNode {
  return (
    <div className="grid justify-center gap-8">
      <div className="flex flex-1 flex-col justify-center gap-8 md:flex-row">
        <QCard className="w-[200px]" size="xs">
          <QCardMedia
            alt="Connected"
            as="img"
            src="/images/connected-xs.png"
            width="100%"
          />
          <QCardContent>
            <QCardTitle>Title</QCardTitle>
            <QCardSubtitle>Subtitle</QCardSubtitle>
            <QCardDescription>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </QCardDescription>
            <QCardActions>
              <QButton size="xs" variant="outline">
                Action
              </QButton>
            </QCardActions>
          </QCardContent>
        </QCard>

        <QCard className="w-[220px]" size="s">
          <QCardMedia
            alt="Connected"
            as="img"
            src="/images/connected-s.png"
            width="100%"
          />
          <QCardContent>
            <QCardTitle>Title</QCardTitle>
            <QCardSubtitle>Subtitle</QCardSubtitle>
            <QCardDescription>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </QCardDescription>
            <QCardActions>
              <QButton size="s" variant="outline">
                Action
              </QButton>
            </QCardActions>
          </QCardContent>
        </QCard>
      </div>
      <div className="flex flex-1 flex-col justify-center gap-8 md:flex-row">
        <QCard className="w-[240px]" size="m">
          <QCardMedia
            alt="Connected"
            as="img"
            src="/images/connected-m.png"
            width="100%"
          />
          <QCardContent>
            <QCardTitle>Title</QCardTitle>
            <QCardSubtitle>Subtitle</QCardSubtitle>
            <QCardDescription>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </QCardDescription>
            <QCardActions>
              <QButton size="s" variant="outline">
                Action
              </QButton>
            </QCardActions>
          </QCardContent>
        </QCard>

        <QCard className="w-[260px]" size="l">
          <QCardMedia
            alt="Connected"
            as="img"
            src="/images/connected-l.png"
            width="100%"
          />
          <QCardContent>
            <QCardTitle>Title</QCardTitle>
            <QCardSubtitle>Subtitle</QCardSubtitle>
            <QCardDescription>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </QCardDescription>
            <QCardActions>
              <QButton variant="outline">Action</QButton>
            </QCardActions>
          </QCardContent>
        </QCard>
      </div>
    </div>
  )
}

API

Props

Name & Description	Option(s)	Default
alignment Alignment of the card's content.	\| 'left' \| 'center'	'left'
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
background The background color to apply from the theme. Maps to the q-background- CSS class.	\| 1 \| 2 \| 3 \| 4 \| '1' \| '2' \| '3' \| '4' \| 'none'	'2'
children React children prop.	ReactNode
className The className property of the Element interface gets and sets the value of the class attribute of the specified element.	string
elevation The elevation (box-shadow) level to apply from the theme. Maps to the q-elevation- class.	\| 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| '0' \| '1' \| '2' \| '3' \| '4' \| '5'	'2'
orientation The orientation of the card. Sets the card in column- or row-based layout.	\| 'horizontal' \| 'vertical'	'vertical'
size The padding, spacing, and size of the card's content.	\| 'xs' \| 's' \| 'm' \| 'l'	'm'
style The style global attribute contains CSS styling declarations to be applied to the element.	CSSProperties

alignment

Type

| 'left'
| 'center'

Default

'left'

Description

Alignment of the card's content.

Type

| ElementType
| ComponentType

Default

'div'

Description

The component used for the root node. It can be a React component or element.

background

Type

| 1
| 2
| 3
| 4
| '1'
| '2'
| '3'
| '4'
| 'none'

Default

'2'

Description

The background color to apply from the theme. Maps to the q-background- CSS class.

children

Type

ReactNode

Description

React children prop.

className

Type

string

Description

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

elevation

Type

| 0
| 1
| 2
| 3
| 4
| 5
| '0'
| '1'
| '2'
| '3'
| '4'
| '5'

Default

'2'

Description

The elevation (box-shadow) level to apply from the theme. Maps to the q-elevation- class.

orientation

Type

| 'horizontal'
| 'vertical'

Default

'vertical'

Description

The orientation of the card. Sets the card in column- or row-based layout.

size

Type

| 'xs'
| 's'
| 'm'
| 'l'

Default

'm'

Description

The padding, spacing, and size of the card's content.

style

Type

CSSProperties

Description

The style global attribute contains CSS styling declarations to be applied to the element.

Button Group

Device Card