सेवाएँ
Services Grid
A three-column grid of services, each an icon, a title and a line of copy.
#services#grid#icons
6 फ्रेमवर्कशुरुआती
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 | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
nameआवश्यक | string | - | हेडिंग के रूप में दिखने वाला प्लान का नाम। |
priceआवश्यक | string | - | दिखाई जाने वाली राशि। |
period | string | 'fixed fee' | कीमत के साथ दिखाई जाने वाली बिलिंग अवधि। |
note | string | - | एक छोटी स्पष्टीकरण पंक्ति, जैसे मूल्य में क्या शामिल नहीं है। |
featuresआवश्यक | string[] | - | फ़ीचर स्ट्रिंग्स की लिस्ट। |
ctaLabel | string | 'Book a call' | कॉल-टू-एक्शन बटन का टेक्स्ट। |
ctaHref | string | '#' | कॉल-टू-एक्शन लिंक का डेस्टिनेशन। |
highlighted | boolean | false | एक्सेंट स्टाइल के साथ रेंडर करता है। |
bandCopy | string | - | कॉल-टू-एक्शन बैंड में दिखाई जाने वाली एक छोटी सहायक पंक्ति। |
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.