Section reference › Content

Article `"type": "article"`

A full blog post: cover image, meta line, rich-text body, tags, author box and comment form, with a sidebar of categories, recent posts and tags. Put a page-header above it for the post title.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "article",
  "padding": "sm",
  "title": "Five things to check before you sign a lease",
  "image": "placeholder",
  "category": "Renting",
  "date": "Sep 18, 2026",
  "readTime": "6 min read",
  "html": "<p>Signing a lease is exciting, but a few minutes of checking now can save months of hassle later. Here is what our agents look at first.</p><h2>1. The deposit terms</h2><p>Find out exactly how much the deposit is, where it is held and what can be deducted when you move out.</p><h2>2. Who fixes what</h2><p>Ask for repairs responsibilities in writing, especially for appliances and heating.</p><blockquote>If it is not in the lease, assume it is not agreed.</blockquote><h2>3. Break clauses</h2><p>Life changes. A break clause lets you leave early with notice instead of paying the remaining rent.</p>",
  "tags": [
    "Renting",
    "Tenants",
    "Checklist"
  ],
  "author": {
    "name": "Marcus Hale",
    "image": "placeholder",
    "bio": "Marcus has helped more than 600 tenants find a home and writes our monthly renting guide."
  },
  "sidebar": {
    "categories": [
      {
        "name": "Buying",
        "count": 14
      },
      {
        "name": "Renting",
        "count": 9
      },
      {
        "name": "Market news",
        "count": 6
      }
    ],
    "recent": [
      {
        "title": "How much deposit do you really need?",
        "image": "placeholder",
        "date": "Sep 2, 2026",
        "link": "#"
      },
      {
        "title": "The best Austin neighbourhoods for families",
        "image": "placeholder",
        "date": "Aug 21, 2026",
        "link": "#"
      }
    ],
    "tags": [
      "Mortgages",
      "Investing",
      "Moving",
      "Tips"
    ]
  }
}

Options#

Option	Type	Default	Description
`image`	string	—	Cover image at the top of the article.
`title`	string	—	Only used as the cover image's alt text. The visible post title comes from the page-header section above.
`category`	string	—	Category badge in the meta line.
`date`	string	—	Date shown in the meta line, e.g. "Sep 18, 2026".
`readTime`	string	—	Reading time, e.g. "6 min read".
`html`	string	—	The article body as HTML: <p>, <h2>, <h3>, <ul>, <blockquote>, <img> and so on.
`tags`	array	—	Tags under the article (strings). Also turns on the share icons next to them.
`author`	object	—	Author box after the article: { "name": "…", "image": "…", "bio": "…" }. Hidden when there is no name.
`sidebar`	object	—	Sidebar content: { "categories": [ { "name", "count" } ], "recent": [ { "title", "image", "date", "link" } ], "tags": [ … ] }. Each part is optional; the search box is always shown.

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `sidebar.categories`#

Option	Type	Default	Description
`name`	string	—	Category name.
`count`	number	—	Number of posts shown on the right.

Fields of each entry in `sidebar.recent`#

Option	Type	Default	Description
`title`	string	—	Post title.
`image`	string	—	Small thumbnail.
`date`	string	—	Date under the title.
`link`	string	—	Link to the post. Defaults to "#".

Tips#

The post title is not printed by this section. Add a page-header section with the title above it.
In a multi-page demo, blog posts are usually generated from data.json with "each": "posts" and fields such as "html": "@item.html", "image": "@item.image" and "author": "@item.writer".
The sidebar search box, tag links and share icons are visual only (they link to "#"). The comment form posts to formAction in site.json.
Inside JSON, write quotes in the html string as \" or use typographic quotes (’ “ ”).

Editing it in the HTML files#

The body is inside <div class="rich-text">: edit the paragraphs and headings there. The sidebar is the aside.col-lg-4.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/post-rebrand-without-losing-customers.html (source src/demos/creative-agency/pages/post.json)
Real Estate: template/real-estate/blog-post.html (source src/demos/real-estate/pages/blog-post.json)
Corporate: template/corporate/insight-ai-operating-model.html (source src/demos/corporate/pages/insight.json)
Finance: template/finance/resource-tax-deadlines-2027.html (source src/demos/finance/pages/resource.json)
Law Firm: template/law-firm/insight-non-compete-changes.html (source src/demos/law-firm/pages/insight.json)
SaaS Product: template/saas/post-metrics-that-predict-late-projects.html (source src/demos/saas/pages/post.json)
Mobile App: template/mobile-app/post-tiny-habits-big-results.html (source src/demos/mobile-app/pages/post.json)
Tech Conference: template/conference/news-call-for-papers-open.html (source src/demos/conference/pages/news-post.json)
Online Academy: template/education/post-how-to-build-a-design-portfolio.html (source src/demos/education/pages/post.json)
Restaurant: template/restaurant/post-autumn-menu-2026.html (source src/demos/restaurant/pages/post.json)
Coffee Shop: template/cafe/post-flat-white-at-home.html (source src/demos/cafe/pages/post.json)
Hotel & Resort: template/hotel/post-best-time-to-visit.html (source src/demos/hotel/pages/post.json)
Wedding: template/wedding/post-wedding-planning-timeline.html (source src/demos/wedding/pages/post.json)
Gym & Fitness: template/gym/post-deadlift-form-guide.html (source src/demos/gym/pages/post.json)
Yoga Studio: template/yoga/post-first-yoga-class.html (source src/demos/yoga/pages/post.json)
Day Spa & Salon: template/spa/post-simple-skincare-routine.html (source src/demos/spa/pages/post.json)
Medical Clinic: template/medical/post-blood-pressure-numbers.html (source src/demos/medical/pages/post.json)
Dental Clinic: template/dental/blog-post-how-often-should-you-replace-your-toothbrush.html (source src/demos/dental/pages/blog-post.json)
Pet Care: template/pet-care/blog-post-summer-heat-safety-for-dogs.html (source src/demos/pet-care/pages/blog-post.json)
Construction: template/construction/blog-post-how-much-does-a-kitchen-remodel-cost.html (source src/demos/construction/pages/blog-post.json)
Car Dealer: template/car-dealer/blog-post-new-vs-certified-pre-owned.html (source src/demos/car-dealer/pages/blog-post.json)
Travel Agency: template/travel/post-norway-fjords-by-rail.html (source src/demos/travel/pages/post.json)
Photographer: template/photography/post-wedding-timeline-light.html (source src/demos/photography/pages/post.json)
Interior Design: template/interior-design/guide-olive-green-guide.html (source src/demos/interior-design/pages/guide.json)
Portfolio: template/portfolio/post-leaving-agency-life.html (source src/demos/portfolio/pages/post.json)
Music Festival: template/music-festival/news-full-lineup-announced.html (source src/demos/music-festival/pages/article.json)
Fashion Store: template/fashion-store/post-how-to-care-for-wool.html (source src/demos/fashion-store/pages/post.json)
Charity: template/charity/story-the-well-that-changed-chilumba.html (source src/demos/charity/pages/story.json)
Logistics: template/logistics/post-peak-season-2026-outlook.html (source src/demos/logistics/pages/post.json)

Article "type": "article"