#994
A hero that is a floor
A phone-sized scrollable frame holding a hero (eyebrow, heading, lead, filled Button) and a second section, with a switch for 200% text and a long translation and a switch for a continuation cue.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "A hero that is a floor" pattern (@codeatlasdev/ui demo #994, concepts/viewport) in my app.
Call get_demo({ ids: ["#994"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Showing that a hero is a floor (min-height) so larger text grows it instead of clipping, and that without a visible cue the next section can read as the end of the page.
Keep these library parts, with the props and tokens the demo uses:
- Button, Switch from "@codeatlasdev/ui"
Behaviour to keep:
- `<Switch bind:checked={large} label="Text at 200% and a long translation" />` swaps the title to the h2 token and the lead to a longer string
- `<Switch bind:checked={cue} label="Continuation cue (peek at the next section)" />` toggles a `.is-peek` class on the second section
- The frame is `inline-size: min(100%, 22rem)`, `block-size: 26rem`, `overflow-y: auto`, `tabindex="0"`, `role="region"` with an `aria-label`
- `.hero` uses `min-block-size`, never `height`; `<Button variant="filled">See how it works</Button>` is the primary action
- The second section is `<h4>How it works</h4>` with one paragraph, separated by a `border-block-start`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `<Switch bind:checked={large} label="Text at 200% and a long translation" />` swaps the title to the h2 token and the lead to a longer string
- `<Switch bind:checked={cue} label="Continuation cue (peek at the next section)" />` toggles a `.is-peek` class on the second section
- The frame is `inline-size: min(100%, 22rem)`, `block-size: 26rem`, `overflow-y: auto`, `tabindex="0"`, `role="region"` with an `aria-label`
- `.hero` uses `min-block-size`, never `height`; `<Button variant="filled">See how it works</Button>` is the primary action
- The second section is `<h4>How it works</h4>` with one paragraph, separated by a `border-block-start`
Related
Loading source.