Section reference › Content

Blog cards `"type": "blog"`

A grid of blog or news cards with image, category, date, author, title and excerpt. Use it for a "Latest news" block or a full blog index page.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "blog",
  "tone": "alt",
  "eyebrow": "From the blog",
  "title": "Latest news & ideas",
  "columns": 3,
  "posts": [
    {
      "image": "placeholder",
      "category": "Guides",
      "date": "Sep 12, 2026",
      "author": "Lena Park",
      "title": "How to plan a website redesign without losing traffic",
      "excerpt": "A step-by-step checklist for keeping your search rankings while you change everything else.",
      "link": "#"
    },
    {
      "image": "placeholder",
      "category": "Case study",
      "date": "Aug 30, 2026",
      "author": "Tom Walsh",
      "title": "How Brightline doubled demo requests in 90 days",
      "excerpt": "Fewer form fields, clearer pricing and one very honest headline.",
      "link": "#"
    },
    {
      "image": "placeholder",
      "category": "News",
      "date": "Aug 14, 2026",
      "author": "Lena Park",
      "title": "We are opening a second studio in Lisbon",
      "excerpt": "Twelve new roles, a bigger kitchen and the same way of working.",
      "link": "#"
    }
  ],
  "buttons": [
    {
      "label": "View all posts",
      "href": "blog.html",
      "style": "outline",
      "icon": "arrow-right"
    }
  ]
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string	—	Section heading. Simple inline HTML such as <em> or <br> is allowed.
`text`	string	—	Short intro paragraph under the title.
`headAlign`	string	`center`	Alignment of the eyebrow/title/text block. Any value other than "center" (e.g. "start") left-aligns it. Values: `center \| start`
`posts`	array	—	The posts to show. In multi-page demos this is usually { "$data": "posts", "limit": 3 }.
`columns`	number	`3`	Cards per row on large screens. Values: `1 \| 2 \| 3 \| 4 \| 6`
`pages`	number	—	Adds a page-number bar (1, 2, 3 … →) under the grid. It is visual only; the links point to "#".
`buttons`	array	—	Buttons shown centred under the grid. See the button fields below.

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

Fields of each entry in `posts`#

Option	Type	Default	Description
`image`	string	—	Card image.
`category`	string	—	Label on the image.
`date`	string	—	Date in the meta line.
`author`	string	—	Author name in the meta line.
`title`	string	—	Post title; the whole card links to the post.
`excerpt`	string	—	One or two sentences under the title.
`link`	string	—	Post URL (href also works). Defaults to "#".

Fields of each entry in `buttons`#

Option	Type	Default	Description
`label`	string	—	Button text. A button without a label is not shown.
`href`	string	—	Link target, e.g. "contact.html" or "#pricing". Defaults to "#".
`style`	string	`primary`	Button look. Values: `primary \| outline \| light \| dark \| accent \| link`
`icon`	string	—	Bootstrap Icons name shown after the label (e.g. "arrow-right"). "link" buttons get an arrow automatically.
`video`	string	—	YouTube embed URL (https://www.youtube.com/embed/VIDEO_ID). When set, the button opens the video in a pop-up instead of following href.

Tips#

Use 3, 6 or 9 posts with 3 columns so the rows are full.
In multi-page demos "posts": { "$data": "posts", "limit": 3 } pulls posts from data.json, and each card links to its generated post page automatically. On a post page add "exclude": "@item" to hide the current post.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/index.html (source src/demos/creative-agency/pages/index.json)
Real Estate: template/real-estate/blog-post.html (source src/demos/real-estate/pages/blog-post.json)
Corporate: template/corporate/home-2.html (source src/demos/corporate/pages/home-2.json)
Finance: template/finance/index.html (source src/demos/finance/pages/index.json)
Law Firm: template/law-firm/index.html (source src/demos/law-firm/pages/index.json)
SaaS Product: template/saas/blog.html (source src/demos/saas/pages/blog.json)
Mobile App: template/mobile-app/blog.html (source src/demos/mobile-app/pages/blog.json)
Tech Conference: template/conference/index.html (source src/demos/conference/pages/index.json)
Online Academy: template/education/blog.html (source src/demos/education/pages/blog.json)
Restaurant: template/restaurant/index.html (source src/demos/restaurant/pages/index.json)
Coffee Shop: template/cafe/index.html (source src/demos/cafe/pages/index.json)
Hotel & Resort: template/hotel/index.html (source src/demos/hotel/pages/index.json)
Wedding: template/wedding/index.html (source src/demos/wedding/pages/index.json)
Gym & Fitness: template/gym/blog.html (source src/demos/gym/pages/blog.json)
Yoga Studio: template/yoga/blog.html (source src/demos/yoga/pages/blog.json)
Day Spa & Salon: template/spa/blog.html (source src/demos/spa/pages/blog.json)
Medical Clinic: template/medical/blog.html (source src/demos/medical/pages/blog.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.html (source src/demos/car-dealer/pages/blog.json)
Travel Agency: template/travel/blog.html (source src/demos/travel/pages/blog.json)
Photographer: template/photography/index.html (source src/demos/photography/pages/index.json)
Architecture Studio: template/architecture/press.html (source src/demos/architecture/pages/press.json)
Interior Design: template/interior-design/index.html (source src/demos/interior-design/pages/index.json)
Portfolio: template/portfolio/blog.html (source src/demos/portfolio/pages/blog.json)
Music Festival: template/music-festival/news-full-lineup-announced.html (source src/demos/music-festival/pages/article.json)
Fashion Store: template/fashion-store/index.html (source src/demos/fashion-store/pages/index.json)
Charity: template/charity/index.html (source src/demos/charity/pages/index.json)
Logistics: template/logistics/index.html (source src/demos/logistics/pages/index.json)

Blog cards "type": "blog"