From b036d7cd55a095af04cf8de9e5b260c9e8112973 Mon Sep 17 00:00:00 2001 From: Mark Dumay <61946753+markdumay@users.noreply.github.com> Date: Sun, 2 Aug 2026 07:32:33 +0200 Subject: [PATCH] fix(hero): describe the real cover height instead of "full page" The hero docs promised a "full-page hero" and a "full-height hero" for `cover: true`. A cover section is 88vh, capped at 1024px from the xxl breakpoint upwards, so both claims overstated it and left readers treating the deliberate 12vh peek as a bug. State the actual height, explain why it falls short of the viewport, and point at the `main.sectionHeight` and `main.maxSectionHeight` settings that change it. Also correct the illustrated-hero paragraph: `cover` keeps a tall illustration inside its column rather than stretching it, and leaves landscape illustrations alone. Refs: gethinode/hinode#2107 Co-Authored-By: Claude Opus 5 (1M context) --- content/blocks/hero.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/content/blocks/hero.md b/content/blocks/hero.md index 0016c2d..d937b90 100644 --- a/content/blocks/hero.md +++ b/content/blocks/hero.md @@ -13,7 +13,10 @@ tags: block ### Basic hero -The `hero` content block renders a page hero, typically at the top of the page. Set `cover` to true to display a full-page hero. +The `hero` content block renders a page hero, typically at the top of the page. Set `cover` to true to display a tall hero that fills most of the viewport. + +> [!NOTE] +> A cover hero is `88vh` tall by default, not the full `100vh`. The remaining sliver deliberately reveals the top of the next section, hinting that the page continues below the fold. On extra large and tall viewports the height is further capped at `1024px`. Both values are site settings — see the [layout configuration](https://gethinode.com/docs/configuration/layout/) for `main.sectionHeight` and `main.maxSectionHeight`. {{< example-bookshop lang="bookshop" >}} @@ -32,7 +35,7 @@ The `hero` content block renders a page hero, typically at the top of the page. ### Illustrated hero -You can include an `illustration` next to the hero heading. Specify `orientation` and `order` to configure the illustration's placement. You can set `cover` to true to display a full-height hero. In horizontal layout, `heading.width` sets how many Bootstrap columns the heading occupies (1–12); the illustration fills the remaining columns. Use `illustration.width` to further constrain the image within its column (1–12). +You can include an `illustration` next to the hero heading. Specify `orientation` and `order` to configure the illustration's placement. Setting `cover` to true raises the section to the cover height described above. It also keeps the illustration within the height of its column, so a tall or portrait image is scaled down to fit instead of stretching the hero past the cover height. Landscape images are unaffected, as their width is already the limiting dimension. In horizontal layout, `heading.width` sets how many Bootstrap columns the heading occupies (1–12); the illustration fills the remaining columns. Use `illustration.width` to further constrain the image within its column (1–12). {{< example-bookshop lang="bookshop" >}}