News Section

Component

About

A homepage news band that shows one lead story and up to three more headlines, each with a date, kind label and link.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds News Section to your project and fits it to your theme.

Code

How News Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import NewsSection from "@/components/ui/news-section";

export default function NewsSectionDemo() {
  return (
    <div className="w-full max-w-3xl mx-auto p-8 bg-background text-foreground">
      <NewsSection
        title="News"
        href="#"
        allLabel="All news"
        lead={{
          id: "lead",
          kind: "Press release",
          date: "Mar 4, 2026",
          title: "Redrob opens its design system to the public",
          summary:
            "The tokens, components and writing guidelines behind every Redrob product are now available under an open license.",
          href: "#",
        }}
        items={[
          {
            id: "1",
            kind: "Blog",
            date: "Feb 26, 2026",
            title: "Why the news band caps at four stories",
            href: "#",
          },
          {
            id: "2",
            kind: "Paper",
            date: "Feb 18, 2026",
            title: "Measuring contrast across the whole token ramp",
            href: "#",
          },
          {
            id: "3",
            kind: "Press release",
            date: "Feb 9, 2026",
            title: "Redrob Labs raises a seed round led by Harbor Partners",
            href: "#",
          },
        ]}
      />
    </div>
  );
}