Press And Brand KitPRO

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.

News41: Press And Brand Kit

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.

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

Base UI flavor

bash
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.

Quick start

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.

tsx
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:

tsx
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."
    />
  );
}

Props

PropTypeDefaultDescription
badge{ label: string }Eyebrow above the hairline rule, rendered through Badge23
headingstringSection heading in the left column of the header
descriptionstringSupporting paragraph, right-aligned from md up
assetsTitlestringHeading above the file list
assetsAsset[][]Downloadable files as linked rows
coloursTitlestringHeading above the swatch column
swatchesSwatch[][]Palette entries with their usage note
rulesTitlestringHeading above the two rule cards
rulesRule[][]Usage rules, allowed and not allowed
button{ label: string; href: string }Whole-kit download action
contactstringPress contact line under the swatches
classNamestringExtra classes for the outer section
ts
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;
};

Behavior notes

More News blocks

View all News
PRO

news36

Press Coverage List

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.

PRO

news32

Magazine Cover

Editorial magazine layout with dramatic cover story, serif typography, author bylines, and featured story grid.

PRO

news4

Magazine News Grid

Magazine-style news section with large featured article and 2x2 grid. Dynamic category filtering.

PRO

news26

Opinion & Editorial

Opinion pieces with pull quotes, author profiles, and category badges. Editorial-style layout.

PRO

news7

Newspaper Style

Classic newspaper layout with serif typography, featured article spanning two columns, and sidebar articles.

PRO

news31

Bento News Grid

Asymmetric bento box layout with large hero, gradient stat cards, and image tiles in a visually striking grid.