Card

The Card component is the most versatile container module on a page, used for hosting content, actions, and related information. It offers a rich set of layout variants and decorative elements that can be flexibly combined to meet various content display needs.

Basic Usage

A default card includes a title, content, and footer. Use the title prop for quick setup.

<TCard title="Basic Card">
  This is the main content area of the card. You can place any content here.
  <template #footer>
    Card Footer
  </template>
</TCard>

Card Sizes

Use the size prop to switch between three preset padding sizes for different display scenarios.

View Code

<TCard size="sm" title="Small SM">
  Compact padding, ideal for sidebars or information-dense areas.
</TCard>
<TCard size="md" title="Medium MD (default)">
  Standard padding, suitable for most scenarios.
</TCard>
<TCard size="lg" title="Large LG">
  Relaxed padding, great for visually prominent content blocks.
</TCard>

Card Title and Subtitle

The Card supports setting title and subtitle via both prop and slot approaches. The subtitle renders below the title with a smaller font size and lighter color.

View Code

<TCard title="Main Title" subtitle="A descriptive subtitle text">
  Quickly set title and subtitle using props.
</TCard>

You can also use named slots to insert more complex title content, or use the header-actions slot to add action buttons on the right side of the header.

View Code

<TCard>
  <template #title>
    <div class="d-flex align-items-center gap-2 mb-1">
      <TAvatar src="/avatar.png"/>
      User Info
    </div>
  </template>
  <template #subtitle>
    Rich title with avatar
  </template>
  <template #header-actions>
    <TButton color="primary" ghost>Edit</TButton>
  </template>
  Slots allow for more flexible title area customization.
</TCard>

onlyBody Mode

When onlyBody is enabled, the title and content are merged into a single card-body without a card-header divider, resulting in a cleaner layout.

View Code

<TCard onlyBody title="onlyBody Mode" subtitle="Seamless title and content">
  The divider between the title area and content is removed, giving a more compact and unified visual look.
</TCard>

Link Card

The Card integrates with Vue Router and native links, allowing it to render as a clickable card.

<TCard href="https://tabler.io" title="External Link">
  Renders as an &lt;a&gt; tag.
</TCard>
<TCard link title="Link Style">
  Adds link style (hover effect) only, with no actual link behavior.
</TCard>

Combine with linkRotate or linkPop for hover interaction effects.

<TCard href="#" linkRotate title="Rotate Effect">
  Slight rotation on hover.
</TCard>
<TCard href="#" linkPop title="Pop Effect">
  Pops up with a deeper shadow on hover.
</TCard>

Card Background Color

Use the bg and textColor props to quickly set background and text colors.

<TCard bg="primary" textColor="primary-fg" title="Primary Card">
  Uses Primary background, text adapts automatically.
</TCard>
<TCard bg="blue-lt" title="Light Card" subtitle="With light background">
  Light backgrounds work well alongside darker cards.
</TCard>

Status Bar

Use statusColor to add a colored indicator bar at a specified position — great for identifying card status categories.

<TCard statusColor="success" title="Success Status">
  Green status bar at the top.
</TCard>
<TCard statusColor="danger" statusPosition="start" title="Error Status">
  Red status bar on the left.
</TCard>
<TCard statusColor="warning" statusPosition="bottom" title="Warning Status">
  Yellow status bar at the bottom.
</TCard>

Active and Inactive States

Use the active and inactive props to indicate the card's enabled state.

<TCard active title="Active State">
  Adds a highlighted left border to indicate the current selection.
</TCard>
<TCard inactive title="Inactive State">
  The card appears grayed out, visually disabled.
</TCard>

Borderless & Stacked

<TCard borderless title="Borderless Card">
  Removes borders and shadows, blending into the background.
</TCard>
<TCard stacked title="Stacked Card">
  Double shadow at the bottom creates a layered effect.
</TCard>

Rotated Effects

Use rotateStart or rotateEnd to give the card a slight tilted perspective.

<TCard rotateStart title="Rotate Start">
  Card tilts to the left (from bottom-right to top-left).
</TCard>
<TCard rotateEnd title="Rotate End">
  Card tilts to the right (from bottom-left to top-right).
</TCard>

Image & Text Layout

The Card supports 4 image positions: top, bottom, start (left), and end (right), with imgRatio controlling the responsive image aspect ratio.

💡 Top/bottom images use CSS background-image with img-responsive container; side images use <img> with a row grid layout, ideal for list-style cards with thumbnails.

View Code

<TCard
    imgSrc="https://picsum.photos/seed/card1/600/300"
    imgPosition="top"
    imgRatio="21x9"
    title="Top Image"
>
  21:9 widescreen top image, perfect as a cover.
</TCard>
<TCard
    imgSrc="https://picsum.photos/seed/card2/600/300"
    imgPosition="bottom"
    imgRatio="16x9"
    title="Bottom Image"
>
  16:9 bottom image — text on top, image below.
</TCard>

Side Image

