kaze風
FeatureGrid
機能紹介グリッド
プレビュー
高速
最適化されたCSSで高速な描画
検索
コマンドパレットで素早く操作
高品質
細部までこだわったデザイン
使いどころ
使う場面
- 特長や機能を、同じ重みで 2 から 4 列に並べる。columns は 2、3、4（既定は 3）
- FeatureCard に title、description、必要なら icon を渡す。1 枚で 1 つのことを言う
- 項目数は columns の倍数に揃える（3 列なら 3 枚か 6 枚）。端数が出ると最後の行が崩れる
- spotlight にすると、最初の子を主役（左の列）、残りを脇（右の列）に並べる。いちばん伝えたい 1 点があるときに使う。主役には figure に数字と単位、children にコード片などの補足を渡せる
使わない場面
- 画像で説明したい 1 つの機能。SplitSection を使う
- 順番や優先度がある項目。手順なら番号付きの List か Stepper を使う
- データの数値を見せる場面。Stats を使う
- icon の色を項目ごとに変えること。アイコンの色は 1 色に揃える
- 全項目を同じ重みで見せたい場面での spotlight。均等に見せるなら variant は grid（既定）のままにする
- spotlight の主役を複数にすること。主役は先頭の 1 つだけで、spotlight では icon は描かれない
使い方
<FeatureGrid columns={3}>
<FeatureCard icon={<Zap />} title="高速" description="説明テキスト" />
</FeatureGrid>
{/* 主役を 1 つ、残りは脇に */}
<FeatureGrid variant="spotlight">
<FeatureCard figure={<>23<small>KB</small></>} title="圧倒的な軽量さ" description="説明テキスト">
<pre><code>import "kaze-design-system/css/all";</code></pre>
</FeatureCard>
<FeatureCard title="デザイントークン" description="説明テキスト" />
<FeatureCard title="ダークモード" description="説明テキスト" />
</FeatureGrid>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
columns | 2 | 3 | 4 | 3 | カラム数（variant が grid のとき） |
variant | "grid" | "spotlight" | "grid" | grid は同じ重みで均等に並べる。spotlight は最初の子を主役（左の列）、残りを脇（右の列）に並べる。spotlight では icon は描かれない |
figure | React.ReactNode | なし | タイトルの上に大きく置く数字と単位（FeatureCard）。例: <>23<small>KB</small></> |
children | React.ReactNode | なし | description の下に置く補足。コード片など（FeatureCard） |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- FeatureCard の title は h3 で出力される。置く Section の SectionHeader（h2）の下の階層
- icon はそのまま渡した要素が出力される。装飾なら aria-hidden を付ける（Kaze の Icon は label なしなら自動で付く）
- カードは <div> で、リンクにはならない。カード全体を押せる想定のデザインにしない
- spotlight でも主役と脇のタイトルはすべて h3。見た目の大きさだけが違い、文書の階層は同じ
文言
- title は 12 文字前後の名詞か短い文（「自動で突合する」）。description は 1 から 2 文で、title にない根拠か数字を入れる
- 全カードで書き方を揃える（すべて体言止め、すべて「〜する」など）
- spotlight の figure は数字と単位だけにし、意味は title と description で説明する