Card

Usage

import { Card } from '@zalify-ui/react'

<Card.Root>
  <Card.Header>
    <Card.Title />
    <Card.Description />
  <Card.Body />
  <Card.Footer />
</Card.Root>

Examples

Variants

Use the variant prop to change the visual style of the Card.

With Image

Use the Card component to display an image.

Living room Sofa

This sofa is perfect for modern tropical spaces, baroque inspired spaces.

Add to cartBuy now

React

Toggle code

Horizontal

Use the Card component to display content horizontally.

The perfect latte

Caffè latte is a coffee beverage of Italian origin made with espresso and steamed milk.

Hot

Caffeine

Buy Latte

React

Toggle code

Within Form

Use the Card component within a form to group related fields together.

With Avatar

Use the Card component to display an avatar.

NF

Nate Foss

@natefoss

Nate Foss has requested to join your team. You can approve or decline their request.

DeclineApprove

React

Toggle code

Props