💡 Responsive Tip: Side image uses order-md-last grid reordering. On narrow screens (such as mobile or the current document's narrow viewport), the image automatically reverts to the default order for a better reading experience.

💡 Layout Tip: In side image mode, the #footer slot content is automatically pushed to the bottom of the card — no extra CSS needed.

View Code

<TCard
    imgSrc="https://picsum.photos/seed/card3/200/200"
    imgPosition="start"
    title="Left Image"
>
  Thumbnail on the left, content on the right — ideal for article list cards.
  <template #footer>
    <a href="#">Read More</a>
  </template>
</TCard>
<TCard
    imgSrc="https://picsum.photos/seed/card4/200/200"
    imgPosition="end"
    title="Right Image"
>
  Image on the right, text on the left.
  <template #footer>
    <a href="#">Read More</a>
  </template>
</TCard>

Image Aspect Ratios

The Card supports 13 responsive image aspect ratios via the imgRatio prop:

imgRatio	Description
1x1	Square
2x1	Wide landscape
1x2	Tall portrait
3x1	Extra wide banner
1x3	Extra tall
4x1	Extreme wide
1x4	Extreme tall
4x3	Standard photo
3x4	Portrait photo
16x9	HD video
9x16	Phone portrait
21x9	Ultra-wide cinematic (default)
9x21	Ultra-tall portrait

Default value is 21x9.

Stamp Decoration

Use the #stamp slot to add a stamp decoration in the top-right corner of the card, often used for logos, icons, or brand elements.

When using #stamp, wrap the icon in a <div class="card-stamp-icon"> element. Set the background color with bg-* utility classes (e.g., bg-yellow), and the icon must include the icon class.

<TCard title="Card with Stamp">
  Brand icons or decorative elements can be placed in the top-right corner.
  <template #stamp>
    <div class="card-stamp-icon bg-yellow">
      <IconStar class="icon icon-1" />
    </div>
  </template>
</TCard>

Ribbon

Use the #ribbon slot together with ribbonColor and ribbonPosition props to add a decorative ribbon on the left or top of the card.

View Code

<TCard ribbonColor="red" title="Left Ribbon" subtitle="Default start position">
  Red left-side ribbon.
  <template #ribbon>
    Hot
  </template>
</TCard>
<TCard ribbonColor="orange" ribbonPosition="top" title="Top Ribbon">
  Orange top ribbon with icon.
  <template #ribbon>
    <IconStar/>
  </template>
</TCard>

Footer & Transparent Footer

Add a card footer via the #footer slot. Enable footerTransparent to make the footer background transparent. In side image mode, the footer is automatically pushed to the bottom of the card.

<TCard title="Card with Footer">
  Card content...
  <template #footer>
    <div class="d-flex justify-content-between">
      <span>Updated: 2024-01-01</span>
      <a href="#">Details</a>
    </div>
  </template>
</TCard>
<TCard footerTransparent title="Transparent Footer">
  Card content...
  <template #footer>
    The footer background is transparent, blending into the card body.
  </template>
</TCard>

noBody Mode

When noBody is enabled, the card body content is no longer wrapped in card-body, making it suitable for tables, list groups, and other elements that need seamless fitting.

<TCard title="Table Without Body Wrapper" noBody>
  <div class="table-responsive">
    <table class="table table-vcenter card-table">
      <thead>
      <tr>
        <th>Name</th>
        <th>Role</th>
        <th>City</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>Zhang San</td>
        <td>Frontend Engineer</td>
        <td>Shanghai</td>
      </tr>
      <tr>
        <td>Li Si</td>
        <td>Backend Engineer</td>
        <td>Beijing</td>
      </tr>
      </tbody>
    </table>
  </div>
</TCard>

API

Props

Prop	Description	Type	Default
bg	Card background color. bg="primary" → class="bg-primary"	TablerColor	undefined
textColor	Card text color. textColor="primary-fg" → class="text-primary-fg"	TablerColor	undefined
borderless	Borderless mode	boolean	false
footerTransparent	Transparent footer mode	boolean	false
href	Link URL, renders as <a> tag	string	undefined
to	Router navigation target, renders as <router-link>	RouteLocationRaw	undefined
link	Link style only (no actual link behavior), combine with linkRotate/linkPop	boolean	false
linkRotate	Slight rotation on hover (requires href/to or link)	boolean	false
linkPop	Pop up with deeper shadow on hover (requires href/to or link)	boolean	false
noBody	Remove default .card-body wrapper — suitable for tables/list groups	boolean	false
onlyBody	Title and content in same card-body, no card-header divider	boolean	false
size	Card padding size	'sm' | 'md' | 'lg'	undefined (≈md)
stacked	Stacked effect (double shadow at bottom)	boolean	false
statusColor	Status bar color	TablerColor	undefined
statusPosition	Status bar position	'top' | 'start' | 'bottom'	'top'
title	Card title (prop approach)	string	undefined
subtitle	Card subtitle, rendered below the title (prop approach)	string	undefined
rotateStart	Card tilt (bottom-left to top-right)	boolean	false
rotateEnd	Card tilt (top-left to bottom-right)	boolean	false
active	Active state with highlighted border	boolean	false
inactive	Inactive state grayed out	boolean	false
ribbonColor	Ribbon background color	TablerColor	undefined
ribbonPosition	Ribbon position	'start' | 'top'	'start'
imgSrc	Image URL	string	undefined
imgPosition	Image position	'start' | 'end' | 'top' | 'bottom'	'top'
imgRatio	Responsive image aspect ratio	'1x1' | '2x1' | '1x2' | '3x1' | '1x3' | '4x1' | '1x4' | '4x3' | '3x4' | '16x9' | '9x16' | '21x9' | '9x21'	'21x9'
imgAlt	Image alt text (only for side images)	string	undefined

Slots

Slot	Description
default	Card body content (wrapped by card-body, except in noBody mode)
header	Card header area (overrides the default title + subtitle + header-actions structure)
title	Card title (replaces the prop title rendering position)
subtitle	Card subtitle (replaces the prop subtitle rendering position)
header-actions	Right-side action area within the header, rendered in .card-options container
footer	Card footer
stamp	Top-right stamp decoration area
ribbon	Left or top decorative ribbon
img	Side image area (only when imgPosition="start" or "end"), replaces default <img> rendering