Quiz Start
Sourcecomponents/sections/QuizStartSection.astro
Centered layout
The intro screen before a quiz begins — an Eyebrow, a serif-accent heading, a lead, a meta row (count · time · free), the start Button, and a "how it works" trio. The default centered sits on the washed image, same shell as the Login and 404 pages.
Switch viewport — the page renders at each breakpoint's true size, scaled to fit.
Split layout
layout="split" puts the content on a light panel on the left and the image on the right — stacking to a single column below 900px.
Built from
- Eyebrow — the small "Free tool" label
- Button — the start CTA
- Inline Link — the legal row
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
layout | 'centered' | 'split' | 'centered' | On the washed image, or content-left / image-right. |
title | string | — | The heading (supports <em> for a serif accent). |
eyebrow | string | 'Free tool' | Small label above the heading. |
lead | string | — | Intro line under the heading. |
ctaLabel | string | 'Start the quiz' | Start button label. |
ctaHref | string | '#' | Start destination. |
note | string | — | Small info line under the button. |
image | string | '/img/hero.jpg' | Background (centered) / side image (split). |
Usage
Point ctaHref at the first question. Wrap an accent word in <em> for the serif twist.
---
import QuizStartSection from '../components/sections/QuizStartSection.astro';
---
<QuizStartSection
eyebrow="Free tool"
title="What is your <em>brand archetype?</em>"
lead="Answer six quick questions and discover the archetype at the heart of your brand."
ctaLabel="Find your archetype" ctaHref="/quiz/1"
/>Rules
Set expectations up front — count, time and that it's free.
Keep the promise clear: what will they get at the end?
Ask for an email before they've started — that kills momentum.
Over-explain — one CTA, a short lead, and go.