Domain

BlogSection

Blog/article listing section that renders post cards with metadata, excerpt text, and author attribution.

import { BlogSection } from '@lostgradient/cinder/blog-section';
marketingblogcontent
01

Overview

Renders a marketing blog section with post cards, metadata, and author attribution.

Usage

svelte 
<script lang="ts">
  import BlogSection from '@lostgradient/cinder/blog-section';

  const posts = [
    {
      title: 'Introducing Cinder',
      excerpt: 'A quick look at our new UI component library.',
      href: '/blog/introducing-cinder',
      authorName: 'Alex Morgan',
    },
  ];
</script>

<BlogSection title="From the blog" {posts} />
Live preview
02

When to use

Use when
  • Showing recent posts or resources on a landing page.
  • Building a featured-articles grid with author and publish metadata.
Avoid when
03

Examples

BlogSection

BlogSection showing recent articles with category, excerpt, and author attribution.

04

Props

Props for blog-section
Name Type Default Required Bindable Description
as 'section' | 'div' 'section' Wrapper element tag.
title text Optional section heading text.
description text Optional section description text.
posts BlogSectionPost[] req Posts to render in the section.
columns 1 | 2 | 3 3 Grid column count.
maxWidth 'prose' | 'narrow' | 'wide' | 'full' 'wide' Max width token forwarded to Container.