# 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/blog46. 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. Front Page Columns

# Front Page Columns[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

## Blog46: Front Page Columns

A newsroom front page built on the Polaris section header: the heading, a vertical divider, and a `Badge6` eyebrow share one row above a hairline rule. The first article is promoted to a wide lead whose headline and standfirst split across a twelve-column band under a panoramic image, and every remaining article is set as a bordered text 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 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/blog46?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

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

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

### Quick start

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

tsxCopy

```
import { Blog46, blog46Demo } from "@/components/beste/block/blog46";

export default function Page() {
  return <Blog46 {...blog46Demo} />;
}
```

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

tsxCopy

```
import { Blog46 } from "@/components/beste/block/blog46";

export default function Page() {
  return (
    <Blog46
      heading="Harbor Ledger"
      label="June 2026"
      items={[
        {
          image: { src: "/news/terminal.jpg", alt: "Container cranes at dawn" },
          category: "Operations",
          title: "The east terminal reopens three weeks ahead of schedule",
          summary:
            "Dredging finished on 2 June and the first post-panamax call is booked for the end of the month.",
          date: "June 4, 2026",
          author: { name: "Elena Rourke", title: "Operations Correspondent" },
          href: "/news/east-terminal",
        },
        {
          category: "Markets",
          title: "Freight rates settle after a volatile spring",
          summary:
            "Spot pricing on the northern lane closed the quarter within four percent of its January level.",
          date: "May 29, 2026",
          author: { name: "Tomas Vidal", title: "Markets Editor" },
          href: "/news/freight-rates",
        },
        {
          category: "Governance",
          title: "Port authority publishes its first tariff review in a decade",
          summary:
            "The consultation runs until September and covers berthing, storage, and pilotage in one document.",
          date: "May 21, 2026",
          author: { name: "Priya Nair" },
          href: "/news/tariff-review",
        },
      ]}
    />
  );
}
```

### Props

| Prop      | Type        | Default | Description                                                                       |
| --------- | ----------- | ------- | --------------------------------------------------------------------------------- |
| heading   | string      | –       | Section heading printed to the left of the divider                                |
| label     | string      | –       | Badge6 eyebrow printed to the right of the divider                                |
| items     | Article\[\] | \[\]    | Articles for the page; the first becomes the lead story and the rest become cards |
| className | string      | –       | Extra classes merged onto the outer <section>                                     |

tsCopy

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

type ArticleImage = {
  src: string;
  alt: string;
};

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

### Behavior notes

* The block splits `items` by position: index 0 renders as the lead and `items.slice(1)` fills the card grid. Both halves are conditionally rendered, so a single-item array prints only the lead, and an empty array leaves just the header and its rule.
* The card grid is a plain three-up `md:grid-cols-3`. Counts other than four still lay out correctly, wrapping into further rows of three; each card is its own bordered surface, so no vertical divider logic is needed and nothing has to be recalculated per row.
* Cards are flex columns with the byline pushed to the foot by `mt-auto`, so a short summary and a long one still produce cards of equal height with their bylines aligned across the row.
* The lead image is optional and its aspect ratio widens from `aspect-video` to `md:aspect-[21/9]`; on hover it scales to `scale-105` behind a `motion-safe:` guard, and the headline shifts to `text-primary` on the same group hover. The headline and the category/summary/byline pair sit in a twelve-column grid at `md` (7 and 5 columns) and stack in source order below it.
* Bylines are plain text built by an internal `formatByline` helper as `By {name}, {title} · {date}`, with the title segment dropped when `author.title` is absent. `author.avatar` and `author.href` are accepted by the type but are not rendered, since the story link already wraps the byline.

## More Blog blocks

[View all Blog](/blocks/blog)

[](/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/blog47)

PRO

blog47

### Bulletin Columns

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.

[](/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/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/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.

[](/block/blog27)

PRO

blog27

### Newspaper Editorial Style

Classic newspaper layout with serif fonts and bordered headline. Large main story on left, stacked secondary stories on right with dividers.

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