Edge Label About shadcn/tailwind block

About this block

Edge Label AboutPRO

Asymmetric about with a bleeding image, vertical edge label, offset copy and an inline stats row.

About36: Edge Label About

Asymmetric about section: an image bleeds past its grid track on the left with a vertical, rotated edge label running up its side, and an offset text column overlaps the image on large screens via negative margins and z-index, closing with an inline stats row.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

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

bash

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

Base UI flavor

bash

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

This installs the block to components/beste/block/about36.tsx, the badge6 and button1 components it uses for the eyebrow label and the CTA, and its dependencies.

Quick start

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

tsx

import { About36, about36Demo } from "@/components/beste/block/about36";

export default function Page() {
  return <About36 {...about36Demo} />;
}

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

tsx

import { About36 } from "@/components/beste/block/about36";

export default function Page() {
  return (
    <About36
      label="The Studio"
      heading="We build brands that <strong>refuse to blend in.</strong>"
      description="Polaris is a creative studio working at the seam of strategy and craft."
      button={{ label: "Inside the Studio", href: "https://beste.co" }}
      image={{
        src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=900&h=1200&fit=crop",
        alt: "Studio team reviewing brand work",
      }}
      edgeWord="ABOUT"
      stats={[
        { value: "12", label: "Years of practice" },
        { value: "180+", label: "Brands shaped" },
        { value: "9", label: "Design awards" },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
`label`	`string`	–	Eyebrow label rendered inside the badge
`heading`	`string`	–	Rendered via `dangerouslySetInnerHTML`; `<strong>` spans render muted
`description`	`string`	–	Paragraph below the heading
`button`	`ActionLink`	–	CTA below the description
`image`	`ImageItem`	–	Single bleeding portrait image, not an array
`edgeWord`	`string`	–	Vertical rotated label along the image's edge; `lg` and up only
`stats`	`StatItem[]`	`[]`	Inline stat row at the bottom of the text column
`className`	`string`	–	Extra classes for the outer `<section>`

type ActionLink = { label: string; href: string };
type ImageItem = { src: string; alt: string };
type StatItem = { value: string; label: string };

Behavior notes

edgeWord only renders at lg and above (hidden ... lg:block); below that breakpoint it disappears entirely rather than reflowing horizontally.
The image column bleeds past its grid track with lg:-mr-16 lg:pl-16, while the text column sits above it at z-10 with lg:pl-24, so on large screens the copy visually overlaps the image's right edge.
stats render inline in a single row (not a grid) with a left border between entries, applied to every item except the first, so the row grows to fit however many stats are passed.
image is a single object, unlike several sibling About blocks (about33, about39, about40) that accept an images array.

More About blocks

View all About

PRO

about46

About Strip

PRO

about5

Image & Text Split

PRO

about13

We build brands that refuse to blend in.