ArticleOctober 3, 2026

A Taller, Tappable Hero

TileDown 0.10.0 adds heroSize and heroLink, two front-matter keys that make a standard page's hero image taller and turn it into a link.

A page’s hero image used to have one size and no link. TileDown 0.10.0 adds two optional front-matter keys, and a page that uses neither renders exactly the hero markup it did before.

heroSize: large
heroLink: /shop/complete/

heroSize: a taller hero

On a standard page the hero is capped at 24rem tall (clamp(14rem, 38vh, 24rem)). Article pages already get a taller cap, 34rem. A cover or a banner that is the point of the page can look small under the standard cap, so heroSize: large gives a standard page the article cap, clamp(18rem, 54vh, 34rem).

For a 16:9 image that is the difference between about 683 px wide and about 967 px wide on a large screen. The value is trimmed and matched without regard to case, and any other value keeps the default. Post card thumbnails never change. Both built-in themes carry the new td-hero-large rules.

heroLink: a tappable hero

heroLink wraps the hero in an anchor with the class td-hero-link. A theme-aware hero, one with both image and imageDark, is wrapped as a whole, so its light and dark pair still swaps with the appearance toggle. A root-relative link is prefixed with baseURL like the hero image itself, an absolute URL passes through unchanged, and the link is attribute escaped. Post cards keep linking to the post.

On an article page the hero image and its link are not prefixed with baseURL. For a site served under a path prefix, give articles absolute URLs.

Both keys are optional

Neither key changes a page that does not use it. The tests compare the hero markup of a page without them against the previous output, byte for byte.

Upgrade with brew upgrade tiledownhq/tap/tiledown. The front-matter table in the authoring guide and the changelog have the full description.

View Markdown source

index.md

---
title: A Taller, Tappable Hero
date: 2026-10-03
description: TileDown 0.10.0 adds heroSize and heroLink, two front-matter keys that make a standard page's hero image taller and turn it into a link.
tags: Images, Configuration
image: /assets/post-hero-size-and-link.svg
imageDark: /assets/post-hero-size-and-link-dark.svg
---
# A Taller, Tappable Hero

A page's hero image used to have one size and no link. TileDown 0.10.0 adds two
optional front-matter keys, and a page that uses neither renders exactly the
hero markup it did before.

```
heroSize: large
heroLink: /shop/complete/
```

## heroSize: a taller hero

On a standard page the hero is capped at 24rem tall
(`clamp(14rem, 38vh, 24rem)`). Article pages already get a taller cap, 34rem. A
cover or a banner that is the point of the page can look small under the
standard cap, so `heroSize: large` gives a standard page the article cap,
`clamp(18rem, 54vh, 34rem)`.

For a 16:9 image that is the difference between about 683 px wide and about
967 px wide on a large screen. The value is trimmed and matched without regard
to case, and any other value keeps the default. Post card thumbnails never
change. Both built-in themes carry the new `td-hero-large` rules.

## heroLink: a tappable hero

`heroLink` wraps the hero in an anchor with the class `td-hero-link`. A
theme-aware hero, one with both `image` and `imageDark`, is wrapped as a whole,
so its light and dark pair still swaps with the appearance toggle. A
root-relative link is prefixed with `baseURL` like the hero image itself, an
absolute URL passes through unchanged, and the link is attribute escaped. Post
cards keep linking to the post.

On an article page the hero image and its link are not prefixed with `baseURL`.
For a site served under a path prefix, give articles absolute URLs.

:::tile callout
title: Both keys are optional
body: Neither key changes a page that does not use it. The tests compare the hero markup of a page without them against the previous output, byte for byte.
:::

Upgrade with `brew upgrade tiledownhq/tap/tiledown`. The front-matter table in
the [authoring guide](https://codeberg.org/TileDownHQ/tile-down/src/branch/main/docs/authoring.md)
and the [changelog](https://codeberg.org/TileDownHQ/tile-down/src/branch/main/CHANGELOG.md)
have the full description.