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

PropertyTypeDefault valueDescription
tagNameStringdivHTML tag that wraps the card component
headerStringundefinedThe content of the header
footerStringundefinedThe content of the footer
noBodyBooleanfalseIf set the card will be rendered without body, header and footer
fixedClassesObjectundefinedThe default CSS Fixed classes shared for all variants
classesObjectundefinedThe default CSS classes
variantsObjectundefinedThe different variants of classes the component have
variant[String, Object]undefinedThe 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:

PropertyDescription
wrapperDiv that wraps the card
bodyBody wrapper class
headerHeader wrapper class
footerFooter 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

Slotdescription
defaultContent of the card
headerContent of the header
footerContent of the footer
closeContent of the close button

Sign up for our newsletter

Stay up-to-date on news and updates about this project by email.

I will never spam or share your email under any circustance.