Grid with Newsletter Card

Blog14: Grid with Newsletter Card

A centered heading block over a responsive card grid that mixes a newsletter signup card (icon, heading, description, email input, subscribe button) with blog post cards, each showing a linked cover image, an optional first tag, a clamped title and summary, and an author name plus read time.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/blog14?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/blog14?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/blog14.tsx, plus the badge, button, and input shadcn/ui primitives it uses for the eyebrow and post tags, the subscribe button, and the newsletter email field.

Quick start

The installed file exports blog14Demo alongside the block: the exact props behind the preview above. Spread it to get a working blog grid with an embedded newsletter card in one line.

import { Blog14, blog14Demo } from "@/components/beste/block/blog14";

export default function Page() {
  return <Blog14 {...blog14Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Blog14 } from "@/components/beste/block/blog14";

export default function Page() {
  return (
    <Blog14
      badge={{ label: "Blog", variant: "default" }}
      heading="Stories & Updates"
      description="The latest news and insights from our team."
      newsletter={{
        heading: "Subscribe to our newsletter",
        description: "Get the latest articles delivered to your inbox.",
        placeholder: "Enter your email",
        buttonLabel: "Subscribe",
      }}
      posts={[
        {
          image: { src: "/posts/design-systems.jpg", alt: "Design systems" },
          title: "The Future of Design Systems",
          summary: "How design systems evolve to meet complex web apps.",
          readTime: "8 min read",
          author: { name: "Lisa Park", title: "Senior Developer" },
          tags: [{ label: "Design", href: "/blog/design-systems" }],
          href: "/blog/design-systems",
        },
      ]}
    />
  );
}

Props

type Author = {
  name: string;
  title?: string;
  avatar?: { src: string; alt: string };
  href?: string;
};

type Tag = {
  label: string;
  href?: string;
};

type BlogPost = {
  image: { src: string; alt: string };
  title: string;
  summary: string;
  date?: string;
  readTime?: string;
  author?: Author;
  tags?: Tag[];
  href?: string;
};

type Newsletter = {
  heading?: string;
  description?: string;
  placeholder?: string;
  buttonLabel?: string;
};

Behavior notes

• The newsletter card is only rendered when newsletter is passed, and it always occupies the first cell of the grid, pushing every post one slot to the right.
• The grid is md:grid-cols-3 lg:grid-cols-4, so the newsletter card counts against the same column budget as the posts.
• The last two posts (index === posts.length - 1 and posts.length - 2) are hidden below the lg breakpoint via hidden lg:flex, so smaller screens show a shorter list; order this array with the least important posts last.
• The email Input and the "Subscribe" Button are purely presentational: there is no onSubmit, onChange, or onClick handler and no internal state, so capturing the address is entirely up to the integrator.
• Only the first tag is ever displayed (post.tags?.[0]); any additional tags in the array are ignored.
• Card images and titles both link to post.href, falling back to "#" when it is omitted; the image scales on hover via a group/blog14 hover class.
• heading is rendered as plain text with no dangerouslySetInnerHTML, so inline markup like <strong> will not be parsed.
• Both title and summary are clamped to two lines (line-clamp-2), and date is accepted on each post but never rendered, only author.name and readTime appear in the card footer.