Card

Card component is used to group information content, providing unified appearance and interaction behavior, commonly used in admin systems, information display and other scenarios.

Basic Usage

The most basic card usage, containing content area that can include any content.

Show Code

Card Title

You can set the card title through the title attribute, or use the titleIcon attribute to add a title icon.

Show Code

Shadow Effect

Through the shadow attribute, you can set when the card shadow is displayed. There are three optional values: always (always show), hover (show on hover), and never (never show).

Show Code

Slot Usage

Card component provides multiple slots, including default slot, header left slot, header right slot, and footer slot, which can achieve various custom layouts.

Show Code

Card API

Attributes

Attribute	Description	Type	Accepted Values	Default
title	Card title	string	—	—
titleIcon	Title icon	IconTypes	—	—
shadow	When to show shadow	string	always / hover / never	always

Slots

Slot Name	Description
default	Card main content
headLeft	Card header left content
headRight	Card header right content
footer	Card footer content

Style Variables

The card component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$shadow-color	Card shadow color
border-color()	Card border color function
</rewritten_file>