# Feature Rules

> Headline pinned left, numbered features ruled like an index on the right.

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

## Install

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

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

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

   - `FeatureRules.astro` (raw: https://viewership.ai/design/raw/feature-rules/FeatureRules.astro.txt)

npm packages: none.

## Usage

```astro
---
import FeatureRules from "../components/viewership/feature-rules/FeatureRules.astro";
---

<FeatureRules />
```

## Example

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

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

<FeatureRules
  title="How we"
  accent="make things last."
  intro="Five rules every product passes before it carries our name."
  items={[
    { title: "Design for the repair bench", body: "Every seam and zip can be replaced with hand tools. If it cannot be fixed, it does not ship." },
    { title: "Cut in small batches", body: "Forty runs a year, each sized to what we can inspect by hand before it leaves Duluth." },
    { title: "Publish the real specs", body: "Weights, ratings and mill names on every product page, measured by us, not the supplier." },
    { title: "Test with people who go far", body: "A volunteer crew of guides carries every prototype for a full season." },
    { title: "Take it back when you are done", body: "Trade-ins are refurbished and resold, so nothing we make ends up as landfill." },
  ]}
/>
```

## 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 under the headline. |
| `items` | `{ title: string; body: string }[]` |  | The features, numbered in order. |
| `as` | `"h2" \| "h3"` | `"h2"` | Heading element. |

## Source

### `src/components/viewership/feature-rules/FeatureRules.astro`

```astro
---
/**
 * FeatureRules: headline pinned on the left, numbered rows ruled like an
 * index on the right. Reads well with longer descriptions.
 *
 * @example
 * <FeatureRules title="How we" accent="make things last." items={[{ title: "Repairs", body: "..." }]} />
 */
interface Item {
  title: string;
  body: 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;
const num = (i: number) => String(i + 1).padStart(2, "0");
---

<section class:list={["vs-feature-rules", className]}>
  <div class="vs-feature-rules__inner">
    <header class="vs-feature-rules__head">
      <Heading class="vs-display vs-feature-rules__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
      {intro && <p class="vs-feature-rules__intro">{intro}</p>}
    </header>
    <ol class="vs-feature-rules__list">
      {
        items.map((item, i) => (
          <li class="vs-feature-rules__row">
            <span class="vs-display vs-feature-rules__num" aria-hidden="true">{num(i)}</span>
            <div>
              <h3 class="vs-feature-rules__name">{item.title}</h3>
              <p class="vs-feature-rules__body">{item.body}</p>
            </div>
          </li>
        ))
      }
    </ol>
  </div>
</section>

<style>
  .vs-feature-rules {
    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-rules__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: var(--vs-section-y) var(--vs-gutter);
  }
  .vs-feature-rules__title {
    font-size: clamp(2rem, 6.5cqi, 4.25rem);
  }
  .vs-feature-rules__intro {
    max-width: 30rem;
    margin: 1.25rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  .vs-feature-rules__list {
    margin: clamp(32px, 6cqi, 64px) 0 0;
    padding: 0;
    list-style: none;
    border-top: calc(var(--vs-border-w) + 1px) solid var(--vs-ink);
  }
  .vs-feature-rules__row {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 12px;
    padding: 22px 0;
    border-bottom: var(--vs-border-w) solid var(--vs-line-strong);
  }
  .vs-feature-rules__num {
    font-size: 1.5rem;
    color: var(--vs-ink-3);
    font-variant-numeric: tabular-nums;
  }
  .vs-feature-rules__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .vs-feature-rules__body {
    margin: 8px 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--vs-ink-2);
  }
  @container (min-width: 820px) {
    .vs-feature-rules__inner {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: clamp(32px, 6cqi, 80px);
      align-items: start;
    }
    .vs-feature-rules__head {
      position: sticky;
      top: 24px;
    }
    .vs-feature-rules__list {
      margin-top: 0;
    }
  }
</style>
```