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

<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>Card name</span>
        <el-button class="button" text>Operation button</el-button>
      </div>
    </template>
    Card content
  </el-card>
</template>

Simple Card

<template>
  <el-card>
    Card content without header
  </el-card>
</template>

With Images

<template>
  <el-card :body-style="{ padding: '0px' }">
    <img src="https://example.com/image.jpg" class="image" />
    <div style="padding: 14px">
      <span>Yummy hamburger</span>
      <div class="bottom">
        <time class="time">{{ currentDate }}</time>
        <el-button text class="button">Operating</el-button>
      </div>
    </div>
  </el-card>
</template>

Shadow

<template>
  <el-card shadow="always">Always show shadow</el-card>
  <el-card shadow="hover">Show shadow on hover</el-card>
  <el-card shadow="never">Never show shadow</el-card>
</template>

API Reference

Attributes

Slots

Common Patterns

Dashboard Card

<template>
  <el-card class="dashboard-card">
    <template #header>
      <div class="card-header">
        <span>{{ title }}</span>
        <el-button link type="primary">View All</el-button>
      </div>
    </template>
    <div class="card-content">
      <el-statistic :value="value" />
    </div>
  </el-card>
</template>

<script setup>
defineProps({
  title: String,
  value: Number
})
</script>

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