Post Header

Editorial post heading with tags, author metadata, reading time, and responsive feature image.

Install

npx ghostcn@1.4.0 add post-header --skip-existing

Use inside {{#post}}. The feature image and metadata depend on the current post.

{{#post}}
    {{> "components/post-header"}}
{{/post}}

{{#post}}
    {{> "components/post-header" class="my-6" titleClass="text-purple-700 dark:text-purple-300"}}
{{/post}}

Parameter	Target
`class`	Component root — `.ghcn-post-header`
`titleClass`	`.ghcn-post-header__title`
`descriptionClass`	`.ghcn-post-header__excerpt`
`metaClass`	`.ghcn-post-header__meta`
`imageClass`	`.ghcn-post-header__image`

Styling parameters affect only elements that render. See Style component instances for specificity, dark mode, and preserving customizations.