服务
Services Grid
A three-column grid of services, each an icon, a title and a line of copy.
#services#grid#icons
6 个框架初级
Loading…
A single-column list of services with the icon in a fixed left gutter.
<!--
A single column, deliberately. Where the grid asks you to scan, this asks you
to read - so the icon is a fixed 2.5rem gutter and the copy runs in one
measure down the page. Divider rules instead of cards: nine services as nine
boxes is nine borders competing with the text inside them.
-->
<section class="svc-list" aria-labelledby="svc-list-title">
<p class="svc-list__kicker">Capabilities</p>
<h2 class="svc-list__title" id="svc-list-title">Everything under one retainer</h2>
<ul class="svc-list__items">
<li class="svc-list__item">
<span class="svc-list__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">
<rect x="3" y="3" width="18" height="18" rx="2" /><path d="M9 3v18" />
</svg>
</span>
<div class="svc-list__body">
<h3 class="svc-list__item-title">Design systems</h3>
<p class="svc-list__item-copy">A token layer and a component library your engineers reach for by default.</p>
</div>
</li>
<li class="svc-list__item">
<span class="svc-list__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="M20 13V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7" /><path d="M2 13h20l-2 7H4l-2-7Z" />
</svg>
</span>
<div class="svc-list__body">
<h3 class="svc-list__item-title">Platform engineering</h3>
<p class="svc-list__item-copy">CI, environments and observability that stop being a project and start being plumbing.</p>
</div>
</li>
<li class="svc-list__item">
<span class="svc-list__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">
<circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
</svg>
</span>
<div class="svc-list__body">
<h3 class="svc-list__item-title">Performance</h3>
<p class="svc-list__item-copy">Budgets, traces and the unglamorous work of making the numbers stay down.</p>
</div>
</li>
</ul>
</section>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
kicker | string | - | 显示在标题上方的小标签。 |
title必填 | string | - | 卡片的标题文本。 |
services必填 | ServiceListItem[] | - | 要展示的服务，每项包含图标、名称和简介。 |
className | string | - | 合并到根元素上的额外类名。 |
Where the grid asks you to scan, this asks you to read - one measure, one column, dividers between rows instead of a card around each. Nine services as nine boxes is nine borders competing with the text inside them. `flex-none` on the icon is what keeps it a fixed gutter so every title starts on the same x; drop it and a long title will squeeze the icon narrower than its neighbours. Reach for this over `services-grid` when the copy per item runs past a line or two.