Team Blog Highlights

Careers30: Team Blog Highlights

A centered heading block above a responsive one-to-three-column grid of article preview cards, where each card is a single Link wrapping an aspect-video cover image, an outline category badge, a title, an excerpt, and an author name with optional role.

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/careers30?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/careers30.tsx, plus the badge shadcn/ui primitive it uses for the eyebrow badge and per-card category label.

Quick start

The installed file exports careers30Demo alongside the block: the exact props behind the preview above. Spread it to get a working blog highlights grid in one line.

import { Careers30, careers30Demo } from "@/components/beste/block/careers30";

export default function Page() {
  return <Careers30 {...careers30Demo} />;
}

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

import { Careers30 } from "@/components/beste/block/careers30";

export default function Page() {
  return (
    <Careers30
      badge={{ label: "From the Team", variant: "secondary" }}
      heading="Stories from the <strong>engineering floor</strong>"
      description="Our team writes about the challenges they solve."
      items={[
        {
          image: { src: "/blog/pipeline.jpg", alt: "Real-time data pipeline" },
          category: "Engineering",
          title: "How We Scaled Our Real-Time Pipeline",
          excerpt: "A deep dive from batch processing to fully streaming.",
          author: { name: "James Kim", role: "Staff Engineer" },
          href: "/blog/pipeline",
        },
      ]}
    />
  );
}

Props

type ArticleItem = {
  image?: { src: string; alt: string };
  category?: string;
  title: string;
  excerpt?: string;
  author?: { name: string; role?: string };
  href?: string;
};

Behavior notes

• The entire header block (badge, heading, description) is only rendered when at least one of badge, heading, or description is truthy; otherwise the grid renders flush to the top.
• heading is injected via dangerouslySetInnerHTML, so inline <strong> markup is supported and every <strong> is recolored to text-primary through a descendant selector.
• Each card is always a Next.js Link; when an item omits href the link falls back to "#", so cards never render as non-navigable elements.
• Within a card the image, category badge, excerpt, author block, and author role are each conditionally rendered, so a bare item with only a title produces a valid card.
• The cover image zooms to scale-105 on hover via a scoped group/careers30 group name, and its wrapper clips the overflow so the zoom stays inside the aspect-video frame.
• The grid is fixed at one column on mobile, sm:grid-cols-2, and lg:grid-cols-3; there is no prop to change the column count.
• badge.variant defaults to "default" when omitted, while the per-card category badge is hard-coded to the "outline" variant and cannot be configured.