layouts

Card

Wrap your content with style

Features

Highly customizable
Multiple slots
Polymorphic

Links

Open in playground Open in Storybook View source

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius dolores, tempore quas labore officiis praesentium. Porro sed dolorem, numquam temporibus.

Anatomy

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

export default () => {
  return (
    <Card
      left={<Symbol source="message" />}
      right={<Symbol source="compass" />}
    >
      Lorem ipsum dolor sit.
    </Card>
  );
};

tsx

API Reference

PROPERTY

TYPE

DEFAULT

wrap

boolean

false

columnGap

enum

24

vAlign

string

start

hAlign

string

space-between

padding

enum

24

left

ReactNode

right

ReactNode

bordered

boolean

radius

enum

8

dimmed

enum

vibrant

boolean

highlightOnHover

boolean

as

enum

div