# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/blog47. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-31

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Blog](/blocks/blog)
5. /
6. Bulletin Columns

# Bulletin Columns[PRO](/pricing)

A newsroom bulletin with a square eyebrow, an image-free lead story split across a 7/5 grid with a standfirst, byline, and a seal button, then three illustrated columns with hover-zoom images below a single hairline rule.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/blog47`

## Blog47: Bulletin Columns

A newsroom bulletin section that opens with a `Badge6` eyebrow, then gives the first article a full-width lead treatment: a large bold headline on the left of a seven-and-five grid with its summary, byline, and a `Button1` seal button stacked in the narrow right column. Below a single hairline rule, the remaining articles run as three illustrated cards, so the lead and the columns are both derived from one `items` array by index rather than from separate props.

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 NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/blog47?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/blog47.tsx` and its dependencies, including the `Badge6` and `Button1` components it renders.

### Quick start

The installed file exports `blog47Demo` alongside the block: the exact props behind the preview above. Spread it to get a working bulletin in one line.

tsxCopy

```
import { Blog47, blog47Demo } from "@/components/beste/block/blog47";

export default function Page() {
  return <Blog47 {...blog47Demo} />;
}
```

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

tsxCopy

```
import { Blog47 } from "@/components/beste/block/blog47";

export default function Page() {
  return (
    <Blog47
      label="Newsroom"
      labels={{ readMore: "Read the full statement" }}
      items={[
        {
          category: "Press release",
          title: "The co-operative approves a shared packhouse for the valley",
          summary: "Members voted at the spring meeting to fund a grading and cold-store facility.",
          date: "March 4, 2026",
          author: { name: "Maria Santos", title: "Tech Lead" },
          href: "/news/packhouse",
        },
        {
          image: { src: "/news/market-hall.jpg", alt: "Crates of squash at an open-air farm market" },
          category: "Trade",
          title: "Winter opening lifts market hall takings by 12 percent",
          summary: "Stallholder receipts stayed above forecast for a fourth quarter.",
          date: "February 26, 2026",
          author: { name: "David Chen" },
          href: "/news/market-hall",
        },
        {
          image: { src: "/news/tunnels.jpg", alt: "Two growers with a laptop outside a polytunnel" },
          category: "Operations",
          title: "Propagation moves to the Ashfield tunnels before spring plant-out",
          summary: "The transfer adds nine weeks of protected growing.",
          date: "February 11, 2026",
          author: { name: "Lisa Park" },
          href: "/news/propagation",
        },
      ]}
    />
  );
}
```

### Props

| Prop      | Type                  | Default | Description                                                                         |
| --------- | --------------------- | ------- | ----------------------------------------------------------------------------------- |
| label     | string                | –       | Badge6 eyebrow at the top of the section; omitted entirely when absent              |
| items     | Article\[\]           | \[\]    | Articles for the section; the first becomes the lead, the rest fill the column grid |
| labels    | { readMore?: string } | {}      | Label on the lead's Button1; the button is dropped when unset                       |
| className | string                | –       | Extra classes merged onto the outer <section>                                       |

tsCopy

```
type Article = {
  image?: { src: string; alt: string };
  category: string;
  title: string;
  summary: string;
  date: string;
  author: Author;
  href: string;
};

type Author = {
  name: string;
  title?: string;
  avatar?: { src: string; alt: string };
  href?: string;
};
```

### Behavior notes

* The split is positional: `items[0]` is rendered as the lead and `items.slice(1)` fills the grid below. The lead prints category, headline, summary, byline, and the seal button but never an image, so an `image` supplied on the first item is not displayed. With an empty `items` array the whole lead block is skipped and only the eyebrow and the rule remain.
* Below `md` the section is a single stacked column. At `md` the lead becomes a 12-column grid split 7 for the headline and 5 for the summary column, and the lower grid becomes `md:grid-cols-3`. That grid is fixed at three columns, so the demo's four items fill one lead plus one full row; a fifth item wraps to a second row and fewer than four leave trailing empty columns.
* Each column card is a single `Link` wrapping the whole card. The cover image is rendered only when `item.image` is present, in an `aspect-[4/3]` clip that scales to `scale-105` on hover under a `motion-safe:` guard, and the same group hover tints the card title to `text-primary`.
* The button renders only when `labels.readMore` is set, and it targets the lead's own `href`, the same destination as the headline. `Button1` is used at its stock size; the surrounding column is sized to fit it rather than the other way round.
* Only `author.name` is read from `Author`; `title`, `avatar`, and `href` exist on the type but are never rendered. Bylines are composed as `By {name} · {date}` with the date string printed verbatim and no date formatting applied.

## More Blog blocks

[View all Blog](/blocks/blog)

[](/block/blog46)

PRO

blog46

### Front Page Columns

A newsroom front page with a heading, a divider, and a square eyebrow over a hairline rule, a wide lead story whose headline and standfirst split across a twelve column band under a panoramic image, and the remaining articles set as three bordered text cards.

[](/block/blog44)

PRO

blog44

### Newsroom Lead and Index

A newsroom listing with a heading, a divider, and an eyebrow over a hairline rule, a two-column lead story with a large image, the remaining stories stacked as numbered ruled rows with square thumbnails, and a seal button to the full archive.

[](/block/blog54)

PRO

blog54

### Pinned Lead Newsroom

A twelve-column newsroom band under a parenthetical eyebrow, pairing one lead story carrying a pinned marker, a large image, and a byline block with a stack of four ruled secondary rows, closing on a pill button to the archive.

[](/block/blog48)

PRO

blog48

### Quad Grid

A newsroom listing with a square eyebrow, a two-column heading band over a hairline rule, and four equally weighted stories as bordered cards, each linking through a hover-zoom image, a category kicker, a bold headline, a summary, and a byline pinned to the card foot.

[](/block/blog43)

PRO

blog43

### Editorial Article Grid

A blog listing with an eyebrow over a hairline rule, a two-column heading, and three linked article cards with a hover-zoom image, a category label, a title, an excerpt, and byline.

[](/block/blog52)

PRO

blog52

### Newsroom Masonry

A CSS-columns masonry of linked newsroom cards under a parenthetical eyebrow and a large heading, where the image aspect ratio cycles by position so the wall keeps an uneven, magazine-like rhythm.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.