Leaf UI
  • English

      • Card

      Group related content and actions in a container.

      Basic usage

      Live previewBasic usage

      Leaf Garden

      In progress

      Organize projects, members and upcoming plans here.

      Loading

      Compact card

      For pages with dense content.
      basic.tsx
      import { Button, Card, Tag } from '@sudden3/leaf-ui';

export function CardBasic() {
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Card
        title="Leaf Garden"
        extra={<Tag color="success">In progress</Tag>}
        hoverable
        footer={<Button variant="outline">View details</Button>}
      >
        <p>Organize projects, members and upcoming plans here.</p>
      </Card>
      <Card title="Loading" loading />
      <Card title="Compact card" size="sm" bordered={false}>
        For pages with dense content.
      </Card>
    </div>
  );
}

      Card API

      PropertyTypeDefaultDescription
      title / extraReactNode—Title / header actions
      cover / footerReactNode—Cover / footer
      childrenReactNode—Body content
      loadingbooleanfalseReplace the body with a skeleton
      bordered / hoverablebooleantrue / falseBorder / hover emphasis
      size'sm' | 'md''md'Content spacing

      Types

      Import the exported types when defining props or building item lists.

      import type { CardProps } from '@sudden3/leaf-ui';

      Usage notes

      Place buttons or links in extra and footer. hoverable adds visual feedback; use an explicit button or link for actions.