Component Library

All available partials for this theme. Use the partial names below in templates and layouts.

Horizontal Article Cards

{{> hca-large}} Large hero card — 1220px wide, image left, category badge + date + title + excerpt
{{> hca-v1}} Standard card — 760×300px, image left, title + excerpt + category + date
{{> hca-v2}} Medium card — 596×284px, image left, title + excerpt + meta bottom
{{> hca-v3}} Compact card — 563×235px, meta row at top, title only (no excerpt)
{{> hca-v4}} Compact card + CTA — 582×235px, like V3 with Read more link
{{> hca-minimal}} Minimal card — no border/shadow, small image left, title + date

Vertical Cards

{{> vci-v1 icon="..." title="..." body="..."}} Small vertical icon card — icon + title + body. ~284px wide.

Fast Setup

Get started in minutes with our simple onboarding flow.

{{> vci-v2 icon="..." title="..." body="..."}} Large vertical icon card — icon + title + body. ~388px wide.

Expert Analysis

In-depth breakdowns from certified golf instructors.

{{> vca-small}} Small vertical article card — image top, category + date + title + excerpt. Use inside {{#foreach posts}}.
{{> vca-large}} Large vertical article card — 16:9 image, large title (h2), excerpt, Read more link. ~480px wide.
{{> vca-v1}} Standard vertical card — 4:3 image, title + excerpt, meta at bottom. Light shadow, no border. ~340px wide.
{{> vca-v2}} Minimal vertical card — no image, category + title + excerpt + date. Text-only. ~300px wide.
{{> vca-v3}} Compact sidebar list card — 80x80px thumbnail + title + date. No excerpt. ~320px wide.
{{> vca-v4}} Featured magazine cover card — full-bleed image, title overlay with dark gradient. ~340px wide.
{{> vcp-shop-v1 title="..." price="..." img="..." link="..." btn_label="..."}} Compact vertical shop card — image top (200x200px), title, price, CTA button. ~260px wide.
Demo

Titleist Pro V1 Golf Balls (12-pack)

$54.99 Shop now
{{> vcp-shop-v2 title="..." price="..." description="..." img="..." link="..." secondary_link="..."}} Full vertical shop card — image top, title + price + description + 2 stacked buttons. ~280px wide.
Demo

Callaway Rogue ST Max Driver

$499.99

AI-designed face for maximum ball speed across the entire face.

Buy now Compare prices
{{> vcp-amazon-v1 title="..." price="..." img="..." link="..."}} Compact vertical Amazon card — image top, title, price, Amazon logo + Buy now. ~240px wide.
Demo

Garmin Approach S62 GPS Watch

$349.99
Buy now
{{> vcp-amazon-v2 title="..." price="..." description="..." rating="..." img="..." link="..."}} Large vertical Amazon card — image top, rating stars, title, price, description, Amazon logo + Buy now. ~300px wide.
Demo
★★★★★

Bushnell Tour V5 Laser Rangefinder

$299.99

Pinseeker with Jolt technology. Tournament legal, waterproof, fast focus.

Buy now

CTA / Newsletter

{{> cta-v1}} Full-width newsletter CTA — dark card, image collage left, content right.

Subscribe to our newsletter to receive our daily tech reviews

Join the 10,000+ readers in our newsletter
{{> cta-v2}} Full-width newsletter CTA — dark card, content left, image collage right.

Subscribe to our newsletter to receive our daily tech reviews

Join the 10,000+ readers in our newsletter
{{> cta-v3}} Full-width newsletter CTA — dark card, content centred, image collages both sides.

Subscribe to our newsletter to receive our daily tech reviews

Join the 10,000+ readers in our newsletter
{{> cta-v5}} Two-column newsletter CTA — icon + title left, email form right.

Receive our reviews directly in your inbox

Join the 10,000+ readers in our newsletter
{{> cta-newsletter}} Narrow newsletter signup card — 416px wide, dark bg, title + desc + form.

Subscribe to our newsletter to receive our daily tech reviews

Lorem ipsum dolor amet lit consectetur lorem id adipiscing elit ut aliquam purus amet.

Join the 10,000+ readers in our newsletter

Notification Bars

Full-width announcement strips. Parameters: message, btn_label, btn_url. The × button dismisses the bar.

{{> nb-v1 message="..."}} Text only, centred — no button

Get 20% OFF on your first order. Subscribe to our newsletter and get your coupon!

{{> nb-v2 message="..." btn_label="..." btn_url="..."}} Text left, CTA button right — space-between layout

Get 20% OFF on your first order. Subscribe to our newsletter and get your coupon!

Shop Now
{{> nb-v3 message="..." btn_label="..." btn_url="..."}} Text + CTA centred together as a group

Get 20% OFF on your first order. Subscribe to our newsletter and get your coupon!

Shop Now

Horizontal Product Cards

Product cards use parameters. Pass data when including the partial, e.g. {{> hcp-compact title="AirPods Pro" price="$249" img="/path/image.jpg" link="https://..."}}

{{> hcp-compact title="..." price="..." img="..." link="..." btn_label="..."}} Compact product card — 450px, image + title + price + button
Demo

AirPods Pro 2

$299 USD Buy now
{{> hcp-shop title="..." price="..." description="..." img="..." primary_link="..." secondary_link="..."}} Shop card — 584px, image left, title + price + description + 2 action buttons
Demo

Phone case

$99.99

Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus amet.

Buy now Compare prices
{{> hcp-amazon title="..." price="..." img="..." link="..."}} Amazon affiliate card — image + title + price left, Amazon logo + Buy now right
Demo

Aukey charger

$16.99 USD
Buy now

Other Partials

{{> post-card-horizontal}} Legacy horizontal article card (pre-design-system). Use hca-v2 or hca-v3 for new work.
{{> affiliate-card img="..." title="..." description="..." link="..." cta="..." badge="..."}} Legacy affiliate product card. Use hcp-compact for new work.
{{> post-card}} Standard vertical post card — used in index and article listing pages.
{{> tag-badge}} Primary tag badge pill — used inside post cards and hero sections.
{{> breadcrumb}} Breadcrumb nav — used above article titles on post/review/guide pages.
{{> author-bio}} Author bio block — avatar, name, bio text. Used on review pages.
{{> cta-newsletter-v5}} Newsletter CTA section — email input pill + submit. Used on article and guide pages.
{{> related-reviews}} Related reviews grid — used on review single page.

HTML Card Snippets (Ghost Editor)

Paste these into a Ghost HTML card in the editor.

pc-card (Pros & Cons) Pros and Cons comparison card. Uses .pc-card CSS class.