Card

• Sizable with a size prop that passes to Card children.
• Themeable helper props like elevate.
• Background component that handles positioning.

Installation

Card is already installed in @hanzo/gui, or you can install it independently:

npm install @hanzogui/card

Anatomy

import { Card } from '@hanzo/gui' // or '@hanzogui/card'

export default () => (
  <Card>
    <Card.Header />
    <Card.Footer />
    {/* any other components */}
    <Card.Background />
  </Card>
)

API Reference

Card

Frame of the card, extends ThemeableStack props, adding:

Card.Header

Extends ThemeableStack, adding:

Card.Footer

Extends ThemeableStack, adding:

Card.Background

Extends YStack, set to fullscreen and zIndex below Header/Footer.