Composition

<div class="field">
  <div class="compare">
    <div><h3 class="compare-title">SQL文</h3><p class="note">WordPressのカタログには844件の文があります。</p></div>
    <div><h3 class="compare-title">指摘</h3><p class="note">978件の指摘には、同じ文に付いた複数の指摘が含まれます。</p></div>
  </div>
</div>

<figure class="plate plate-full plate-side plate-unnumbered">
  <div class="plate-body">
    <h3 class="compare-title"><span class="ref ref-mark tone-teal">B</span> レポート</h3>
    <ol class="flow tone-teal">
      <li><span class="flow-mark" aria-hidden="true">01</span><strong class="flow-name">問い</strong><span class="flow-detail">全体をつかむ</span></li>
      <li><span class="flow-mark" aria-hidden="true">02</span><strong class="flow-name">根拠</strong><span class="flow-detail">事実をつなぐ</span></li>
      <li><span class="flow-mark" aria-hidden="true">03</span><strong class="flow-name">意味</strong><span class="flow-detail">結果を読み解く</span></li>
    </ol>
  </div>
  <figcaption>
    <p class="plate-summary"><span class="plate-label">図1.</span>レポートでは、主張・根拠・意味を明快な順序で読めるようにします。</p>
    <p class="sidenote">矢印は読む順序を示し、因果関係は表しません。</p>
  </figcaption>
</figure>

<div class="sheet sheet-wide">
  <header class="masthead">文書名</header>
  <main class="sheet-body">
    <header class="cover"><div><h1 class="cover-title">最も伝えたいこと。</h1></div></header>
    <section class="sec">
      <h2 class="label">背景</h2>
      <div class="field">説明は、そのあとに。</div>
    </section>
  </main>
  <footer class="colophon">出典とクレジット</footer>
</div>