Card

Integrate information in a card container.

Basic usage

Card includes title, content and operations.

Card is made up of header, body and footer. header and footer are optional, and its content distribution depends on a named slot.

List item 1

List item 2

List item 3

List item 4

export function CardBasic() {  return (    <ElCard      style={{ maxWidth: 480 }}      header={        <div className="card-header">          <span>Card name</span>        </div>      }      footer="Footer content"    >      {[1, 2, 3, 4].map((item) => (        <p key={item} style={listItemStyle(item - 1)}>          {`List item ${item}`}        </p>      ))}    </ElCard>  );}

Simple card

The header part can be omitted.

List item 1

List item 2

List item 3

List item 4

export function CardSimple() {  return (    <ElCard style={{ maxWidth: 480 }}>      {[1, 2, 3, 4].map((item) => (        <p key={item} style={listItemStyle(item - 1)}>          {`List item ${item}`}        </p>      ))}    </ElCard>  );}

With images

Display richer content by adding some configs.

The body-style attribute defines CSS style of custom body.

Shadow

You can define when to show the card shadows

The shadow attribute determines when the card shadows are displayed. It can be always, hover or never.

Always

Hover

Never

export function CardShadow() {  return (    <div style={{ display: "flex", flexWrap: "wrap", gap: 16 }}>      <ElCard style={{ width: 480 }} shadow="always">        Always      </ElCard>      <ElCard style={{ width: 480 }} shadow="hover">        Hover      </ElCard>      <ElCard style={{ width: 480 }} shadow="never">        Never      </ElCard>    </div>  );}

API

Attributes

Name	Description	Type	Default
header	title of the card. Also accepts a DOM passed by `slot#header`	`string`	—
footer 2.4.3	footer of the card. Also accepts a DOM passed by `slot#footer`	`string`	—
body-style	CSS style of card body	`object`	—
header-class 2.9.8	custom class name of card header	`string`	—
body-class 2.3.10	custom class name of card body	`string`	—
footer-class 2.9.8	custom class name of card footer	`string`	—
shadow	when to show card shadows	`enum`	always

Slots

Name	Description
default	customize default content
header	content of the Card header
footer	content of the Card footer