---
description: 介紹使用 Cards 卡片元件
---

# Cards

<div data-full-width="false"><figure><img src="https://3730302285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWkKD42HpQdyU6pMEvZom%2Fuploads%2FZ1ee2s5hqFlWug54IRFT%2Fcard.webp?alt=media&#x26;token=eaa3f06b-76f4-4f99-969e-af61949b9e2d" alt="Card 介紹示意圖"><figcaption></figcaption></figure></div>

Cards，卡片，推薦使用在展示一系列的資訊或是特別想介紹的內容。

### 基本使用 <a href="#basic" id="basic"></a>

```html
<bpa-card>
  Cotnent
</bpa-card>
```

### 沒有內距 <a href="#no-padding" id="no-padding"></a>

```html
<bpa-card nopadding>
  Cotnent
</bpa-card>
```

### 客製化標頭、尾 <a href="#custom-header-footer" id="custom-header-footer"></a>

```html
<bpa-card 
  header="card header text"
  footer="card footer text"
>
  Cotnent
</bpa-card>
```

```html
<bpa-card>
  <template v-slot:header>
    <mark>Card Header</mark>
  </template>
  Content
  <template v-slot:footer>
    <bpa-button>Card Footer Button</bpa-button>
  </template>
</bpa-card>
```

### 陰影 <a href="#shadow" id="shadow"></a>

```html
<bpa-card shadow>
  Cotnent
</bpa-card>
```

### 屬性 <a href="#props" id="props"></a>

<table data-full-width="false"><thead><tr><th width="129">Name</th><th>Value</th><th>Type</th><th>Default</th><th data-type="checkbox">Required</th><th>Note</th></tr></thead><tbody><tr><td>header</td><td>{ text } or template</td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>footer</td><td>{ text } or template</td><td>String</td><td></td><td>false</td><td></td></tr><tr><td>nopadding</td><td></td><td>Boolean</td><td></td><td>false</td><td>padding=0</td></tr><tr><td>shadow</td><td></td><td>Boolean</td><td>false</td><td>false</td><td>show/hide shadow</td></tr></tbody></table>

### Demo

{% embed url="https://codesandbox.io/embed/piman-card-0xkr5d?fontsize=14&module=/src/App.vue&theme=dark" fullWidth="false" %}
