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

Last updated: 2026-07-29

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. [Use Case](/blocks/use-case)
5. /
6. Industry Portrait Tiles

# Industry Portrait Tiles[PRO](/pricing)

Four tall image tiles, one per industry, each followed by an explanation and a ruled foot pairing a proof line with a plain link into that sector's work.

ViewCodeDocs

Base UI

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

## Usecase46: Industry Portrait Tiles

Four industries as tall portrait tiles: a photograph, the sector, what the work involves, and a ruled foot carrying the proof line with its own link. No section CTA, so the tiles are the only way out.

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/usecase46.tsx` plus the `badge7` eyebrow it uses.

### Quick start

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

tsxCopy

```
import { Usecase46, usecase46Demo } from "@/components/beste/block/usecase46";

export default function Page() {
  return <Usecase46 {...usecase46Demo} />;
}
```

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

tsxCopy

```
import { Usecase46 } from "@/components/beste/block/usecase46";

export default function Page() {
  return (
    <Usecase46
      badge={{ label: "Fields we know" }}
      heading="Four industries where we already know the questions."
      description="Not because we are specialists, but because we have been wrong in each of them."
      sectors={[
        {
          src: "/sectors/publishing.jpg",
          alt: "Stacked print publications",
          sector: "Publishing",
          description: "Catalogues, journals and the reading order that decides the rest.",
          proof: "Nine titles, four presses",
          href: "/work/publishing",
          linkLabel: "See publishing work",
        },
        {
          src: "/sectors/retail.jpg",
          alt: "Retail interior with monochrome shelving",
          sector: "Retail",
          description: "Rooms, shelves and packaging that has to survive a busy Saturday.",
          proof: "Eighteen rooms opened",
          href: "/work/retail",
          linkLabel: "See retail work",
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type              | Default | Description                                     |
| ----------- | ----------------- | ------- | ----------------------------------------------- |
| badge       | { label: string } | –       | Eyebrow label rendered as a Badge7              |
| heading     | string            | –       | Section heading in the left header column       |
| description | string            | –       | Supporting paragraph in the right header column |
| sectors     | SectorTile\[\]    | \[\]    | Industry tiles, rendered in order               |
| className   | string            | –       | Extra classes for the outer <section>           |

tsCopy

```
type SectorTile = {
  src: string;
  alt: string;
  sector: string;
  description: string;
  proof: string;
  href: string;
  linkLabel: string;
};
```

### Behavior notes

* Each tile is `flex flex-col` with the ruled foot on `mt-auto`, so the proof line and its link stay level across the row however long the descriptions run.
* Every sector carries its own `href` and `linkLabel`, so the section needs no shared CTA at the bottom and each industry can point somewhere different.
* Links are underlined text rather than buttons, which keeps four of them in one row from reading as four competing calls to action.
* Photographs sit above the copy in a `aspect-[4/5]` portrait frame with no hover treatment: the picture is content, not an affordance.
* The grid steps one, two then four columns (`sm:grid-cols-2 lg:grid-cols-4`), so a four-sector set stays a two-by-two block on a tablet instead of squeezing.
* Row gaps are larger than column gaps (`gap-x-6 gap-y-12`), so stacked tiles stay separated when the grid wraps.
* The header is `md:items-end`, so the supporting paragraph sits on the heading's baseline rather than beside its first line.

## More Use Case blocks

[View all Use Case](/blocks/use-case)

[](/block/usecase52)

PRO

usecase52

### Placement Mosaic Grid

Six application tiles alternating between landscape and portrait crops, each captioned on a rule with where the work lands, what it is applied to and the constraint it has to survive.

[](/block/usecase4)

FREE

usecase4

### Industry Solutions Grid

Card grid showcasing industry-specific solutions with icons, images, descriptions, and feature tags. Perfect for highlighting how your platform serves different verticals.

[](/block/usecase18)

PRO

usecase18

### Industry Stats Cards

Card grid showcasing industries with icons, descriptions, and key statistics like company count and user numbers. Perfect for demonstrating market reach across verticals.

[](/block/usecase48)

PRO

usecase48

### Stacked Photo Bands

Three tall photographic bands stacked full width, each carrying an eyebrow, display title, explanation, one outcome figure and its own outline pill link over a tinted scrim; the three-column foot only forms from lg up so the sentence keeps its measure on a tablet.

[](/block/usecase42)

PRO

usecase42

### Multi-Site Locations

A multi-site use case with an eyebrow over a hairline rule, a two-column heading, and three image tiles that each float a live location card above a title and description.

[](/block/usecase45)

PRO

usecase45

### Alternating Scenario Rows

Three use cases as image and text rows, each numbered and carrying a story, two ruled outcome figures and its own outline pill link; pictures stay top-aligned and the side only alternates from lg, so a tablet keeps every image at the top left.

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