Cards

Introduction to using the Cards component

Cards, cards, recommended for displaying a series of information or content you particularly want to highlight.

Basic usage

<bpa-card>
  Content
</bpa-card>

No padding

<bpa-card nopadding>
  Content
</bpa-card>

Custom header and footer

<bpa-card 
  header="card header text"
  footer="card footer text"
>
  Content
</bpa-card>

<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>

Shadow

<bpa-card shadow>
  Content
</bpa-card>

Attributes

Name	Value	Type	Default	Required	Note
header	{ text } or template	String
footer	{ text } or template	String
nopadding		Boolean			padding=0
shadow		Boolean	false		show/hide shadow

Demo