Feature Rules.

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

FeaturesSectionNo dependencies Original, MIT

.md

How we make things last.

Five rules every product passes before it carries our name.

Design for the repair bench

Every seam and zip can be replaced with hand tools. If it cannot be fixed, it does not ship.
Cut in small batches

Forty runs a year, each sized to what we can inspect by hand before it leaves Duluth.
Publish the real specs

Weights, ratings and mill names on every product page, measured by us, not the supplier.
Test with people who go far

A volunteer crew of guides carries every prototype for a full season.
Take it back when you are done

Trade-ins are refurbished and resold, so nothing we make ends up as landfill.

Style

Using Claude Code? Give it the agent prompt and skip these steps.

01
Import the foundation once

foundation.css holds the tokens every component reads.
Layout.astro
```
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```
02
Copy FeatureRules.astro

Paste into src/components/viewership/feature-rules/
- FeatureRules.astro

Use it

Page.astro

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

<FeatureRules />

Props 5

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 1 file

src/components/viewership/feature-rules/FeatureRules.astro 116 lines

---
/**
 * 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>

Original, MIT.

Feature Rules.

Design for the repair bench

Cut in small batches

Publish the real specs

Test with people who go far

Take it back when you are done

Import the foundation once

Copy FeatureRules.astro

Use it

Props 5

Source 1 file