ComponentsPublishing
Post Card
Post preview card with feature image, primary tag, excerpt, and reading time.
Install
npx ghostcn@1.4.0 add post-card --skip-existingUsage
Use inside a post loop or a post context. Use class for the outer card and titleClass for its heading.
{{#foreach posts}}
{{> "components/post-card"}}
{{/foreach}}Customize this instance
{{#foreach posts}}
{{> "components/post-card" class="my-6" titleClass="text-purple-700 dark:text-purple-300"}}
{{/foreach}}Styling parameters
| Parameter | Target |
|---|---|
class | Component root — .gh-post-card |
imageClass | .gh-post-card-img |
contentClass | .gh-post-card-content |
titleClass | .gh-post-card-title |
descriptionClass | .gh-post-card-excerpt |
metaClass | .gh-post-card-meta |
footerClass | .gh-post-card-footer |
Styling parameters affect only elements that render. See Style component instances for specificity, dark mode, and preserving customizations.
Installed files
partials/components/post-card.hbsassets/css/components/post-card.css
Was this helpful?