Card (TCard)
VueJs Card component with configurable classes and infinite variants. Friendly with utility-first frameworks like TailwindCSS.
Playground:
Basic example
<t-card
header="Title of the card"
>
Content of the card.
<template v-slot:footer>
<div class="flex justify-between">
<t-button type="button">
Cancel
</t-button>
<t-button type="button">
Ok
</t-button>
</div>
</template>
</t-card>
Title of the card
Content of the card.
Props
| Property | Type | Default value | Description |
|---|---|---|---|
| tagName | String | div | HTML tag that wraps the card component |
| header | String | undefined | The content of the header |
| footer | String | undefined | The content of the footer |
| noBody | Boolean | false | If set the card will be rendered without body, header and footer |
| fixedClasses | Object | undefined | The default CSS Fixed classes shared for all variants |
| classes | Object | undefined | The default CSS classes |
| variants | Object | undefined | The different variants of classes the component have |
| variant | [String, Object] | undefined | The variant that should be used |
Classes and variants format
This component expects an object with classes named after every child element.
The properties in that object are the following:
| Property | Description |
|---|---|
| wrapper | Div that wraps the card |
| body | Body wrapper class |
| header | Header wrapper class |
| footer | Footer wrapper class |
Default classes
{
wrapper: 'border rounded shadow-sm bg-white border-gray-100',
body: 'p-3',
header: 'border-b border-gray-100 p-3 rounded-t',
footer: 'border-gray-100 border-t p-3 rounded-b',
}
Slots
| Slot | description |
|---|---|
| default | Content of the card |
| header | Content of the header |
| footer | Content of the footer |
| close | Content of the close button |