सेवाएँ
Services Grid
A three-column grid of services, each an icon, a title and a line of copy.
#services#grid#icons
6 फ्रेमवर्कशुरुआती
Loading…
A two-column feature checklist, each column under its own heading.
<!--
Two groups, each with its own <h3> and its own <ul>. The heading is not a
label floating above a list - it is the list's owner, and keeping them in one
<div> is what makes that relationship survive the columns collapsing.
The ticks are aria-hidden. Every item in a checklist has one, so announcing
"tick" before each would add a word and no information; the list already says
"list, 5 items" and the heading already says what they are.
-->
<section class="svc-feat" aria-labelledby="svc-feat-title">
<p class="svc-feat__kicker">What you get</p>
<h2 class="svc-feat__title" id="svc-feat-title">Everything in the sprint</h2>
<div class="svc-feat__cols">
<div class="svc-feat__group">
<h3 class="svc-feat__group-title">Research</h3>
<ul class="svc-feat__list">
<li class="svc-feat__item">
<svg class="svc-feat__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-feat__item">
<svg class="svc-feat__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 funnel audit of your existing analytics
</li>
</ul>
</div>
<div class="svc-feat__group">
<h3 class="svc-feat__group-title">Deliverables</h3>
<ul class="svc-feat__list">
<li class="svc-feat__item">
<svg class="svc-feat__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-feat__item">
<svg class="svc-feat__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>
</div>
</section>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
kicker | string | - | टाइटल के ऊपर दिखने वाला छोटा लेबल। |
titleआवश्यक | string | - | कार्ड की हेडिंग टेक्स्ट। |
groupsआवश्यक | FeatureGroup[] | - | फ़ीचर समूह, हर एक में शीर्षक और अपनी सूची। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The heading owns its list rather than floating above it - they share a wrapper, so the pairing survives the columns collapsing to one on a narrow screen. The ticks are `aria-hidden` on purpose: every item in a checklist has one, so announcing "tick" before each adds a word and no information, and the list already says "list, 5 items" under a heading that says what they are. `items-start` plus `mt-0.5` on the icon puts the tick on the cap height of the first line; centre them and a two-line item sits its tick against the wrap. Two groups reads best - three needs a wider container than `max-w-5xl`.