Card 卡片 ​

<template>
  <u-card style="max-width: 480px">
    <template #header>
      <div class="card-header">
        <span>Card name</span>
      </div>
    </template>
    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
    <template #footer>Footer content</template>
  </u-card>
</template>

<template>
  <u-card style="max-width: 480px">
    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
  </u-card>
</template>

<template>
  <u-card style="max-width: 480px">
    <template #header>Yummy hamburger</template>
    <img
      src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
      style="width: 100%"
    />
  </u-card>
</template>

<template>
  <div class="flex flex-wrap gap-4">
    <u-card style="width: 480px" shadow="always">Always</u-card>
    <u-card style="width: 480px" shadow="hover">Hover</u-card>
    <u-card style="width: 480px" shadow="never">Never</u-card>
  </div>
</template>