サービス
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.