Skip to content
On this page


A beautiful card to use on your application to display resource, forms or anything on your imagination 😄

Preview & Playground 🖼️

Here you may find a preview of the component, with error & possible variants.

🏄 Click to expand the code
<script setup lang="ts">
import { Button, Card, DropdownMenu, DropdownOption } from '@flavorly/vanilla-components'

    <!-- Regular -->
    <div class="h-[220px]">
        title="Payment Methods"
        subtitle="Here you can have your favorite payments methods"
        <template #actions>
          <DropdownMenu text="Options">
              <span>Copy Stuff</span>
              <span>Mark as Done</span>

        <div class="p-5 text-sm">
          <span>Some content on the card</span>

        <template #footerActions>
          <Button label="Resets" />

Props 📥

Props available for this component extending the default variant & global props.

PropDescriptionAccepted ValuesDefault
asTag to render the buttonString'button'
titleTitle for the card[String, undefined]undefined
subtitleSubtitle for the card[String, undefined]undefined
bodyDividedDivide the items insides card bodyBooleanfalse

Slots 🧬

Current slots available for this component are the following:

Slot title

Slot for the title of the card

Slot subtitle

Slot for the subtitle of the card

Slot actions

Slot for the action's panel on the top-right side of the card

Slot default

Default slot for the card body

Slot for the footer of the card

Slot footerActions

Alternative Slot for the footer of the card, supporting buttons styled grid by default aligned to right

Released under the MIT License.