Display UI

Card

A visually distinct container for grouping related content, such as images, text, and actions, in a structured layout.

Loading...

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/Card

Usage

import { Card } from "@/components/display-ui/Card"
<Card.Main className="bg-white w-[80%]" shadow="md">
  <Card.Area className="">
    <Card.Image
      className="scale-100"
      radius="none"
      fit="cover"
      src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    ></Card.Image>
  </Card.Area>
  <Card.Area className="p-4">
    <div className="space-y-4">
      <h2 className="text-xl font-bold">Card Section</h2>
      <p className="text-md">
        A card component is a reusable UI element used to group related
        content{" "}
      </p>
 
      <div className="flex justify-center">
        <ButtonRing size="sm" variant="success" className="my-2">
          Hire Me
        </ButtonRing>
      </div>
    </div>
  </Card.Area>
</Card.Main>

API

Card Props

For Card Main

AttributeTypeDescriptionDefault
childrenReactNode | ReactNode[]Primary container content of the card. Wraps Card.Area and Card.Image components.-
shadow"sm" | "md" | "lg" | "xl"Controls the shadow depth of the card container."md"
radius"none" | "sm" | "md" | "lg" | "xl"Controls the border radius of the card container."xl"
classNamestringAdditional CSS classes to customize the card container styling.-

For Card Area

AttributeTypeDescriptionDefault
childrenReactNode | ReactNode[]Content section inside the card, typically used for text or actions.-
classNamestringAdditional CSS classes to customize the card content area.-

For Card Image

AttributeTypeDescriptionDefault
srcstringSource URL of the image displayed inside the card.-
altstringAlternative text describing the image for accessibility.-
radius"none" | "sm" | "md" | "lg" | "xl"Controls the border radius applied to the card image."xl"
fit"cover" | "contain" | "fill" | "none" | "scale"Controls how the image fits within its container."cover"
classNamestringAdditional CSS classes to customize the card image styling.-

Credits

This component is inspired by Rehman Kalawant Design Shared On Github.

Previous

Calendar

Next

Carousel

On this page