Card
Displays a card with section, header, content, and footer.
Preview
Ladakh Bike ride India
The Ladakh Bike Ride is one of the most exciting and adventurous bike rides in India. The bike ride takes you through the beautiful landscapes of Ladakh.
Installation
Copy and paste the following code into your project.
"use client";
import * as React from "react";
import { cn } from "@/lib/utils";
import { tv, VariantProps } from "tailwind-variants";
const CardContext = React.createContext<{ horizontal?: boolean }>({});
const cardVariants = tv({
variants: {
horizontal: {
true: "flex flex-row w-fit",
},
},
});
const cardChildrenVariants = tv({
variants: {
shadow: {
true: "shadow-md shadow-gray-500/40 dark:shadow-none",
},
},
});
type CardProps = React.HTMLAttributes<HTMLDivElement> &
VariantProps<typeof cardVariants>;
const Card = React.forwardRef<HTMLDivElement, CardProps>(
({ className, horizontal, ...props }, ref) => (
<CardContext.Provider value={{ horizontal }}>
<div
aria-label="Card"
ref={ref}
className={cn(
"bg-white dark:bg-zinc-900 text-card-foreground shadow-md rounded-xl w-96 border-0 dark:border-[1.5px] dark:border-muted",
cardVariants({ horizontal }),
className
)}
{...props}
/>
</CardContext.Provider>
)
);
Card.displayName = "Card";
const CardSection = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const { horizontal } = React.useContext(CardContext);
return (
<div
aria-label="CardSection"
ref={ref}
className={cn(
"[&_*]:w-full [&_*]:my-0 overflow-hidden rounded-t-xl",
{
"flex-row [&_*]:w-fit [&_*]:h-full first:rounded-l-xl last:rounded-r-xl rounded-t-none":
horizontal,
},
className
)}
{...props}
/>
);
});
CardSection.displayName = "CardSection";
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
return (
<div
aria-label="CardHeader"
ref={ref}
className={cn(
"relative text-center h-fit overflow-hidden mx-4 [&_*]:w-full [&_*]:my-0 -mt-6 shadow-lg bg-clip-border rounded-xl bg-primary text-primary-foreground shadow-gray-500/40 dark:shadow-none *:",
className
)}
{...props}
/>
);
});
CardHeader.displayName = "CardHeader";
type CardContentProps = React.HTMLAttributes<HTMLDivElement> &
VariantProps<typeof cardChildrenVariants>;
const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
({ shadow, className, ...props }, ref) => {
const { horizontal } = React.useContext(CardContext);
return (
<div
ref={ref}
className={cn(
"p-6 space-y-1.5",
{ "space-y-2": horizontal },
cardChildrenVariants({ shadow }),
className
)}
{...props}
/>
);
}
);
CardContent.displayName = "CardContent";
const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
return <div ref={ref} className={cn("p-6 pt-0 space-y-2", className)} {...props} />;
});
CardFooter.displayName = "CardFooter";
export { Card, CardHeader, CardContent, CardSection, CardFooter };
Update the import paths to match your project setup.
Usage
The Card
component is a container that displays a card with a section, header and content
CardSection
CardSection is a special component that is used to remove Card padding, margin and sets width to 100% for its children while other elements still have horizontal spacing.
Ladakh Bike ride India
The Ladakh Bike Ride is one of the most exciting and adventurous bike rides in India. The bike ride takes you through the beautiful landscapes of Ladakh.
CardHeader
CardHeader is a special component that is used to display a header in the card. and has negative margin to remove the top padding of the card and push the header to the top and give cool design
Ladakh Trip Sale
Ladakh Bike ride India
The Ladakh Bike Ride is one of the most exciting and adventurous bike rides in India. The bike ride takes you through the beautiful landscapes of Ladakh.
CardContent and CardFooter
CardContent is a simple component that is used to display content in the card, it has basic padding and margin to give a good look
CardFooter is a simple component that is used to display footer in the card, it has same padding as CardContent, but doesnt have top padding ( because the card content have p-6
, it will give enough white-space
for footer), so it can be used to display footer in the card
Here is a demo of a simple card with content
Ladakh Bike ride India
The Ladakh Bike Ride is one of the most exciting and adventurous bike rides in India. The bike ride takes you through the beautiful landscapes of Ladakh.
Options
The Card
can also have be horizontal
Set the horizontal
prop to true
to make the card horizontal
Ladakh Bike ride India
The Ladakh Bike Ride is one of the most exciting and adventurous bike rides in India. The bike ride takes you through the beautiful landscapes of Ladakh.
Examples
Profile Card
This card template is perfect for showcasing individuals, including team members, employees, or event speakers, on a company website, event page, or within an app.
Alexa Banter
CEO of Flex Entertainment, a record label that has signed artists like
Pricing Card
This card template is perfect for showcasing pricing plans, including features, benefits, and pricing details, on a company website, event page, or within an app.
Starter Plan
$29/mo
Get 5 GB of storage
300 uploads per month
500 downloads per month
Feedback from users
30 days of free support
Unlimited Access
Blog Card
This card template is perfect for showcasing blog posts, including titles, authors, dates, and summaries, on a company website, event page, or within an app.
Ladakh Bike ride India
The Ladakh Bike Ride is one of the most exciting and adventurous bike rides in India. The bike ride takes you through the beautiful landscapes of Ladakh.
14 July 2024
Api Reference
Card Props
Name | Type | Description |
---|---|---|
horizontal | boolean | Determines if the card layout is horizontal. |
className | string | The CSS class name for the card component. |
children | ReactNode | The children elements to be rendered inside the card. |
ref | React.Ref<HTMLDivElement> | Ref to attach to the card element. |
CardContent Props
Name | Type | Description |
---|---|---|
shadow | boolean | Applies shadow styling to the card content. |
className | string | The CSS class name for the card content component. |
children | ReactNode | The children elements to be rendered inside the card content. |
ref | React.Ref<HTMLDivElement> | Ref to attach to the card content element. |
CardSection Props
Name | Type | Description |
---|---|---|
horizontal | boolean | Determines if the card section layout is horizontal. ( this is direclty passed down from Card so, no need to specify it here) |
className | string | The CSS class name for the card section component. |
children | ReactNode | The children elements to be rendered inside the card section. |
ref | React.Ref<HTMLDivElement> | Ref to attach to the card section element. |
CardHeader Props
Name | Type | Description |
---|---|---|
className | string | The CSS class name for the card header component. |
children | ReactNode | The children elements to be rendered inside the card header. |
ref | React.Ref<HTMLDivElement> | Ref to attach to the card header element. |
CardFooter Props
Name | Type | Description |
---|---|---|
className | string | The CSS class name for the card footer component. |
children | ReactNode | The children elements to be rendered inside the card footer. |
ref | React.Ref<HTMLDivElement> | Ref to attach to the card footer element. |