Card

Shadow="never" matches the default Arco Card; shadow="hover" matches hoverable. See the Element Plus docs for props.

Header & Content

Use shadow="never" for Arco's default outlined card.

Project overview

A shared component library for the team.

Updated today

<template>
  <el-card header="Project overview" shadow="never" style="width: 280px; max-width: 100%">
    A shared component library for the team.
    <template #footer>Updated today</template>
  </el-card>
</template>

Shadows

Arco has no three-way shadow setting; each value stays distinct. Hover the card to see its shadow.

always

Card content

hover

Card content

never

Card content

<script setup lang="ts">
const shadows = ['always', 'hover', 'never'] as const
</script>

<template>
  <el-card v-for="shadow in shadows" :key="shadow" :shadow="shadow" :header="shadow" style="width: 200px; max-width: 100%">Card content</el-card>
</template>

Differences from Arco

• Element Plus defaults to always-visible shadows. Set card.shadow to never in ConfigProvider for Arco's default.
• The footer has no Arco equivalent and extends the header spacing.