El Card

Card Component

Card component integrates information in a card container with optional header and footer.

When to Use

• Dashboard cards
• Content sections
• Product displays
• Information grouping

Basic Usage

  
    
      
        Card name
        Operation button
      
    
    Card content
  

Simple Card

  
    Card content without header
  

With Images

  
    
    
      Yummy hamburger
      
        {{ currentDate }}
        Operating
      
    
  

Shadow

  Always show shadow
  Show shadow on hover
  Never show shadow

API Reference

Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | header | Title of the card | string | — | | footer | Footer of the card | string | — | | body-style | CSS style of card body | CSSProperties | — | | header-class | Custom class of card header | string | — | | body-class | Custom class of card body | string | — | | footer-class | Custom class of card footer | string | — | | shadow | When to show card shadows | 'always' \| 'never' \| 'hover' | 'always' |

Slots

| Name | Description | |------|-------------| | default | Customize default content | | header | Content of the Card header | | footer | Content of the Card footer |

Common Patterns

Dashboard Card

  
    
      
        {{ title }}
        View All
      
    
    
      
    
  

defineProps({
  title: String,
  value: Number
})

Best Practices

1. Use shadow="hover" for interactive cards
2. Set body-style for custom padding
3. Use header and footer slots for structured content

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.