レイアウト / 表紙と組版見本
Publication
表紙、ナビゲーション、節見出し、作例を囲む枠を再利用できます。
基本的な使い方
DOC-UI / 紙面構成
情報を、見やすく。
ドキュメントとレポートのためのデザインシステム。
HTML
<section class="cover">
<div><p class="eyebrow">DOC-UI / 紙面構成</p>
<h2 class="cover-title">情報を、見やすく。</h2></div>
<div class="cover-copy"><p>ドキュメントとレポートのためのデザインシステム。</p>
<div class="actions"><a class="btn btn-primary btn-lg" href="../../start/">はじめに →</a></div></div>
</section>ラベルを添えた作例
✓ 解析完了
HTML
<figure class="specimen">
<div class="specimen-bar">作例 / 状態</div>
<div class="specimen-body"><span class="chip tone-ok">✓ 解析完了</span></div>
<figcaption class="specimen-caption">状態を色と言葉の両方で示します。</figcaption>
</figure>節の見出し
01 / 読む順序
一覧から探す。レポートを読む。
主張、その根拠、そして意味。
HTML
<section class="section">
<div class="section-head">
<p class="eyebrow">01 / 読む順序</p>
<div><h2 class="section-title">一覧から探す。レポートを読む。</h2>
<p class="note">主張、その根拠、そして意味。</p></div>
</div>
</section>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.cover / .cover-title / .cover-copy | 表紙の見出しと補足文。幅が狭くなると縦に並びます。 |
.masthead / .brand / .colophon | 紙面のヘッダー、文字によるブランド表示、フッター。 |
.section / .section-head / .section-title | 節の区切りと見出し。 |
.specimen / .specimen-bar / .specimen-body / .specimen-caption | 実物の作例、ラベル、内容、キャプション。 |
.principles / .principle / .ribbon | 設計原則や短い情報を罫線で整えます。 |
.index-nav / .link-list | 枠のないカテゴリ索引、または折り返すリンク一覧。 |
使い方の注意
doc-site自身も使うdoc-uiの公開コンポーネントです。同じHTMLをガイド、レポート、プロダクトページに使えます。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。