Card
A container separated into image, header, body and footer sections.
The Card component can be used to present content in a visually cohesive and structured way. Each section of the container can be tailored to suit the unique requirements of the content it contains.
import { Card } from '@rewind-ui/core';function App() {return (<Card><Card.Header>Header</Card.Header><Card.Body>...</Card.Body><Card.Footer>Footer</Card.Footer></Card>);}
Import
Import the Card
component using the following import statement.
import { Card } from '@rewind-ui/core';
Colors
The Card
component comes with four colors: white
, gray
, zinc
and slate
.
<View>
<Card color="white">
// ...
</Card>
<Card color="gray">
// ...
</Card>
<Card color="zinc">
// ...
</Card>
<Card color="slate">
// ...
</Card>
</View>
Sizes
Available size
values are: sm
, base
, md
and lg
.
<View>
<Card size="sm">
// ...
</Card>
<Card size="base">
// ...
</Card>
<Card size="md">
// ...
</Card>
<Card size="lg">
// ...
</Card>
</View>
Radiuses
Available radius
values are: none
, sm
, base
, md
and lg
.
<View>
<Card radius="none">
// ...
</Card>
<Card radius="sm">
// ...
</Card>
<Card radius="base">
// ...
</Card>
<Card radius="md">
// ...
</Card>
<Card radius="lg">
// ...
</Card>
</View>
Shadows
Available shadow
values are: none
, sm
, base
, md
, lg
and xl
.
<View>
<Card shadow="none">
// ...
</Card>
<Card shadow="sm">
// ...
</Card>
<Card shadow="base">
// ...
</Card>
<Card shadow="md">
// ...
</Card>
<Card shadow="lg">
// ...
</Card>
<Card shadow="xl">
// ...
</Card>
</View>
Borders
Borders can be added to the Card
component by using the bordered
prop.
<View>
<Card bordered={true}>
// ...
</Card>
<Card bordered={false}>
// ...
</Card>
</View>
Dividers
Dividers can be added to the Card
component by using the withDivider
prop.
<View>
<Card withDivider={true}>
// ...
</Card>
<Card withDivider={false}>
// ...
</Card>
</View>
Image
An image can be displayed in the Card
component by using the Card.Image
component.
<View>
<Card>
<Card.Image
alt="A beautiful image"
caption="This is a beautiful image"
mode="dark"
src="..." />
// ...
</Card>
</View>
Actions
An action button can be added to the Card.Header
component by using the actions
property.
<View>
<Card className="min-w-[350px]">
<Card.Header actions={<Button size="xs" color="gray">Action</Button>}>Header</Card.Header>
// ...
</Card>
</View>
Examples
Basic
This is a basic example of a Card
component.
<View>
<Card className="max-w-[350px]">
<Card.Header className="font-medium">
Terms of service
</Card.Header>
<Card.Body className="text-gray-600">
Welcome to our website. By accessing or using our services, you agree to be bound by the following terms and conditions. If you do not agree to these terms, please do not use our services.
</Card.Body>
<Card.Footer className="flex justify-end space-x-2">
<Button variant="tertiary">Leave</Button>
<Button variant="primary">Accept</Button>
</Card.Footer>
</Card>
</View>
Cards with images
This is an example of a Card
component showcasing how to use the Card.Image
component on a travel agency website.
<View>
<Card className="max-w-[450px] relative">
<Ribbon size="lg" shadow="base" color="purple" shadowColor="purple" className="z-20">City tour</Ribbon>
<Card.Image caption="USA" mode="dark" src="https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=450&h=250&q=80" />
<Card.Body>
<div className="flex flex-col space-y-2">
<div className="flex justify-between items-center">
<span className="text-xl text-gray-800 font-semibold">New York</span>
<Badge size="sm" color="green" tone="outline">$1,500.00</Badge>
</div>
<span className="text-gray-600">Discover the magic of the city that never sleeps, as our experienced guides lead you through the vibrant streets of New York, showcasing its iconic landmarks, hidden gems and rich history.</span>
</div>
</Card.Body>
<Card.Footer>
<Button className="w-full" color="black">Book now!</Button>
</Card.Footer>
</Card>
<Card className="max-w-[450px] relative">
<Ribbon size="lg" shadow="base" color="green" shadowColor="green" className="z-20">Boat tour</Ribbon>
<CardImage caption="Greece" mode="dark" src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=450&h=250&q=80" />
<CardBody>
<div className="flex flex-col space-y-2">
<div className="flex justify-between items-center">
<span className="text-xl text-gray-800 font-semibold">Milos island</span>
<Badge size="sm" color="green" tone="outline">$2,500.00</Badge>
</div>
<span className="text-gray-600">Discover the stunning beauty of Milos Island on our unforgettable boat tour. Let our experienced captain take you on a journey to explore the crystal-clear waters of this idyllic Greek island.</span>
</div>
</CardBody>
<CardFooter>
<Button className="w-full" color="black">Book now!</Button>
</CardFooter>
</Card>
</View>
API Reference
Properties
Card
Prop | Type | Description | Default |
---|---|---|---|
bordered | boolean | Adds borders | true |
color | CardColor | Sets the card color | white |
radius | CardRadius | Sets the border radius | base |
shadow | CardShadow | Sets the shadow size | sm |
size | CardSize | Sets the card size | base |
withDivider | boolean | Adds horizontal dividers | true |
Card.Header
Prop | Type | Description | Default |
---|---|---|---|
actions | ReactNode | Right-side actions content | undefined |
Card.Image
Prop | Type | Description | Default |
---|---|---|---|
src | string | Image url | undefined |
alt | string | Alternative text description | undefined |
caption | string | Visible image contents description | undefined |
mode | dark or light | Caption background color | light |
Types
type CardColor = 'white' | 'gray' | 'slate' | 'zinc';
type CardRadius = 'none' | 'sm' | 'base' | 'md' | 'lg';
type CardShadow = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl';
type CardSize = 'sm' | 'base' | 'md' | 'lg';