Blog, featured post · Klarhimmel UI

Install

npx shadcn add @klarhimmel/blog-featured

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import BlogFeatured from '@/components/klarhimmel/blocks/blog-featured';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <BlogFeatured props={{
          "eyebrow": "Journal",
          "title": "Latest from the front desk",
          "featured": {
            "category": "Guide",
            "title": "How we cut check-in questions by a third",
            "excerpt": "A clearer arrival email, a photo of the front door and one sentence about parking. The three changes that worked, with the numbers.",
            "meta": "Oct 6, 2026 · 7 min read",
            "href": "#post-1",
            "media": {
              "src": "",
              "alt": "A front door with a brass handle"
            }
          },
          "postsTitle": "More to read",
          "posts": [
            {
              "category": "Product",
              "title": "Rate calendars, rebuilt",
              "meta": "Sep 29, 2026",
              "href": "#post-2"
            },
            {
              "category": "Company",
              "title": "What we learned from 400 support emails",
              "meta": "Sep 15, 2026",
              "href": "#post-3"
            },
            {
              "category": "Guide",
              "title": "Writing a house guide guests actually read",
              "meta": "Sep 1, 2026",
              "href": "#post-4"
            }
          ],
          "more": {
            "label": "All articles",
            "href": "/journal"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/blog-featured';

Also called

blog/featured

Category: Post cards, lists and the article page.

Notes

When to use it

A blog front page: the newest article as one large image card with excerpt, next to a short list of two to four more titles. For a longer list of posts without a lead, `blog-list` fits better.

Writing for it

- The featured excerpt is 240 characters. Say what the reader will be able to do afterwards, and include a number if you have one. - The side posts have only category, title and date, no image or excerpt. Titles of up to 100 characters work best when they are short enough to sit on two lines. - Set postsTitle (60 characters) to a prompt like 'More to read', or clear it to drop the small heading above the list.

Watch out for

The title of the whole block is an h2 you write yourself, but the featured post is an h3 and the side posts are h4. The featured title and the side-post titles are hidden when empty, so a post with no title vanishes from the page rather than showing a blank link.

Pairs well with

Usage

The block in a page, with its default content (long lists shortened). Every prop is in the table below.

section.tsx

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import BlogFeatured from '@/components/klarhimmel/blocks/blog-featured';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <BlogFeatured props={{
          "eyebrow": "Journal",
          "title": "Latest from the front desk",
          "featured": {
            "category": "Guide",
            "title": "How we cut check-in questions by a third",
            "excerpt": "A clearer arrival email, a photo of the front door and one sentence about parking. The three changes that worked, with the numbers.",
            "meta": "Oct 6, 2026 · 7 min read",
            "href": "#post-1",
            "media": {
              "src": "",
              "alt": "A front door with a brass handle"
            }
          },
          "postsTitle": "More to read",
          "posts": [
            {
              "category": "Product",
              "title": "Rate calendars, rebuilt",
              "meta": "Sep 29, 2026",
              "href": "#post-2"
            },
            {
              "category": "Company",
              "title": "What we learned from 400 support emails",
              "meta": "Sep 15, 2026",
              "href": "#post-3"
            },
            {
              "category": "Guide",
              "title": "Writing a house guide guests actually read",
              "meta": "Sep 1, 2026",
              "href": "#post-4"
            }
          ],
          "more": {
            "label": "All articles",
            "href": "/journal"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Props

The type, default and text limit of every prop. On a real page, over-limit text is kept and checkSections flags it (Installation, Check a page before you ship); this live preview shows the default until it fits. The panel above edits all props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Journal'`	Text, up to 60 characters.
`title`	`string`	`'Latest from the front desk'`	Text, up to 120 characters.
`featured`	`{ category, title, excerpt, meta, href, media }`	`{…}`	Fields: category, title, excerpt, meta, href, media.
`postsTitle`	`string`	`'More to read'`	Text, up to 60 characters.
`posts`	`{ category, title, meta, href }[]`	`3 items`	List of 2 to 4. Each item: category, title, meta, href.
`more`	`Link`	`{…}`	See the type.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.