# 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/hero173. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

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. [Hero](/blocks/hero)
5. /
6. Bylined Hero With Studio Band

# Bylined Hero With Studio Band[PRO](/pricing)

A hero that sets its position and paragraph against a seal button held at the right edge of the same row, then runs a captioned wide photograph beneath it and closes on one portrait card per writer.

ViewCodeDocs

Base UI

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

## Hero173: Bylined Hero With Studio Band

A hero that sets its position and paragraph against a seal button held at the right edge of the same row, then runs a captioned wide photograph beneath it and closes on one portrait card per writer.

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/hero173.tsx`, the `badge6` component used for the eyebrow and the `button1` seal button beside the heading.

### Quick start

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

tsxCopy

```
import { Hero173, hero173Demo } from "@/components/beste/block/hero173";

export default function AboutPage() {
  return <Hero173 {...hero173Demo} />;
}
```

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

tsxCopy

```
import { Hero173 } from "@/components/beste/block/hero173";

export default function AboutPage() {
  return (
    <Hero173
      eyebrow="Written by two people"
      heading="No editorial team, no ghostwriters, no house voice"
      description="Everything here is written by whichever of us did the work being described."
      button={{ label: "Read what we publish", href: "/writing" }}
      image={{ src: "/studio/table.jpg", alt: "The two of us at a shared table" }}
      caption="The studio, on the Tuesday morning issue 042 went out."
      writers={[
        {
          name: "Maria Santos",
          title: "Partner, brand",
          line: "Writes about pricing, proposals and the conversations before a project starts.",
          avatar: { src: "/people/maria.jpg", alt: "Maria Santos" },
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type         | Default | Description                                      |
| ----------- | ------------ | ------- | ------------------------------------------------ |
| eyebrow     | string       | –       | Badge6 label above the heading                   |
| heading     | string       | –       | The position the page is taking                  |
| description | string       | –       | Paragraph under the heading                      |
| button      | ActionButton | –       | Seal button held at the right of the heading row |
| image       | StudioImage  | –       | Wide photograph under the heading row            |
| caption     | string       | –       | Caption under the photograph                     |
| writers     | Writer\[\]   | \[\]    | One portrait card per writer                     |
| className   | string       | –       | Extra classes for the outer section              |

tsCopy

```
type Writer = {
  name: string;
  title: string;
  line: string;
  avatar: WriterAvatar;
};

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

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

type ActionButton = {
  label: string;
  href: string;
};
```

### Behavior notes

* The heading row is `lg:items-end`, so the button sits on the baseline at the bottom of the paragraph rather than floating level with the first line. Below `lg` it drops under the text.
* The photograph is `16/9` on small screens and `21/9` from `md` up, so the band gets wider as the column does instead of growing taller.
* It is a real `figure` with a `figcaption`, which keeps the caption attached to the picture for anyone reading the markup rather than the layout.
* Writer cards sit on a hairline and take two columns from `md` up. They are plain text, so a name is not a link that goes nowhere.
* The block is a `h1`, since it is written to open a page rather than to sit inside one.

## More Hero blocks

[View all Hero](/blocks/hero)

[](/block/hero166)

PRO

hero166

### Split Headline Hero

An editorial hero that breaks its display heading across two lines and slots a square image tile floating a live payment card into the gap, with the paragraph and action landing under a hairline.

[](/block/hero162)

PRO

hero162

### Indexed Rows Hero

A hero that sets a light display heading and one action against a column of numbered hairline rows, then closes on a full-bleed image band with a live approval request pinned into its corner.

[](/block/hero114)

PRO

hero114

### Collage Hero

Split studio hero with a two-tone headline and a four-image arranged collage.

[](/block/hero172)

PRO

hero172

### Cover Band Hero For The Latest Issue

A tall photographic band with the newest piece set over a rising gradient, its dateline, display title, summary and seal button anchored to the bottom, above a hairline row of the issues before it.

[](/block/hero112)

PRO

hero112

### Editorial Split Hero

Two-column studio hero with a two-tone headline, dual CTAs, tall image and a client wordmark strip.

[](/block/hero165)

PRO

hero165

### Filmstrip Hero

A centered hero closing on an edge-to-edge filmstrip of five frames divided by hairlines, one of which floats a live view switcher instead of a photograph.

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