<!-- https://getkonjo.com/design/components/hero · source: docs/design/components/hero.md -->

# Hero

The full-bleed loud block: eyebrow, statement, meta, and one red action, on the surface that
contrasts most with the page.

```kata-specimen
hero-default
```

> Source: [`Hero.tsx`](../../../src/components/ui/Hero.tsx). Where a screen gets one, and where
> it must not: [tab-home](../patterns/tab-home.md).

## When to use it

- On a tab home where there is usually one obviously-next thing for this person: tonight's
  class on Train, the class you are teaching on Teach.
- Once per screen. It is the screen's loud block, so the screen spends nothing else on volume.

Not on a screen people came to browse — Social, Learn — where it would be a wall in front of
the index. Not with a photograph: the block carries type, so it works for a dojo that has never
uploaded an image.

## Anatomy

| Part | Token |
|---|---|
| Block | `surface.hero`, full bleed (cancels `spacing.page` and repaints it as padding), radius 0 |
| Padding | `spacing.page` 20 horizontal, `spacing.section` 24 vertical |
| Eyebrow | `typography.eyebrow` 11/800 caps, `accent.onHero`, `spacing.s8` below |
| Statement | `typography.statement` 46/900 caps, Archivo ExtraCondensed, `text.onHero` |
| Meta | `typography.body` 15/400, `text.onHeroMuted`, `spacing.s12` above |
| CTA | `brand.red` pill, 48 floor, `typography.rowTitle` in caps, `brand.onRed`, arrow glyph, `spacing.s20` above |

`surface.hero` inverts by theme — near-black in light, near-white in dark — so the text tokens
on it invert too. Never paint the block `brand.ink`: in dark it vanishes into the page.

## States

```kata-specimen
hero-states
```

- **Long statement**: reflows to three lines of `statement`, then steps down to
  `typography.display` 34/800 by measuring itself. It never truncates.
- **CTA pressed**: `opacity.pressed` 0.85.
- **CTA focus**: the ring flips to `border.focusOnHero`, because a ring drawn inside the ink
  block in `border.focus` fails — `border.focus` on `surface.hero` is 1.14:1.
  `border.focusOnHero` on `surface.hero` is 16.86:1.
- **No CTA**: legal. The block is then pure information.
- **Disabled, loading, error**: none of its own. While the next class is loading, render nothing
  in its place rather than an empty ink block.

## Content

- The eyebrow is a time or a category, three words at most: "Today · 6:30 pm".
- The statement is the thing's name — a class, an event — not a sentence. Pass it in sentence
  case; the component uppercases it.
- Meta is one quiet line: who, where, when.
- The CTA is a verb: "Check in", "Start class".

## Accessibility

- The block is not pressable. Only the CTA navigates — a pressable block behind a CTA would put
  the same destination in one viewport twice.
- The CTA is role `button` and needs a `testID`; pass `accessibilityLabel` when the label alone
  is a fragment ("Check in to Adult karate").
- Red text on the block is `accent.onHero`, never `accent.red` or `brand.red`: `brand.red` on
  `surface.hero` is 3.77:1 and fails for text.

## Do and don't

```kata-specimen
hero-one-action
```

## Code

```tsx
import { Hero } from '../../components/ui';

<Hero
  eyebrow="Today · 6:30 pm"
  statement="Adult karate"
  meta="Sensei Marcus · Main mat · in 4 hours"
  cta={{ label: 'Check in', onPress: checkIn, testID: 'train-hero-check-in' }}
  testID="train-hero"
/>
```

It only reaches the screen edges inside a container padded by exactly `spacing.page`.