Brand and content

LatestPostCard

Compact highlighted latest-publication link.

Live example

Building a calmer interface

A practical note about content-first design.

Published 19 July 2026Updated 20 July 20264 min read

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { LatestPostCard } from "@cofob/design-system-react";

/**
 * Complete LatestPostCard parameter reference.
 * @param post
 *   type: PostModel
 *   required
 *   example: {post}
 * @param headingLevel
 *   type: 2 | 3 | 4
 *   default: 2
 *   example: 2
 * @param eyebrow
 *   type: string | ReactNode
 *   default: "Latest post"
 *   example: "Latest post"
 * @param anchor attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function LatestPostCardExample() {
  return (
    <LatestPostCard post={post} />
  );
}

Svelte

<script lang="ts">
  import { LatestPostCard } from "@cofob/design-system-svelte";

  // Complete LatestPostCard parameter reference.
  // post
  //   type: PostModel
  //   required
  //   example: {post}
  // headingLevel
  //   type: 2 | 3 | 4
  //   default: 2
  //   example: 2
  // eyebrow
  //   type: string | ReactNode
  //   default: "Latest post"
  //   example: "Latest post"
  // anchor attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<LatestPostCard post={post} />

HTML

<!--
  Complete LatestPostCard parameter reference.
  post
    type: PostModel
    required
    example: {post}
  headingLevel
    type: 2 | 3 | 4
    default: 2
    example: 2
  eyebrow
    type: string | ReactNode
    default: "Latest post"
    example: "Latest post"
  anchor attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<a class="cf-latest-post-card" href="/post">…</a>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-latest-post-card`
Adapters	Native · React · Svelte
Primary props	post · headingLevel · eyebrow · anchor attributes
Documented states	default · hover/focus where interactive · disabled where applicable
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`post`required	`PostModel`	`required`	React · Svelte · HTML	`{post}`	Portable post metadata including URL, title, dates, tags, and cover image.
`headingLevel`	`2 \| 3 \| 4`	`2`	React · Svelte · HTML	`2`	Semantic heading level inside a post card.
`eyebrow`	`string \| ReactNode`	`"Latest post"`	React · Svelte · HTML	`"Latest post"`	Short label above the latest-post title.
`anchor attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.