MarketingContent
A blog / content grid: an optional heading block above a responsive grid of content cards (preview image, meta, title, excerpt). Cards become a single linked surface when href is set. Presentational and theme-driven.
Installation
pnpm dlx @hex-core/cli add marketing-contentUsage
import { MarketingContent } from "@/components/ui/marketing-content"Blog index grid
Three-up grid of linked posts with images and meta.
import { MarketingContent } from "@hex-core/components";
<MarketingContent
title="From the blog"
description="Notes on shipping spec-driven UI."
posts={[
{ title: "Page recipes, explained", excerpt: "Why we built a page-level recipe model.", href: "/blog/page-recipes", meta: "May 22 · 4 min read", image: <img src="/blog/recipes.jpg" alt="Page recipes hero" /> },
{ title: "Theming with semantic tokens", excerpt: "One swap, the whole site restyles.", href: "/blog/theming", meta: "May 14 · 6 min read", image: <img src="/blog/theming.jpg" alt="Theme cards" /> },
]}
/>Variant values
columnsCards per row on desktop.| Value | Description |
|---|---|
threedefault | Three across. |
two | Two across. |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
postsrequired | object | — | ReadonlyArray<{ title; excerpt?; href?; image?: ReactNode; meta? }>. Posts in display order. Set href to make the whole card a link to the article. |
eyebrow | ReactNode | — | Section eyebrow above the title. |
title | ReactNode | — | Section heading. |
description | ReactNode | — | Section subcopy below the heading. |
columns | enum | three | Cards per row on ≥lg: 'two' or 'three'. |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use on a /blog index, an about page's 'latest writing' section, or below the hero to surface fresh content. Three columns for short cards; two when excerpts are longer.
When not to use
Don't use for product features (use marketing-feature-grid) or product cards (use commerce-product-grid). Don't pad with stale posts to fill a row.
Common mistakes
- Omitting alt on preview images, so the index isn't navigable by screen reader.
- Putting the meta as part of the title — keep it as a separate line so search results and feeds parse the title cleanly.
- Mixing aspect ratios — the card uses 16/10; supply consistently cropped previews.
Accessibility
When href is set, the whole card is a single anchor with an accessible name from the title (and excerpt becomes adjacent text). When unset, the card renders as <article>. Images need alt text describing the preview.
Related components
Token budget: 998
Verified against @hex-core/components@1.14.0