Awards & Recognition

About17: Awards & Recognition

A portrait image sits next to a divided vertical list of awards, each row showing a fixed award icon, the award title and awarding organization, and the year flush to the right. A centered header and an optional CTA row bracket the two-column layout. Built for press and credibility sections that need to list accolades chronologically.

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

Base UI flavor

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

This installs the block to components/beste/block/about17.tsx and the badge and button shadcn/ui primitives it depends on.

Quick start

The installed file exports about17Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { About17, about17Demo } from "@/components/beste/block/about17";

export default function Page() {
  return <About17 {...about17Demo} />;
}

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

import { About17 } from "@/components/beste/block/about17";

export default function Page() {
  return (
    <About17
      badge={{ label: "Recognition", variant: "secondary" }}
      heading="Awards and recognition"
      description="We are honored to be recognized for our commitment to design excellence."
      image={{ src: "https://images.unsplash.com/photo-1716024587589-e4a516918a25?w=800&h=1000&fit=crop", alt: "Our office" }}
      awards={[
        { title: "Best Developer Tool", organization: "Product Hunt Golden Kitty", year: "2025" },
        { title: "Design System of the Year", organization: "Awwwards", year: "2025" },
        { title: "Top 50 Open Source Projects", organization: "GitHub Accelerator", year: "2024" },
      ]}
      buttons={[{ label: "Read Press Kit", href: "https://beste.co" }]}
    />
  );
}

Props

type AwardItem = { title: string; organization: string; year: string };

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

• Every award row uses the same fixed Award icon from lucide-react; AwardItem has no icon field, so awards cannot be given distinct icons per entry.
• Rows are separated with divide-y rather than individual card borders, and year is right-aligned as plain text rather than a badge or pill.
• The image and award-list columns are an even lg:grid-cols-[1fr_1fr] split, unlike sibling blocks (e.g. About13, About19) that weight one side heavier.
• The image container is aspect-[3/4] on mobile and lg:aspect-auto at desktop width, letting it stretch to match the award list's height through the grid's default row-stretch rather than holding a fixed ratio.
• Awards render in array order with no sorting by year, so chronological ordering (e.g. newest first) is the caller's responsibility.