A media kit listing downloadable assets as linked hairline rows with their formats, a swatch column naming each colour and where it is used, and two usage rules set as an allowed and a not-allowed card.
A media kit listing downloadable assets as linked hairline rows with their formats, a swatch column naming each colour and where it is used, and two usage rules set as an allowed and a not-allowed card.
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/news41?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/news41?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/news41.tsx plus the badge23 and button21 components it uses for the eyebrow and the download action.
The installed file exports news41Demo alongside the block: the exact props behind the preview above. Spread it to get a working media kit in one line.
import { News41, news41Demo } from "@/components/beste/block/news41";
export default function PressPage() {
return <News41 {...news41Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { News41 } from "@/components/beste/block/news41";
export default function PressPage() {
return (
<News41
badge={{ label: "Media kit" }}
heading="Everything you need to write about us correctly"
description="Take what you need without asking."
assetsTitle="Files"
assets={[
{
name: "Wordmark",
detail: "Lowercase, in black and in white.",
format: "SVG and PNG",
href: "/press/wordmark.zip",
},
{
name: "Company one-pager",
detail: "Founding date, headcount, funding, and the numbers we publish.",
format: "PDF, 1 page",
href: "/press/one-pager.pdf",
},
]}
coloursTitle="Colours"
swatches={[
{ name: "Ink", value: "#111111", usage: "Type and inverted panels", className: "bg-foreground" },
{ name: "Accent", value: "#2F6BFF", usage: "One accent, used sparingly", className: "bg-primary" },
]}
rulesTitle="Two rules"
rules={[
{
title: "Set the wordmark in lowercase",
description: "It is lowercase in the product and in the logo file.",
allowed: true,
},
{
title: "Do not recolour the wordmark",
description: "Black or white only.",
allowed: false,
},
]}
button={{ label: "Download the whole kit", href: "/press/kit.zip" }}
contact="Anything else: press@example.com, answered by a founder within a working day."
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow above the hairline rule, rendered through Badge23 |
heading | string | – | Section heading in the left column of the header |
description | string | – | Supporting paragraph, right-aligned from md up |
assetsTitle | string | – | Heading above the file list |
assets | Asset[] | [] | Downloadable files as linked rows |
coloursTitle | string | – | Heading above the swatch column |
swatches | Swatch[] | [] | Palette entries with their usage note |
rulesTitle | string | – | Heading above the two rule cards |
rules | Rule[] | [] | Usage rules, allowed and not allowed |
button | { label: string; href: string } | – | Whole-kit download action |
contact | string | – | Press contact line under the swatches |
className | string | – | Extra classes for the outer section |
type ActionLink = {
label: string;
href: string;
};
type Asset = {
name: string;
detail: string;
format: string;
href: string;
};
type Swatch = {
name: string;
value: string;
usage: string;
className: string;
};
type Rule = {
title: string;
description: string;
allowed: boolean;
};Swatch carries both a value string and a className. The class is what actually paints the chip, using your theme tokens so the swatches stay correct in dark mode, while the hex is the number a designer copies. Keeping the two in step is on you.border border-border to its class.allowed flips a rule card between the accent border on bg-card and the plain border on bg-muted. Nothing enforces one of each, so it is on you to pair them.h4, since they sit under the h3 that labels the rules group.Link elements. The download arrow uses a named group, group/news41, rather than the bare group class, and its shift is wrapped in motion-safe:.tabular-nums so the hex column stays aligned, and contact carries its own border-t to close the column.news36
A press section built around a soft panel holding the standout quote and its publication, followed by hairline coverage rows that align publication, headline, and date, and a press kit action to close.
news32
Editorial magazine layout with dramatic cover story, serif typography, author bylines, and featured story grid.
news4
Magazine-style news section with large featured article and 2x2 grid. Dynamic category filtering.
news26
Opinion pieces with pull quotes, author profiles, and category badges. Editorial-style layout.