# Featured Award Highlight

> A spotlight block centered on a single major award with its name, year, and a short note. Use it to lead with your most impressive recognition.

A shadcn/ui block from the [@shadcn-ui-blocks](https://www.shadcn-ui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-ui-blocks/portfolio-portfolio-awards-and-recognition-featured-award-highlight).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/portfolio-portfolio-awards-and-recognition-featured-award-highlight
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/portfolio-portfolio-awards-and-recognition-featured-award-highlight-light-87739d8e615fcef6.png
- Registry item: https://www.shadcn-ui-blocks.com/r/portfolio-portfolio-awards-and-recognition-featured-award-highlight.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.shadcn-ui-blocks.com/r/portfolio-portfolio-awards-and-recognition-featured-award-highlight.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `class-variance-authority`, `lucide-react`, `radix-ui`

## Files

### `components/blocks/portfolio/portfolio-awards-and-recognition/featured-award-highlight.tsx`

```tsx
import { Button } from '@/components/ui/button';
import { ArrowRight } from 'lucide-react';

export default function AwardsAndRecognitionFeatured() {
  const mainAward = {
    name: 'Web Excellence Award 2023',
    organization: 'International Digital Experience Awards',
    description:
      'Recognized for creating exceptional digital experiences that combine innovative interaction design with seamless user experiences. This award celebrates the highest standards in web design and development, honoring projects that demonstrate technical excellence, creative innovation, and measurable results.',
    image:
      'https://images.unsplash.com/photo-1560179707-f14e90ef3623?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    logo: 'https://images.unsplash.com/photo-1569012871812-f38ee64cd54c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    date: 'November 2023',
    link: '#',
  };

  const secondaryAward = {
    name: 'UX Design Certificate of Excellence',
    organization: 'Design Industry Association',
    description:
      'Awarded for demonstrating outstanding proficiency in user-centered design methodologies and creating accessible, inclusive digital experiences.',
    image:
      'https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    logo: 'https://images.unsplash.com/photo-1567427361984-0cbe7396fc6c?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    date: 'June 2023',
    link: '#',
  };

  return (
    <section className="py-16 md:py-24">
      <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
        {/* Header */}
        <div className="mb-16 text-center">
          <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
            Award-Winning Work
          </h2>
          <p className="text-muted-foreground mx-auto max-w-3xl text-lg">
            Recognized excellence that demonstrates my commitment to quality and
            innovation.
          </p>
        </div>

        {/* Main Award */}
        <div className="bg-card mx-auto mb-16 max-w-5xl overflow-hidden rounded-xl border shadow-sm">
          <div className="grid md:grid-cols-2">
            {/* Award Image */}
            <div className="relative h-64 overflow-hidden md:h-auto">
              <img
                src={mainAward.image}
                alt={mainAward.name}
                className="object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
              <div className="absolute bottom-4 left-4">
                <div className="border-background bg-background relative h-16 w-16 overflow-hidden rounded-lg border-2">
                  <img
                    src={mainAward.logo}
                    alt={mainAward.organization}
                    className="object-cover"
                  />
                </div>
              </div>
            </div>

            {/* Award Details */}
            <div className="p-6 md:p-8">
              <div className="text-muted-foreground mb-2 text-sm font-medium">
                {mainAward.date} • {mainAward.organization}
              </div>
              <h3 className="mb-4 text-2xl font-bold md:text-3xl">
                {mainAward.name}
              </h3>
              <p className="text-muted-foreground mb-6">
                {mainAward.description}
              </p>
              <Button asChild>
                <a href={mainAward.link}>
                  View Award <ArrowRight className="ml-2 h-4 w-4" />
                </a>
              </Button>
            </div>
          </div>
        </div>

        {/* Secondary Award */}
        <div className="bg-card mx-auto max-w-5xl overflow-hidden rounded-xl border shadow-sm">
          <div className="grid md:grid-cols-2">
            {/* Award Details */}
            <div className="order-2 p-6 md:order-1 md:p-8">
              <div className="text-muted-foreground mb-2 text-sm font-medium">
                {secondaryAward.date} • {secondaryAward.organization}
              </div>
              <h3 className="mb-4 text-2xl font-bold md:text-3xl">
                {secondaryAward.name}
              </h3>
              <p className="text-muted-foreground mb-6">
                {secondaryAward.description}
              </p>
              <Button variant="outline" asChild>
                <a href={secondaryAward.link}>
                  Learn More <ArrowRight className="ml-2 h-4 w-4" />
                </a>
              </Button>
            </div>

            {/* Award Image */}
            <div className="relative order-1 h-64 overflow-hidden md:order-2 md:h-auto">
              <img
                src={secondaryAward.image}
                alt={secondaryAward.name}
                className="object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
              <div className="absolute right-4 bottom-4">
                <div className="border-background bg-background relative h-16 w-16 overflow-hidden rounded-lg border-2">
                  <img
                    src={secondaryAward.logo}
                    alt={secondaryAward.organization}
                    className="object-cover"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
```

### `components/ui/button.tsx`

```tsx
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/80",
        outline:
          "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
        ghost:
          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
        destructive:
          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default:
          "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        icon: "size-9",
        "icon-xs":
          "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
        "icon-sm":
          "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
        "icon-lg": "size-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Button({
  className,
  variant = "default",
  size = "default",
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot.Root : "button"

  return (
    <Comp
      data-slot="button"
      data-variant={variant}
      data-size={size}
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
```