# Feature Bento

> One large accent tile, three light tiles and a dark closer. Built for five features, with optional figures.

- **Slug:** `feature-bento`
- **Kind:** section · **Category:** Features
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/ui/components/feature-bento
- **All files in one bundle:** https://viewership.ai/ui/components/feature-bento.bundle.txt
- **Structured JSON:** https://viewership.ai/ui/components/feature-bento.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/ui/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/feature-bento/`:

   - `FeatureBento.astro` (raw: https://viewership.ai/ui/raw/feature-bento/FeatureBento.astro.txt)

3. Copy its registry dependencies, each into its own sibling folder under `src/components/viewership/`:

   - `icon`: `Icon.astro`, `icons.ts` (docs: https://viewership.ai/ui/components/icon.md)

npm packages: none.

## Usage

```astro
---
import FeatureBento from "../components/viewership/feature-bento/FeatureBento.astro";
---

<FeatureBento />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FeatureBento from "./FeatureBento.astro";
---

<FeatureBento
  title="Built to"
  accent="outlast the trend."
  items={[
    { title: "Repairs for life", body: "Send any pack back. We patch, re-stitch or replace the part and return it fast.", icon: "shield", stat: "2 days" },
    { title: "Small batches", body: "Forty runs a year, each inspected by hand.", icon: "layers" },
    { title: "Honest specs", body: "Weights and ratings measured by us.", icon: "chart" },
    { title: "Trail-tested", body: "Guides carry every prototype for a season.", icon: "users" },
    { title: "Resale built in", body: "Trade in, we refurbish, someone else heads out.", icon: "globe" },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | Section headline. |
| `accent` | `string` |  | Closing words of the headline, drawn in the theme's accent style. |
| `intro` | `string` |  | Supporting paragraph. |
| `items` | `{ title: string; body: string; icon?: IconName; stat?: string }[]` |  | Five features; the first leads. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/feature-bento/FeatureBento.astro`

```astro
---
/**
 * FeatureBento: one large accent tile and four smaller ones. Built for five
 * items; the first leads. Icons are optional.
 *
 * @example
 * <FeatureBento title="Built to" accent="outlast the trend." items={[
 *   { title: "Repairs for life", body: "...", icon: "shield" },
 * ]} />
 */
import Icon from "../icon/Icon.astro";
import type { IconName } from "../icon/icons";

interface Item {
  title: string;
  body: string;
  icon?: IconName;
  /** A figure set large in the tile, e.g. "2 days". */
  stat?: string;
}
interface Props {
  title: string;
  accent?: string;
  intro?: string;
  items: Item[];
  as?: "h2" | "h3";
  class?: string;
}

const { title, accent, intro, items, as: Heading = "h2", class: className } = Astro.props;
---

<section class:list={["vs-feature-bento", className]}>
  <div class="vs-feature-bento__inner">
    <header>
      <Heading class="vs-display vs-feature-bento__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
      {intro && <p class="vs-feature-bento__intro">{intro}</p>}
    </header>
    <ul class="vs-feature-bento__grid">
      {
        items.map((item) => (
          <li class="vs-feature-bento__tile">
            {item.icon && (
              <span class="vs-feature-bento__icon">
                <Icon name={item.icon} size={20} />
              </span>
            )}
            <div class="vs-feature-bento__text">
              {item.stat && <p class="vs-display vs-feature-bento__stat">{item.stat}</p>}
              <h3 class="vs-feature-bento__name">{item.title}</h3>
              <p class="vs-feature-bento__body">{item.body}</p>
            </div>
          </li>
        ))
      }
    </ul>
  </div>
</section>

<style>
  .vs-feature-bento {
    container-type: inline-size;
    background: var(--vs-page);
    color: var(--vs-ink);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-feature-bento__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-feature-bento__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-feature-bento__intro {
    max-width: 32rem;
    margin: 1.25rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-feature-bento__grid {
    display: grid;
    gap: 12px;
    margin: clamp(32px, 6cqi, 64px) 0 0;
    padding: 0;
    list-style: none;
  }
  .vs-feature-bento__tile {
    display: flex;
    min-height: 180px;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    border: var(--vs-border-w) solid var(--vs-line);
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-sm);
  }
  .vs-feature-bento__icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vs-line-strong);
    border-radius: var(--vs-radius-pill);
    color: var(--vs-ink);
  }
  .vs-feature-bento__stat {
    margin-bottom: 12px;
    font-size: clamp(2.5rem, 6cqi, 4rem);
    line-height: 0.95;
  }
  .vs-feature-bento__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .vs-feature-bento__body {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }

  /* The lead tile */
  .vs-feature-bento__tile:first-child {
    min-height: 300px;
    border-color: var(--vs-accent);
    background: var(--vs-accent);
    color: var(--vs-on-accent);
    box-shadow: var(--vs-pop-shadow, var(--vs-shadow-sm));
  }
  .vs-feature-bento__tile:first-child .vs-feature-bento__body {
    color: inherit;
    opacity: 0.85;
  }
  .vs-feature-bento__tile:first-child .vs-feature-bento__name {
    font-size: 1.5rem;
  }
  .vs-feature-bento__tile:first-child .vs-feature-bento__icon {
    border-color: color-mix(in srgb, var(--vs-on-accent) 40%, transparent);
    color: inherit;
  }
  /* The last tile goes dark for rhythm */
  .vs-feature-bento__tile:last-child:not(:first-child) {
    border-color: var(--vs-ink);
    background: var(--vs-ink);
    color: var(--vs-ink-inverse);
  }
  .vs-feature-bento__tile:last-child:not(:first-child) .vs-feature-bento__body {
    color: inherit;
    opacity: 0.7;
  }
  .vs-feature-bento__tile:last-child:not(:first-child) .vs-feature-bento__icon {
    border-color: color-mix(in srgb, var(--vs-ink-inverse) 35%, transparent);
    color: inherit;
  }

  @container (min-width: 620px) {
    .vs-feature-bento__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .vs-feature-bento__tile:first-child {
      grid-row: span 2;
    }
  }
  @container (min-width: 900px) {
    .vs-feature-bento__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .vs-feature-bento__tile:first-child {
      grid-column: span 2;
    }
  }
</style>
```