ComponentsPublishing
Archive Header
A reusable tag or author archive heading with an optional badge and image.
Install
npx ghostcn@1.4.0 add archive-header --skip-existingMissing dependencies install automatically: Badge. Existing dependency files are preserved.
Usage
Use inside {{#tag}} or {{#author}} to inherit the archive’s name. Pass description=description for a tag description, or use the author bio fallback. Pass a feature image only when available.
{{#tag}}
{{> "components/archive-header" eyebrow="Topic" description=description archiveImage=feature_image}}
{{/tag}}Component options
| Parameter | Behavior |
|---|---|
heading | Heading override; otherwise uses author/tag name or site title. |
eyebrow | Optional badge label. |
description | Description override; otherwise uses author bio. |
archiveImage | Optional archive feature image URL. |
imageAlt | Alternative text for the image (empty for decorative images). |
Customize this instance
{{#tag}}
{{> "components/archive-header" eyebrow="Topic" description=description archiveImage=feature_image class="my-6" titleClass="text-purple-700 dark:text-purple-300"}}
{{/tag}}Styling parameters
| Parameter | Target |
|---|---|
class | Component root — .ghcn-archive-header |
titleClass | .ghcn-archive-header__title |
descriptionClass | .ghcn-archive-header__description |
imageClass | .ghcn-archive-header__image |
badgeClass | .ghcn-ui-badge |
Styling parameters affect only elements that render. See Style component instances for specificity, dark mode, and preserving customizations.
Installed files
partials/components/archive-header.hbsassets/css/components/archive-header.css
Was this helpful?