All Patterns

Blog Post – Varo

Blog Post - Varo

Clean, minimal single blog post template inspired by Varo's design. Uses ACSS content-grid for responsive layout with featured image breakout.

Dynamic Data Keys

FieldKey
Category{this.categories.at(0).name} (linked)
Title{this.title}
Date{this.date.dateFormat("F j, Y")}
Author{this.author.displayName}
Featured Image{this.image.url}, {this.image.alt}
Content{@post-content} slot

Layout

  • Uses ACSS .content-grid for main layout
  • Featured image breaks out with .content--feature-max
  • Content area also uses content-grid so inner images/figures can break out

Scheme Agnostic

Uses ACSS color variables (--black, --neutral-dark, --primary) that adapt to light/dark schemes.