Hero

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

Source: Hero.tsx. Where a screen gets one, and where it must not: tab-home.

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

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

• 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

Code

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.