Polaris is a fourteen-person studio working out of a converted print house. We pair strategists with type-obsessed designers, then ship identity systems, campaigns, and the occasional billboard nobody asked for but everybody remembers.
14
People, one floor, zero account managers.
19yr
Of putting craft ahead of the brief.
Magazine about where copy is interleaved between two staggered offset images.
Magazine-style about section built on a 12-column grid: copy is interleaved between two staggered, offset portrait images using explicit row/column placement and negative margins to make the images overlap the text band.
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.
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/about40?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/about40?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/about40.tsx, the badge6 and button1 components it uses for the eyebrow label and the CTA, and its dependencies.
The installed file exports about40Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { About40, about40Demo } from "@/components/beste/block/about40";
export default function Page() {
return <About40 {...about40Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { About40 } from "@/components/beste/block/about40";
export default function Page() {
return (
<About40
label="Inside Polaris"
heading="We build brands that <strong>refuse to blend in</strong>."
description="Polaris is a fourteen-person studio working out of a converted print house."
button={{ label: "Read the studio file", href: "https://beste.co" }}
images={[
{ src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1000&h=1250&fit=crop", alt: "Studio table reviewing layouts" },
{ src: "https://images.unsplash.com/photo-1531482615713-2afd69097998?w=800&h=1067&fit=crop", alt: "Open studio workspace" },
]}
stats={[
{ value: "14", label: "People, one floor, zero account managers." },
{ value: "19yr", label: "Of putting craft ahead of the brief." },
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
label | string | – | Eyebrow label rendered inside the badge |
heading | string | – | Rendered via dangerouslySetInnerHTML; <strong> spans render text-primary |
description | string | – | Paragraph in the lower-left gap |
button | ActionLink | – | CTA below the description and stats |
images | ImageItem[] | [] | First two entries become imageA/imageB |
stats | StatItem[] | [] | Rendered as a fixed 2-column grid |
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 };images entries are used, destructured as imageA and imageB; further entries are ignored, and if imageB is missing the layout still reserves its grid track as empty space.md:row-start-1/md:row-start-2, md:col-start-7) instead of flowing in document order, and imageB is pulled up with md:-mt-20 so it overlaps the copy block above it.group-hover/about40:scale-105) over a 500ms transition.stats render in a fixed 2-column grid regardless of stats.length, matching the two stats used in the demo.ArrowUpRight instead of the component's default ArrowRight.