Card

The Card component is a generic container for organizing product-like UI elements.

This is Card header!

This is Card content!

This is Card footer!

---

Usage

import { Card } from "@newfold/ui-component-library";

<div className="nfd-flex">
    <Card className="nfd-w-[300px]">
        <Card.Header>
            This is Card header!
        </Card.Header>
        <Card.Content>
            This is Card content!
        </Card.Content>
        <Card.Footer>
            This is Card footer!
        </Card.Footer>
    </Card>
</div>

---

Sub-Components

The Card component has three sub-components: Card.Header, Card.Content, and Card.Footer.

The Card component is very flexible and can be used in a variety of ways. The example below shows how to use the card component without a header by simply not including the Card.Header sub-component.

This is Card content!

This is Card footer!

<div className="nfd-flex">
    <Card className="nfd-w-[300px]">
        <Card.Content>
            This is Card content!
        </Card.Content>
        <Card.Footer>
            This is Card footer!
        </Card.Footer>
    </Card>
</div>

You can do the same with the Card.Content and Card.Footer.

---

Columns

The Card component can be used to create columns of cards.

Arabian Desert

Experience the serene beauty of an Arabian Desert night. Bedouin-style camping, traditional cuisine, and endless dunes await.

Middle East

Bali

Explore lush landscapes, serene beaches, and vibrant culture in Bali, Indonesia.

Southeast Asia

Sydney

Experience the cosmopolitan vibes, iconic landmarks, and stunning beaches of Sydney, Australia.

Oceania

import { Button, Card, Title } from "@newfold/ui-component-library";

<section className="nfd-grid nfd-gap-8 min-[1200px]:nfd-grid-cols-2
    min-[1440px]:nfd-grid-cols-3">
    <Card>
        <Card.Header className="nfd-p-0 nfd-h-auto">
            <img
                src="https://picsum.photos/id/184/600/350"
                className="nfd-w-full"
                alt="Arabian Desert"
                loading="lazy"
            />
        </Card.Header>
        <Card.Content>
            <Title as="h3">Arabian Desert</Title>
            <p className="nfd-mt-2">
                Experience the serene beauty of an Arabian Desert night. Bedouin-style
                camping, traditional cuisine, and endless dunes await.
            </p>
        </Card.Content>
        <Card.Footer className="nfd-flex nfd-items-center nfd-justify-between">
            <Button>Book Now</Button>
            <span>Middle East</span>
        </Card.Footer>
    </Card>

    <Card>
        <Card.Header className="nfd-p-0 nfd-h-auto">
            <img
                src="https://picsum.photos/id/218/600/350"
                className="nfd-w-full"
                alt="Bali"
                loading="lazy"
            />
        </Card.Header>
        <Card.Content>
            <Title as="h3">Bali</Title>
            <p className="nfd-mt-2">
                Explore lush landscapes, serene beaches, and vibrant culture in Bali,
                Indonesia.
            </p>
        </Card.Content>
        <Card.Footer className="nfd-flex nfd-items-center nfd-justify-between">
            <Button>Book Now</Button>
            <span>Southeast Asia</span>
        </Card.Footer>
    </Card>

    <Card>
        <Card.Header className="nfd-p-0 nfd-h-auto">
            <img
                src="https://picsum.photos/id/249/600/350"
                className="nfd-w-full"
                alt="Sydney"
                loading="lazy"
            />
        </Card.Header>
        <Card.Content>
            <Title as="h3">Sydney</Title>
            <p className="nfd-mt-2">
                Experience the cosmopolitan vibes, iconic landmarks, and stunning
                beaches of Sydney, Australia.
            </p>
        </Card.Content>
        <Card.Footer className="nfd-flex nfd-items-center nfd-justify-between">
            <Button>Book Now</Button>
            <span>Oceania</span>
        </Card.Footer>
    </Card>
</section>

---

Props

Attribute	Type	Description	Default
children*	node |	The content of the card.	-
className	string |	-	-