Services
Services Grid
A three-column grid of services, each an icon, a title and a line of copy.
#services#grid#icons
6 frameworksBeginner
Loading…
A price block with inclusions and a CTA band across the foot of the same card.
<!--
The price is a real text node, not an image or a background - it is the single
fact most likely to be copied, read aloud or translated.
Note the CTA band is inside the same <section> as the price rather than a
separate strip below it: a person reading "£18,000 fixed fee" and a person
pressing "Book a call" are the same person one second apart, and splitting
them across two landmarks makes a screen reader walk out of one and into
another to complete a single thought.
-->
<section class="svc-price" aria-labelledby="svc-price-title">
<div class="svc-price__head">
<h2 class="svc-price__title" id="svc-price-title">Discovery sprint</h2>
<p class="svc-price__amount">
<span class="svc-price__value">£18,000</span>
<span class="svc-price__period">fixed fee</span>
</p>
<p class="svc-price__note">Three weeks, invoiced 50% on kickoff and 50% on handover.</p>
</div>
<ul class="svc-price__list">
<li class="svc-price__item">
<svg class="svc-price__tick" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
Ten user interviews, recorded and tagged
</li>
<li class="svc-price__item">
<svg class="svc-price__tick" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
A clickable prototype of the core journey
</li>
<li class="svc-price__item">
<svg class="svc-price__tick" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" />
</svg>
A costed backlog, sized by your team's velocity
</li>
</ul>
<div class="svc-price__band">
<p class="svc-price__band-copy">Two sprint slots left this quarter.</p>
<a class="svc-price__cta" href="/contact">Book a call</a>
</div>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | string | - | Plan name shown as the heading. |
pricerequired | string | - | Amount to display. |
period | string | 'fixed fee' | Billing period shown beside the price. |
note | string | - | A small qualifying line, such as what the price excludes. |
featuresrequired | string[] | - | List of feature strings. |
ctaLabel | string | 'Book a call' | Call-to-action button text. |
ctaHref | string | '#' | Destination for the call-to-action link. |
highlighted | boolean | false | Renders the accent treatment. |
bandCopy | string | - | A short line of supporting copy shown in the call-to-action band. |
The band is a tinted footer of the same `<section>`, not a separate strip below it. That is deliberate: someone reading "£18,000 fixed fee" and someone pressing "Book a call" are the same person one second apart, and splitting them across two landmarks makes a screen reader leave one and enter another to finish a single thought. `price` is a pre-formatted string, symbol included - this component never does maths, because localising currency belongs to the page that knows the visitor. `tabular-nums` stops the figure reflowing between plans. In dark mode the band tint inverts: a shade *lighter* than the card, where on light it was darker.