Skip to content

← All components

Brand and content

PostCard

Article preview with cover, dates, tags, and action.

Live example

Published Updated 4 min read

Building a calmer interface

A practical note about content-first design.

designcss

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

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

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

Svelte

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

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

<PostCard post={post} />

HTML

html
<!--
  Complete PostCard parameter reference.
  post
    type: PostModel
    required
    example: {post}
  headingLevel
    type: 2 | 3 | 4
    default: 2
    example: 2
  anchor attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<a class="cf-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>

Parameters

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

ParameterTypeDefaultAdaptersExampleDescription
postrequiredPostModelrequiredReact · Svelte · HTML{post}Portable post metadata including URL, title, dates, tags, and cover image.
headingLevel2 | 3 | 42React · Svelte · HTML2Semantic heading level inside a post card.
anchor attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.