Element: #994 A hero that is a floor (concepts/viewport) What it shows: 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. When to 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. Spec: - `` swaps the title to the h2 token and the lead to a longer string - `` 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`; `` is the primary action - The second section is `

How it works

` with one paragraph, separated by a `border-block-start` Tags: viewport, hero, min-height, false-floor, scroll-cue, reflow, concept Needs: @codeatlasdev/ui@4.6.0 Components: Button, Switch Live demo: https://ui.codeatlas.com.br/docs/concepts/viewport#a-hero-that-is-a-floor

Inventory and point of sale

One system for the counter, the stock room and the kitchen

{large ? 'Sell at the counter, count stock in the back and send orders to the kitchen from the same screen, with the same people and the same numbers, even when the connection drops for a while.' : 'Sell, count stock and send orders from one screen.'}

How it works

Three modules, one data model. Content below the first screen is reachable by scrolling and by the link above.