UICard

UICard

A versatile container component with header, content, and footer sections.

<template>
  <UICard :borderType="borderType">
    <template #header>
      <div class="flex items-center">
        <IconComponent class="w-8 h-8 text-primary-600" />
        <div>
          <UITextLgMedium>Card Title</UITextLgMedium>
          <UITextSmNormal>Card description</UITextSmNormal>
        </div>
      </div>
    </template>

    <div>Card content</div>

    <template #footer>
      <div class="flex justify-end">
        <UIButton>Action</UIButton>
      </div>
    </template>
  </UICard>
</template>

Props

• borderType (‘info’ | ‘success’ | ‘warning’ | ‘error’ | false): Card border style

Slots

• header: Card header content
• default: Card main content
• footer: Card footer content