सेवाएँ
Services Alternating Rows
Image-and-copy rows that alternate sides down the page.
#services#alternating#zigzag
6 फ्रेमवर्कमध्यम
Loading…
A three-column grid of services, each an icon, a title and a line of copy.
<!--
The services are a <ul>, not a stack of <div>s: a screen reader announces
"list, 6 items" before the first one, which is the count a sighted visitor
gets for free from the grid. Each card's heading is an <h3> under the
section's <h2> - the outline is the page's table of contents, so it cannot
skip a level to get a font size.
-->
<section class="svc-grid" aria-labelledby="svc-grid-title">
<div class="svc-grid__intro">
<p class="svc-grid__kicker">What we do</p>
<h2 class="svc-grid__title" id="svc-grid-title">Services built around your roadmap</h2>
<p class="svc-grid__copy">
Four practices, one team, and a single point of contact from kickoff to handover.
</p>
</div>
<ul class="svc-grid__list">
<li class="svc-grid__item">
<span class="svc-grid__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
<path d="M12 2 2 7l10 5 10-5-10-5Z" /><path d="m2 17 10 5 10-5" /><path d="m2 12 10 5 10-5" />
</svg>
</span>
<h3 class="svc-grid__item-title">Product strategy</h3>
<p class="svc-grid__item-copy">Positioning, scope and a roadmap you can actually staff.</p>
</li>
<li class="svc-grid__item">
<span class="svc-grid__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
<path d="m18 16 4-4-4-4" /><path d="m6 8-4 4 4 4" /><path d="m14.5 4-5 16" />
</svg>
</span>
<h3 class="svc-grid__item-title">Engineering</h3>
<p class="svc-grid__item-copy">Typed, tested delivery on a stack your team can own after we leave.</p>
</li>
<li class="svc-grid__item">
<span class="svc-grid__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
<path d="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" />
</svg>
</span>
<h3 class="svc-grid__item-title">Analytics</h3>
<p class="svc-grid__item-copy">Instrumentation that answers the question you actually asked.</p>
</li>
</ul>
</section>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
kicker | string | - | टाइटल के ऊपर दिखने वाला छोटा लेबल। |
titleआवश्यक | string | - | कार्ड की हेडिंग टेक्स्ट। |
copy | string | - | टाइटल के नीचे दिखने वाला मुख्य टेक्स्ट। |
servicesआवश्यक | ServiceItem[] | - | दिखाई जाने वाली सेवाएँ, हर एक में आइकन, नाम और सारांश। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The CSS variant uses `auto-fit` with `minmax(15rem, 1fr)` rather than a fixed column count, so it reflows from one column to three with no breakpoints - worth keeping if you drop it into a container narrower than the one you designed for. The services are a `<ul>`: a screen reader announces "list, 6 items" before the first, which is the count the grid gives a sighted visitor for free. Each tile heading is an `<h3>` under the section `<h2>`; do not skip to `<h4>` to get a smaller font - set the size with a class and leave the outline intact.