# Card
Card is flexible container element. Card component is based on Bootstrap's card (opens new window), therefore you can use classes provided by Bootstrap Card.
# Card slots
Card element has these slots:
- default - content of this slot will be inside
.card-body
element. - header - content of this slot will be inside
.card-header
element. - footer - content of this slot will be inside
.card-footer
element.
# Example 1
Header text inside header slot
Some default card text inside default slot with .card-body class
<card>
<template slot="header">Header text inside header slot</template>
<b>Some default card text inside default slot with .card-body class</b>
<template slot="footer">Footer text inside footer slot</template>
</card>
# Example 2
Header text inside header slot
Some default card text inside default slot with .card-body class
<card>
<template slot="header">Header text inside header slot</template>
<b>Some default card text inside default slot with .card-body class</b>
</card>
# Props
name | description | required | type |
---|---|---|---|
cardClasses | Additional classes applied to .card | String | |
bodyClasses | Additional classes applied to .card-body | false | String, Array |
headerClasses | Additional classes applied to .card-header | false | String, Array |
footerClasses | Additional classes applied to .card-footer | false | String, Array |