Card

The Card is a data display component to frame elements on the screen.

import { Card } from '@backyard-ui/core';

Use the size prop to increase the inner spacing.

Use the radius prop to increase the border-radius.

Use the shadow prop to set the box shadow element.

Use the hasBorder prop to display the border.

Render multiple cards to display content by using SimpleGrid or your preferred layout method like Grid or Stack.

Card extends Flex, so you’re able to use its properties.

• children required
  Description The children elements

  Type

  ReactNode
• asChild
  Description Change the component to the HTML tag or custom component of the only child

  Type

  boolean
• align
  Description The CSS `align-items` property

  Type

  ResponsiveValue<"center" | "baseline" | "flex-start" | "flex-end" | "stretch">
• direction
  Description The CSS `flex-direction` property

  Type

  ResponsiveValue<"row" | "row-reverse" | "column" | "column-reverse">

  Default

  row
• radius
  Description The CSS `border-radius` property

  Type

  "none" | "xs" | "sm" | "md" | "lg" | "xl"

  Default

  md
• size
  Description The CSS `padding` property

  Type

  "xs" | "sm" | "md" | "lg" | "xl"

  Default

  sm
• justify
  Description The CSS `justify-content` property

  Type

  ResponsiveValue<"center" | "baseline" | "normal" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | "space-evenly">
• shadow
  Description The CSS `box-shadow` property

  Type

  "none" | "xs" | "sm" | "md" | "lg" | "xl"

  Default

  xs
• hasBorder
  Description The CSS `border` property

  Type

  boolean

  Default

  false