Scope section listing what a project actually ships: three ruled columns, each with a track title, a one-line summary and a dotted-rule inventory of deliverables, closed by a note and a pill CTA.
Scope section that answers the only question clients actually ask: what arrives at the end. Three ruled columns each carry a track title, a one-line summary and a dotted-rule inventory of deliverables, with a caveat note and a pill CTA closing the block.
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/feature245?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/feature245?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/feature245.tsx plus the badge7 eyebrow and button12 pill button it uses.
The installed file exports feature245Demo alongside the block: the exact props behind the preview above. Spread it to get a working scope section in one line.
import { Feature245, feature245Demo } from "@/components/beste/block/feature245";
export default function Page() {
return <Feature245 {...feature245Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Feature245 } from "@/components/beste/block/feature245";
export default function Page() {
return (
<Feature245
badge={{ label: "What you get" }}
heading="Everything that leaves the studio, listed before we start."
description="The full inventory of files, systems and documents."
groups={[
{
title: "Identity",
summary: "The mark and the rules that keep it honest.",
items: ["Primary and reduced wordmark", "Type system with licensing sorted"],
},
]}
button={{ label: "Request the full scope", href: "/scope" }}
labels={{ note: "Tracks can be booked separately." }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow label rendered as a Badge7 |
heading | string | – | Section heading in the left column |
description | string | – | Supporting paragraph, right-aligned from md up |
groups | DeliverableGroup[] | [] | One ruled column per track |
button | ActionButton | – | Pill CTA on the closing rule, rendered as Button12 |
labels | Feature245Labels | {} | Fixed strings that are not content: the closing note |
className | string | – | Extra classes for the outer <section> |
type DeliverableGroup = {
title: string;
summary: string;
items: string[];
};
type ActionButton = {
label: string;
href: string;
};
type Feature245Labels = {
note?: string;
};border-t border-dotted rule, which reads as a lighter tier than the solid rule closing the column and keeps a twelve-item list from turning into a boxed table.border-t row with justify-between, and wrap onto separate lines below sm.h3 under the section h2, so a page with several of these blocks keeps a valid heading outline.feature251
Three soft cards, each floating its own media piece over a dotted field before an eyebrow, a title, an explanation and a ruled delivery note, laid out as a plain grid with no horizontal scrolling.
feature246
Capability section with a row of pill filters that swap the list below: each entry becomes a ruled three-column row holding the title, an explanation and the typical duration pinned right.
feature224
Two-column split with an eyebrow, big heading, description, and CTA on the left and a checklist of capabilities with rounded check seals on the right.
feature243
A feature with an eyebrow over a hairline rule, a two-column heading, and three bordered cards that each float a compact live micro-asset above a title and description.