Creator — Building a Ghost Theme (Work Log)

Back to project

Building Creator, a free open-source multipurpose Ghost theme — documented step by step, in the open.

Build log 16 Jul 2026 1 min read

Part 16 — Building the post card component

Built the single most-reused component in the theme.

The card

<article class="card bg-base-100 shadow">
  <figure><img src="{{img_url feature_image size="m"}}"
       width="600" height="400" loading="lazy"></figure>
  <div class="card-body">
    <span class="badge">{{primary_tag.name}}</span>
    <h2 class="card-title">{{title}}</h2>
    <p>{{excerpt words="20"}}</p>
  </div>
</article>

Details that matter

  • Explicit width/height to prevent layout shift (CLS).
  • loading="lazy" for offscreen images.
  • Keyboard-focusable, accessible link wrapping.

Advertisement