Skip to main content
‌
‌

Card

Wrap your content with style

Quick nav

Features

  • Highly customizable
  • Multiple slots
  • Polymorphic

Links

View source Report an issue

Anatomy

import { Card } from "@wonderflow/react-components";


export default () => {
  return <Card>Lorem ipsum dolor sit.</Card>;
};

tsx

API Reference

wrap
Type:

StackProps['wrap']

Default:

false

Wrap the children if there isn't enought space

columnGap
Type:

StackProps['columnGap']

Default:

24

Set the space between columns

verticalAlign
Type:

StackProps['verticalAlign']

Default:

start

Set the vertical alignment for children. Any align-items or justify-content value is accepted

horizontalAlign
Type:

StackProps['horizontalAlign']

Default:

space-between

Set the horizontal alignment for children. Any align-items or justify-content value is accepted

padding
Type:

false, TokensTypes['space']

Default:

24

Set the padding or remove it

left
Type:

ReactNode

Place content on the left side of children.

right
Type:

ReactNode

Place content on the right side of children.

radius
Type:

false, TokensTypes['radius']

Default:

8

Set the ednge radius

dimmed
Type:

1, 2, 3

Set the dimmed background

bordered
Type:

boolean

Set a small border on the card

vibrant
Type:

boolean

Set the vibrant style for the card

highlightOnHover
Type:

boolean

Highlight the card on hover and focus. Applied only if vibrant

as
Type:

keyof JSX.IntrinsicElements | React.ComponentType<any>

Default:

"div"

Set the component to a different HTML tag or custom component.