{ "_description": "Generated from data/ — edit the sources, not this file. The agent access guide explains the evidence boundary of every field.", "schemaVersion": "1.0.0", "kind": "entry", "locale": "en", "id": "hero-section", "name": { "zh": "首屏主视觉区", "en": "Hero Section" }, "page": "https://designvocabulary.com/en/entries/hero-section/", "self": "https://designvocabulary.com/en/entries/hero-section.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/entries/hero-section.json", "en": "https://designvocabulary.com/en/entries/hero-section.json" }, "site": { "catalogSchemaVersion": "0.1.0", "entries": 137, "index": "https://designvocabulary.com/en/entries/index.json", "query": "https://designvocabulary.com/api/query?lang=en", "guide": "https://designvocabulary.com/en/agents/", "llms": "https://designvocabulary.com/llms.txt" }, "provenance": { "sourceBacked": [ "entry.definition" ], "editorial": [ "entry.boundary", "entry.signature", "entry.when", "entry.when_not", "entry.tradeoff", "entry.comparison", "entry.rules", "entry.relations", "entry.implementationNote", "entry.behavior" ], "scope": "Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.", "editorialStatus": "drafted", "specimenData": "fictional", "specimenNote": "Original fictional specimens. Definitions cite sources; usage advice and recipes are editorial.", "sources": [ { "id": "hero-bootstrap", "url": "https://getbootstrap.com/docs/5.3/examples/heroes/", "title": "Bootstrap · Heroes examples", "checkedAt": "2026-09-16", "archive": { "status": "available", "confirmed": true, "url": "https://web.archive.org/web/20260916132524/https://getbootstrap.com/docs/5.3/examples/heroes/", "capturedAt": "2026-09-16T13:25:24Z", "lookupUrl": "https://web.archive.org/web/20260916*/https://getbootstrap.com/docs/5.3/examples/heroes/" } }, { "id": "hero-uswds-landing", "url": "https://designsystem.digital.gov/templates/landing-page/", "title": "U.S. Web Design System · Landing page template", "checkedAt": "2026-09-16", "archive": { "status": "pending", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20260916*/https://designsystem.digital.gov/templates/landing-page/" } } ], "lists": [], "ordered": false, "listDisclaimer": "Seat numbers are editorial positions, not scores, rankings, or popularity measurements. A list that is not filled is left as it is." }, "entry": { "id": "hero-section", "type": "layout", "name": { "zh": "首屏主视觉区", "en": "Hero Section" }, "aliases": [ "Hero Block", "Hero Banner", "主视觉区", "首屏横幅" ], "granularity": "component", "intents": [ "express-brand", "organize-content" ], "tags": [ "above the fold", "value proposition", "primary action", "hero image", "page opening" ], "definition": "The opening block at the top of a page that takes up a substantial area: one claim, a short explanation, one primary action, usually with an image or a background field — telling the visitor what this is and what they can do before they scroll.", "boundary": "This entry means the first block of a long page, not the whole page: evidence, features, and pricing follow below it, so it only has to open. Unlike a cover page, it has content beneath it; unlike a site banner ad, it presents the product’s own claim rather than outside promotion. The test is a block at the top of the page that carries the claim and the primary action with content below it — not \"has a big image\". A large image with no claim and no action is just a header picture.", "signature": [ "The first block on the page, noticeably taller than the blocks after it", "A claim, a short explanation, and one or two action buttons appear as a group", "An image or background fills about half the block, set beside or above the text" ], "when": [ "Visitors may be meeting the product for the first time and need to know what it is", "The page has one clear primary action and the rest of the content supports it", "One block has to be reused across several landing pages with only copy and image swapped" ], "when_not": [ "The page is a signed-in workspace where users come to continue a task, not to learn about the product", "The hero pushes all real content off the first screen, so users must scroll before seeing anything", "An image unrelated to the content occupies the top only to make the page look finished" ], "tradeoff": "It puts the claim and the primary action where they are easiest to see, at the cost of the entire first screen: the taller the block, the later everything else appears, and narrow screens feel it most.", "comparison": { "focus": "Saying what this is and what can be done before any scrolling", "mechanism": "A tall top block grouping the claim, the explanation, and the action", "cost": "It fills the first screen and pushes everything else below the fold" }, "sources": [ { "id": "hero-bootstrap", "title": "Bootstrap · Heroes examples", "url": "https://getbootstrap.com/docs/5.3/examples/heroes/", "claim": "The example set presents several opening-block variants under the name hero — centred, left-aligned with an image, vertically centred with a sign-up form, bordered with a cropped image, and dark — each built from a heading, a paragraph of explanation, and a primary plus a secondary button. This entry paraphrases the component description from it.", "checkedAt": "2026-09-16", "archive": { "lookupUrl": "https://web.archive.org/web/20260916*/https://getbootstrap.com/docs/5.3/examples/heroes/", "status": "available", "checkedAt": "2026-09-16T13:25:00.336Z", "jobId": "spn2-e3e2cbfaf4cdd9936c81aebd234275ccf6b6cf53", "url": "https://web.archive.org/web/20260916132524/https://getbootstrap.com/docs/5.3/examples/heroes/", "timestamp": "20260916132524" } }, { "id": "hero-uswds-landing", "title": "U.S. Web Design System · Landing page template", "url": "https://designsystem.digital.gov/templates/landing-page/", "claim": "The template lists the top block of a landing page as a distinct structural unit preceding the other content sections. This entry takes the block’s position in page structure from it; the sizing and trade-off guidance is editorial.", "checkedAt": "2026-09-16", "archive": { "lookupUrl": "https://web.archive.org/web/20260916*/https://designsystem.digital.gov/templates/landing-page/", "status": "pending", "checkedAt": "2026-09-16T13:31:07.749Z", "error": "status-request-failed", "jobId": "spn2-68fe1fa76daa3ba305fbc4c47abd026c294facce" } } ], "relations": [ { "target": "landing-page", "kind": "composes_with", "condition": "A landing page needs an opening block to carry its claim", "reason": "A landing page defines the order of the whole sequence while the hero section handles only its first segment; the relation is containment, not substitution.", "basis": "editorial" }, { "target": "cover-page", "kind": "alternative", "condition": "Deciding whether anything exists below this screen", "reason": "The two look almost identical on the first screen; the difference is that nothing follows a cover page while a whole page follows a hero section.", "basis": "editorial" }, { "target": "visual-interference", "kind": "conflicts_when", "condition": "Text is placed directly over a detailed background photograph", "reason": "A photograph’s lightness varies continuously behind text, so the real contrast of the heading and button is set by the worst region.", "basis": "editorial" } ], "rules": [ { "when": "The hero uses a background image or video behind text", "instruction": "Put a sufficient scrim or solid ground behind the text and verify contrast against the image’s worst region, not by eye on the sample image.", "strength": "must", "basis": "editorial" }, { "when": "The page is opened on a phone", "instruction": "Cap the block height so that the primary action and the start of the next section are both visible or clearly hinted on the first screen.", "strength": "recommend", "basis": "editorial" } ], "behavior": { "states": [ "wide", "compact" ], "a11y": [ "The claim uses the page’s single level-one heading and the rest step down from it", "A decorative background image is hidden from screen readers and does not repeat the heading" ], "motion": "Entrance animation is optional and the final state is shown directly under a reduced-motion preference" }, "demo": null, "version": "0.1.0", "editorialStatus": "drafted", "requirements": [], "demoCapabilities": [], "implementationNote": "This entry has no runnable specimen; the illustration is an editorial sketch of how the block groups its elements, not a verified implementation. Before shipping, confirm on phone sizes that the hero does not consume the entire first screen and measure text contrast over the background.", "image": { "src": "/images/hero-section.webp", "alt": "A fictional FIELDNOTES web page sketch: a tall opening block at the top with grey placeholder headline and explanation bars plus two buttons on the left and an image area on the right, and the top edge of the next section showing beneath it." }, "searchTerms": [ "首屏", "主张", "主要动作", "大图", "页面开头" ] } }