Card
Integrate information in a card container.
Default
lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, sed efficitur nisl. Donec a nunc ac nisi efficitur convallis. Donec a nunc ac nisi efficitur convallis.
<template>
<PCard>
lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, sed efficitur nisl. Donec a nunc ac nisi efficitur convallis. Donec a nunc ac nisi efficitur convallis.
</PCard>
</template>
Shape
lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, sed efficitur nisl. Donec a nunc ac nisi efficitur convallis. Donec a nunc ac nisi efficitur convallis.
lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, sed efficitur nisl. Donec a nunc ac nisi efficitur convallis. Donec a nunc ac nisi efficitur convallis.
lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, sed efficitur nisl. Donec a nunc ac nisi efficitur convallis. Donec a nunc ac nisi efficitur convallis.
<template>
<PStack>
<PCard shape="default">
lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, sed efficitur nisl. Donec a nunc ac nisi efficitur convallis. Donec a nunc ac nisi efficitur convallis.
</PCard>
<PCard shape="square">
lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, sed efficitur nisl. Donec a nunc ac nisi efficitur convallis. Donec a nunc ac nisi efficitur convallis.
</PCard>
<PCard shape="rounded">
lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, sed efficitur nisl. Donec a nunc ac nisi efficitur convallis. Donec a nunc ac nisi efficitur convallis.
</PCard>
</PStack>
</template>
No Border
lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, sed efficitur nisl. Donec a nunc ac nisi efficitur convallis. Donec a nunc ac nisi efficitur convallis.
<template>
<PCard :border="false">
lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, sed efficitur nisl. Donec a nunc ac nisi efficitur convallis. Donec a nunc ac nisi efficitur convallis.
</PCard>
</template>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| shape | 'square' | 'default' | 'default' | Corner rounding of the card |
| border | boolean | true | Draw the outline; false keeps the background only |
Slots
| Name | Description |
|---|---|
| default | Card content |
| header | Card header |
| footer | Card footer |