Card

A Card is a View with a surface: a border, a radius, padding and a shadow.

Weekly report

Sent every Monday at nine, to the people on this project.

Save

A flat card, for one that sits inside another surface.

CardDemo.tsx

import { Heading, Paragraph, View } from '@hozo/core'
import { Button, Card } from '@hozo/ui'
import { useState } from 'react'

export function CardDemo() {
  const [saved, setSaved] = useState(false)
  return (
    <View className="gap-4">
      <Card>
        <View className="gap-3">
          <Heading level={3} className="text-lg font-bold text-hozo-text">
            Weekly report
          </Heading>
          <Paragraph className="text-sm text-hozo-text-body">
            Sent every Monday at nine, to the people on this project.
          </Paragraph>
          <View className="flex-row gap-2">
            <Button tone="accent" size="sm" onPress={() => setSaved(true)}>
              {saved ? 'Saved' : 'Save'}
            </Button>
          </View>
        </View>
      </Card>
      <Card flat>
        <Paragraph className="text-sm text-hozo-text-body">
          A flat card, for one that sits inside another surface.
        </Paragraph>
      </Card>
    </View>
  )
}

• flat drops the shadow. Use it for a card inside another surface, where a shadow reads as dirt.
• className is added after the card’s own classes.

A Card is not a landmark and has no role. If it is a region a reader should be able to jump to, put a Section with an accessibilityLabel inside it.