The Coline design system: accessible React components for Coline Apps, themed live by the host workspace, and for Coline Sites in light and dark. Tailwind v4 stylesheet included. MIT.
| 6 | className, |
| 7 | size = "default", |
| 8 | ...props |
| 9 | }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) { |
| 10 | return ( |
| 11 | <div |
| 12 | data-slot="card" |
| 13 | data-size={size} |
| 14 | className={cn( |
| 15 | "group/card flex flex-col gap-6 overflow-hidden rounded-2xl bg-card py-6 text-sm text-card-foreground ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", |
| 16 | className |
| 17 | )} |
| 18 | {...props} |
| 19 | /> |
| 20 | ) |
| 21 | } |
| 22 |
| 23 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) { |
| 24 | return ( |
| 25 | <div |
| 26 | data-slot="card-header" |
| 27 | className={cn( |
| 28 | "group/card-header @container/card-header grid auto-rows-min items-start gap-2 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4", |
| 29 | className |
| 30 | )} |
| 31 | {...props} |
| 32 | /> |
| 33 | ) |
| 34 | } |
| 35 |
| 36 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) { |
| 37 | return ( |
| 38 | <div |
| 39 | data-slot="card-title" |
| 40 | className={cn("text-base font-medium", className)} |
| 41 | {...props} |
| 42 | /> |
| 43 | ) |
| 44 | } |
| 45 |
| 46 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) { |
| 47 | return ( |
| 48 | <div |
| 49 | data-slot="card-description" |
| 50 | className={cn("text-sm text-muted-foreground", className)} |
| 51 | {...props} |
| 52 | /> |
| 53 | ) |
| 54 | } |
| 55 |
| 56 | function CardAction({ className, ...props }: React.ComponentProps<"div">) { |
| 57 | return ( |
| 58 | <div |
| 59 | data-slot="card-action" |
| 60 | className={cn( |
| 61 | "col-start-2 row-span-2 row-start-1 self-start justify-self-end", |
| 62 | className |
| 63 | )} |
| 64 | {...props} |
| 65 | /> |
| 66 | ) |
| 67 | } |
| 68 |
| 69 | function CardContent({ className, ...props }: React.ComponentProps<"div">) { |
| 70 | return ( |
| 71 | <div |
| 72 | data-slot="card-content" |
| 73 | className={cn("px-6 group-data-[size=sm]/card:px-4", className)} |
| 74 | {...props} |
| 75 | /> |
| 76 | ) |
| 77 | } |
| 78 |
| 79 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) { |
| 80 | return ( |
| 81 | <div |
| 82 | data-slot="card-footer" |
| 83 | className={cn( |
| 84 | "flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4", |
| 85 | className |
| 86 | )} |
| 87 | {...props} |
| 88 | /> |
| 89 | ) |
| 90 | } |
| 91 |
| 92 | export { |
| 93 | Card, |
| 94 | CardHeader, |
| 95 | CardFooter, |
| 96 | CardTitle, |
| 97 | CardAction, |
| 98 | CardDescription, |
| 99 | CardContent, |
| 100 | } |
| 101 |
