Brand hero
The ground of a Skribly home hero: the brand pattern, the sky that follows the theme, and the moving agents with their Pause motion button. Every part is a kit component for Astro, every word a property.
The brand heroLink to the section The brand hero
ProductHero variant="brand" takes HeroBackdrop in its backdrop slot and HeroAgents as its media: a page of code scrolls behind the Agents panel, and each agent moves from working to waiting to done.
From a task in the tracker to a commit you reviewed
Agents work side by side, each in its own worktree. You decide what ships.
---
import HeroAgents from '@skribly/ui/astro/HeroAgents.astro'
import HeroBackdrop from '@skribly/ui/astro/HeroBackdrop.astro'
import ProductHero from '@skribly/ui/astro/ProductHero.astro'
---
<ProductHero product="skribly" variant="brand" title="…" summary="…">
<a slot="actions" class="sk-button sk-button--lg" href="/apps/">…</a>
<HeroBackdrop slot="backdrop" code={false} />
<HeroAgents
slot="media"
panel={{ title: 'Agents', agents: ['Claude Code', 'Codex', 'Gemini CLI'], states: ['working', 'waiting', 'done'] }}
motion={{ pause: 'Pause motion', play: 'Play motion' }}
/>
</ProductHero>The skyLink to the section The sky
HeroSky shows the sun in the light theme and the moon with a few stars in the dark one, and follows the theme switch at once, the system theme included. In the high contrast theme and in forced colours it is drawn as outlines.
- Light theme
- Dark theme
- High contrast theme
The moving agentsLink to the section The moving agents
Motion runs only with JavaScript and with motion allowed. The still frame already shows all three states. The Pause motion button stops every moving part of the page, and every Skribly site remembers the choice.
Agents in a stripLink to the section Agents in a strip
A hero whose media is something else, such as the search of the docs or the specimen of this site, places HeroAgents layout="strip" last in its actions, and HeroBackdrop scrolls a narrow page of code in its margin.
<Fragment slot="actions">
<a class="sk-button sk-button--lg" href="/start/">…</a>
<HeroAgents layout="strip" panel={…} motion={…} />
</Fragment>
<HeroBackdrop slot="backdrop" />Patterned bandsLink to the section Patterned bands
Band is a section on a ground: plain or sunken, with a brand pattern in the product colour and a rule in that colour along its top. A home page alternates plain sections with bands. The product is a class, never an inline style.
A dotted board
Text on a band keeps at least 4.5:1 in every theme.
A grid board
Text on a band keeps at least 4.5:1 in every theme.
---
import Band from '@skribly/ui/astro/Band.astro'
---
<Band pattern="dots" product="docs" labelledby="tools-title">
<h2 id="tools-title">…</h2>
<p>…</p>
</Band>Corner linkLink to the section Corner link
CornerLink floats in the bottom right corner of every page above the back to top button, with the kit's one gap between them. Its small button hides it for the rest of the visit. It comes after the footer in the tab order, has a visible focus and is left out in print; a site leaves it out on the page it links to. Below it stands still in the page, as an example.
<PageLayout …>
…
<CornerLink slot="corner" href="/download/" label="Download Agent" description="the download page of Skribly Agent" dismiss="Hide for this visit" />
</PageLayout>RulesLink to the section Rules
- Decoration is hidden from assistive technology and never takes a click.
- Nothing is an image the page waits for: the sky and the code page are inline SVG, the patterns are CSS.
- Motion that lasts longer than five seconds has the Pause motion button, and its focus is visible.
- With less motion, without JavaScript or while paused, the page shows the still frame.
- In the high contrast theme, in forced colours and in print the patterns and the code page drop out.