BreezeUI
  • English

    • Card

    Displays a card with header, content, and footer.

    Component Features

    • 🎨 Multiple Variants: Supports default, outline, filled visual variants.
    • 📏 Multiple Sizes: Supports sm, md, lg size specs.
    • 🔲 Multiple Shapes: Supports rounded, square, circle shapes.
    • 📦 Shadow Styles: Supports none, sm, base, md, lg, xl shadow styles.
    • ✋ Interactive: Supports hover, active, and selected states.
    • 🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

    Basic Usage

    <script setup lang="ts">
import { 
  BrCard, 
  BrCardHeader, 
  BrCardTitle, 
  BrCardDescription, 
  BrCardContent, 
  BrCardFooter, 
  BrButton,
  BrInput,
  BrLabel
} from '@breeze-ui/vue'
</script>

<template>
  <BrCard class="w-[350px]">
    <BrCardHeader>
      <BrCardTitle>Create project</BrCardTitle>
      <BrCardDescription>Deploy your new project in one-click.</BrCardDescription>
    </BrCardHeader>
    <BrCardContent>
      <form>
        <div class="grid w-full items-center gap-4">
          <div class="flex flex-col space-y-1.5">
            <BrLabel html-for="name">Name</BrLabel>
            <BrInput id="name" placeholder="Name of your project" />
          </div>
        </div>
      </form>
    </BrCardContent>
    <BrCardFooter class="flex justify-between">
      <BrButton variant="outline">Cancel</BrButton>
      <BrButton>Deploy</BrButton>
    </BrCardFooter>
  </BrCard>
</template>

    Variants

    The variant prop controls the style of the card.

    <script setup lang="ts">
import { BrCard, BrCardContent, BrCardHeader, BrCardTitle } from '@breeze-ui/vue'
</script>

<template>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <BrCard>
      <BrCardHeader>
        <BrCardTitle>Default</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>
        Standard card with border and shadow.
      </BrCardContent>
    </BrCard>

    <BrCard variant="outline">
      <BrCardHeader>
        <BrCardTitle>Outline</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>
        Card with a thicker border and no shadow.
      </BrCardContent>
    </BrCard>

    <BrCard variant="ghost">
      <BrCardHeader>
        <BrCardTitle>Ghost</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>
        Card with no border and no shadow.
      </BrCardContent>
    </BrCard>

    <BrCard variant="secondary">
      <BrCardHeader>
        <BrCardTitle>Secondary</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>
        Card with secondary background color.
      </BrCardContent>
    </BrCard>
  </div>
</template>

    Sizes

    The size prop controls the padding and text size of the card.

    <script setup lang="ts">
import { BrCard, BrCardContent, BrCardHeader, BrCardTitle } from '@breeze-ui/vue'
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrCard size="xs" class="w-full max-w-sm">
      <BrCardHeader>
        <BrCardTitle>Size: XS</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>Extra small padding and text size.</BrCardContent>
    </BrCard>

    <BrCard size="sm" class="w-full max-w-sm">
      <BrCardHeader>
        <BrCardTitle>Size: SM</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>Small padding and text size.</BrCardContent>
    </BrCard>

    <BrCard size="md" class="w-full max-w-sm">
      <BrCardHeader>
        <BrCardTitle>Size: MD (Default)</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>Medium padding and text size.</BrCardContent>
    </BrCard>

    <BrCard size="lg" class="w-full max-w-sm">
      <BrCardHeader>
        <BrCardTitle>Size: LG</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>Large padding and text size.</BrCardContent>
    </BrCard>

    <BrCard size="xl" class="w-full max-w-sm">
      <BrCardHeader>
        <BrCardTitle>Size: XL</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>Extra large padding and text size.</BrCardContent>
    </BrCard>

    <BrCard size="2xl" class="w-full max-w-sm">
      <BrCardHeader>
        <BrCardTitle>Size: 2XL</BrCardTitle>
      </BrCardHeader>
      <BrCardContent>2X large padding and text size.</BrCardContent>
    </BrCard>
  </div>
</template>

    Interactive

    The card can be hoverable, clickable, or in a loading state.

    <script setup lang="ts">
import { BrCard, BrCardContent } from '@breeze-ui/vue'
</script>

<template>
  <div class="flex gap-4 flex-wrap">
    <BrCard hoverable class="w-[200px] cursor-pointer">
      <BrCardContent class="flex items-center justify-center h-[100px]">
        Hoverable Card
      </BrCardContent>
    </BrCard>

    <BrCard clickable class="w-[200px]">
      <BrCardContent class="flex items-center justify-center h-[100px]">
        Clickable Card
      </BrCardContent>
    </BrCard>

    <BrCard loading class="w-[200px]">
      <BrCardContent class="flex items-center justify-center h-[100px]">
        Loading Card
      </BrCardContent>
    </BrCard>
  </div>
</template>

    API

    BrCard

    Props

    NameTypeDefaultDescription
    asstring'div'The element or component the card should render as.
    sizestring'default'Size variants: xs, sm, md, lg, xl, 2xl.
    shapestring'rounded'Shape variants: rounded, square, circle.
    shadowstring'sm'Shadow variants: none, sm, md, lg.
    variantstring'default'Style variants: default, outline, ghost, secondary.
    hoverablebooleanfalseWhether the card should have a hover effect.
    clickablebooleanfalseWhether the card should be clickable.
    loadingbooleanfalseWhether the card is in a loading state.
    disabledbooleanfalseWhether the card is disabled.

    BrCardHeader

    Props

    NameTypeDefaultDescription
    asstring'div'The element or component the header should render as.

    BrCardTitle

    Props

    NameTypeDefaultDescription
    asstring'h3'The element or component the title should render as.

    BrCardDescription

    Props

    NameTypeDefaultDescription
    asstring'p'The element or component the description should render as.

    BrCardContent

    Props

    NameTypeDefaultDescription
    asstring'div'The element or component the content should render as.

    BrCardFooter

    Props

    NameTypeDefaultDescription
    asstring'div'The element or component the footer should render as.