A homepage news band that shows one lead story and up to three more headlines, each with a date, kind label and link.
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>
);
}