Card

Card component for displaying information content with support for title, text, actions and various content forms.

Component Composition:

• UCard - Card container component
• UCardTitle - Card title component
• UCardText - Card text component
• UCardAction - Card action area component

Basic Usage

The simplest card usage with title, text and action components.

Basic Card

This is a basic card component for displaying related information. Cards support custom styles and layouts.

<template>
  <u-card>
    <u-card-title>Basic Card</u-card-title>
    <u-card-text>
      <p>This is a basic card component.</p>
    </u-card-text>
    <u-card-action>
      <u-button>Close</u-button>
    </u-card-action>
  </u-card>
</template>

Card Grid

Display multiple cards in a grid layout.

User Management

Manage system user information with CRUD operations.

Permission Settings

Configure user roles and permissions for data security.

Data Statistics

View system data statistics reports and analytics charts.

System Settings

Configure system parameters and global settings.

<template>
  <div class="card-grid">
    <u-card>
      <u-card-title>User Management</u-card-title>
      <u-card-text>
        <p>Manage system user information.</p>
      </u-card-text>
      <u-card-action>
        <u-button color="primary">View</u-button>
      </u-card-action>
    </u-card>
  </div>
</template>

Border & Shadow

Control card border and shadow via bordered and shadow props.

Shadow (Default)

Card with shadow enabled by default.

Border Only

Card with border enabled and shadow disabled.

<template>
  <!-- Default: shadow enabled, no border -->
  <u-card>
    <u-card-title>Shadow</u-card-title>
    <u-card-text>Card with shadow.</u-card-text>
  </u-card>

  <!-- Border enabled, shadow disabled -->
  <u-card bordered :shadow="false">
    <u-card-title>Border Only</u-card-title>
    <u-card-text>Card with border only.</u-card-text>
  </u-card>
</template>

Custom Height

Set card height via height prop.

Fixed Height

This card has a height of 120px.

Taller Card

This card has a height of 180px and can hold more content.

<template>
  <div class="card-row">
    <u-card height="120px">
      <u-card-title>Fixed Height</u-card-title>
      <u-card-text>
        <p>This card has a height of 120px.</p>
      </u-card-text>
    </u-card>

    <u-card height="180px">
      <u-card-title>Taller Card</u-card-title>
      <u-card-text>
        <p>This card has a height of 180px.</p>
      </u-card-text>
    </u-card>
  </div>
</template>

Custom Radius

Set card border radius via radius prop.

Large Radius

This card has a border radius of 12px.

No Radius

This card has no border radius.

<template>
  <u-card radius="12px">
    <u-card-title>Large Radius</u-card-title>
    <u-card-text>This card has a 12px border radius.</u-card-text>
  </u-card>

  <u-card radius="0px">
    <u-card-title>No Radius</u-card-title>
    <u-card-text>This card has no border radius.</u-card-text>
  </u-card>
</template>

Card Color

Set card background color via color prop. Supports preset color types (primary, success, warning, error) and custom color values.

Primary

Card with primary color background.

Custom Color

Card with custom hex color background.

<template>
  <!-- Preset color -->
  <u-card color="primary">
    <u-card-title>Primary</u-card-title>
    <u-card-text>Card with primary color.</u-card-text>
  </u-card>

  <!-- Custom color -->
  <u-card color="#e8f5e9">
    <u-card-title>Custom Color</u-card-title>
    <u-card-text>Card with custom hex color.</u-card-text>
  </u-card>
</template>

UCard API

Property	Description	Type	Default
bordered	Whether to show border	boolean	false
shadow	Whether to show shadow	boolean	true
radius	Border radius	string	'4px'
height	Card height	string	-
color	Card background color	'primary' | 'success' | 'warning' | 'error' | string	-

UCard Slots

Slot	Description
default	Card content

UCardTitle API

No properties

UCardTitle Slots

Slot	Description
default	Title content

UCardText API

No properties

UCardText Slots

Slot	Description
default	Text content

UCardAction API

No properties

UCardAction Slots

Slot	Description
default	Action content