Studio Ethos

Agency18: Studio Ethos

A dark, inverted panel that pairs a bold ethos statement on the left with a ruled list of concrete studio commitments on the right, each marked with a checkmark badge.

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

Base UI flavor

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

This installs the block to components/beste/block/agency18.tsx, the badge6 component it uses for the eyebrow, and its dependencies.

Quick start

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

import { Agency18, agency18Demo } from "@/components/beste/block/agency18";

export default function AboutPage() {
  return <Agency18 {...agency18Demo} />;
}

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

import { Agency18 } from "@/components/beste/block/agency18";

export default function AboutPage() {
  return (
    <Agency18
      label="The Studio Ethos"
      statement="We build work that <strong>compounds in value</strong> long after launch."
      commitments={[
        {
          title: "Strategy before pixels",
          description: "Every engagement opens with a positioning sprint.",
        },
        {
          title: "One senior team, start to finish",
          description: "The people who pitch you are the people who build for you.",
        },
        {
          title: "Designed to be measured",
          description: "We ship with the analytics that prove what the creative moved.",
        },
      ]}
    />
  );
}

Props

type Commitment = { title: string; description: string };

Behavior notes

• The whole block is an inverted panel (bg-foreground text-background), so Badge6 is passed labelClassName="text-background/60" to stay legible against the dark fill, and the commitments' description text uses text-background/60 for the same reason.
• statement is injected via dangerouslySetInnerHTML and expects inline <strong> tags to highlight; highlighted spans render in text-primary. The demo's statement also uses the — HTML entity rather than a literal dash character.
• Commitment rows are divided by border-background/15 (not the standard border token), matching the panel's inverted surface; the last row drops its bottom border and padding.
• Each commitment's icon is a fixed checkmark (Check from lucide-react) inside a bg-primary/20 circle; there is no way to swap the icon per row.