Hero Section
Section Héros
Une section hero est le grand espace de départ d'une page. Elle explique vite la promesse, pour qui c'est, la preuve et l'action à faire ensuite.
Name it. Build it.
Move from a rough description to a precise pattern.
Explore atlasUn vrai exemple
Une page de paie s'ouvre avec un titre centré sur les résultats et un aperçu du produit. Elle ajoute un bouton d'essai et un signe de confiance.
Parties principales
- 01Trigger or task context
- 02Primary control surface
- 03Feedback, focus, and dismissal
Utilisez-le lorsque
Utilisez-le lorsque qu'une page de destination doit expliquer rapidement sa valeur et l'étape suivante.
Ne l'utilisez pas lorsque
Ne laissez jamais une immense bannière décorative repousser le produit, la preuve et l'action hors du premier écran.
Nom utilisé dans le code
<section> + heading + primary action Avant d'expédier
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Section Héros (Hero Section). User context: Une page de paie s'ouvre avec un titre centré sur les résultats et un aperçu du produit. Elle ajoute un bouton d'essai et un signe de confiance. Recommended pattern: Section Héros (Hero Section). Why it fits: Utilisez-le lorsque qu'une page de destination doit expliquer rapidement sa valeur et l'étape suivante. Do not use it when: Ne laissez jamais une immense bannière décorative repousser le produit, la preuve et l'action hors du premier écran. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Aucun standard officiel unique ne régit l’ensemble du terme. Sa signification peut varier selon les équipes, plateformes ou frameworks. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how Section Héros (Hero Section) is used now. Definition: Une section hero est le grand espace de départ d'une page. Elle explique vite la promesse, pour qui c'est, la preuve et l'action à faire ensuite. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.