Skip to content

SECTION

Offer card

A way of working together: a kicker, a name, what you get, and a price at the foot.

Three ways to work

MOST COMMON Project

A defined thing, built and shipped. Six to twelve weeks.

  • Fixed scope, weekly builds
  • You own everything
  • One engineer, no handover
FROM £14k
ONGOING Retainer

Two days a week, indefinitely. For teams with more design than engineering.

  • Same two days each week
  • In your tools and standups
  • One month's notice
FROM £5k / month
SHORT Advisory

A day on your problem, and a written answer afterwards.

  • Half a day together
  • A document you can circulate
  • No commitment either way
FROM £1.2k
HTML
<div class="hairline-grid" style="--cell:280px; width:100%">
  <div class="hairline-cell offer-card">
    <div class="offer-card-head">
      <span class="offer-card-kicker">MOST COMMON</span>
      <span class="offer-card-title">Project</span>
    </div>
    <p class="offer-card-text">A defined thing, built and shipped. Six to twelve weeks.</p>
    <ul class="offer-card-points">
      <li>Fixed scope, weekly builds</li>
      <li>You own everything</li>
      <li>One engineer, no handover</li>
    </ul>
    <div class="offer-card-price">
      <span class="offer-card-price-label">FROM</span>
      <span class="offer-card-price-value">£14k</span>
    </div>
  </div>
  <div class="hairline-cell offer-card offer-card-featured">
    <div class="offer-card-head">
      <span class="offer-card-kicker">ONGOING</span>
      <span class="offer-card-title">Retainer</span>
    </div>
    <p class="offer-card-text">Two days a week, indefinitely. For teams with more design than engineering.</p>
    <ul class="offer-card-points">
      <li>Same two days each week</li>
      <li>In your tools and standups</li>
      <li>One month's notice</li>
    </ul>
    <div class="offer-card-price">
      <span class="offer-card-price-label">FROM</span>
      <span class="offer-card-price-value">£5k / month</span>
    </div>
  </div>
  <div class="hairline-cell offer-card">
    <div class="offer-card-head">
      <span class="offer-card-kicker">SHORT</span>
      <span class="offer-card-title">Advisory</span>
    </div>
    <p class="offer-card-text">A day on your problem, and a written answer afterwards.</p>
    <ul class="offer-card-points">
      <li>Half a day together</li>
      <li>A document you can circulate</li>
      <li>No commitment either way</li>
    </ul>
    <div class="offer-card-price">
      <span class="offer-card-price-label">FROM</span>
      <span class="offer-card-price-value">£1.2k</span>
    </div>
  </div>
</div>

Reference

Read from sections/offer-card.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.offer-card.offer-card-featured.offer-card-kicker.offer-card-text.offer-card-points.offer-card-price-label.offer-card-title.offer-card-price-value.offer-card-price.offer-card-head
SETTINGSSet the first on one element; a theme sets the second for all of them.--offer-shadow — falls back to --ds-shadow-raised
READS--ds-accent--ds-accent-deep--ds-cream--ds-dot--ds-font-body--ds-font-display--ds-gap--ds-gap-block--ds-gap-inline--ds-hairline--ds-ink--ds-ink-faint--ds-ink-on-cream--ds-ink-soft--ds-muted-on-cream--ds-rule--ds-rule-on-cream--ds-text-caption--ds-text-h3--ds-text-label--ds-text-ui--ds-track-key--ds-track-meta--ds-track-snug--ds-weight-display

Notes

THE PRICES LINE UP BECAUSE THE LIST PUSHES THEM DOWN

The points list takes margin-block-start: auto, so the price sits on the card's floor whatever the description's length. Three cards with unequal copy otherwise put their prices at three different heights, which reads as sloppiness rather than variation.

.offer-card-featured changes the surface, not the border. A card emphasised with a coloured border inside a hairline grid breaks the line it shares with its neighbours, and the whole grid looks misaligned.

THE HIGHLIGHT IS THE CREAM SURFACE

The same emphasis the primary button and an open month use — the design's whole “one warm surface” language, spent on the card you want chosen. It was briefly a darker fill, which is invisible when the section around it is already sunk, as this one usually is.

Every ink flips with the surface: the kicker and body to muted-on-cream, the title and price to ink-on-cream, the bullets to accent-deep, and the rule above the price to rule-on-cream — a warm hairline that had to be added, because the ordinary one is far too harsh on cream. A warm surface wearing cool inks fails contrast in both directions.