引用／Blockquote

本文とは別の出典から引用する文章を表示させる際に使用するコンポーネントです。

<blockquote class="c-blockquote">
  <p class="c-blockquote__text">引用文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。</p>
  <footer class="c-blockquote__footer">
    <cite class="c-blockquote__cite">引用元: 『XXX辞書』</cite>
  </footer>
</blockquote>

原則

引用文と引用元で構成され、これは必須で入力する必要があります。
引用元はリンクなしとリンクありを任意で選択することができます。
- 引用元のリンクがある場合、外部ページと内部ページでアイコンを使い分けます。
- 引用元のリンクがない場合、出典元のドキュメントあるいは書籍の名称を記載します。

パターン

内部ページの場合

引用元にリンクを設定することが可能です。<blockquote>要素のcite属性及び<cite>要素内にリンクを設定します。

<blockquote class="c-blockquote" cite="#">
  <p class="c-blockquote__text">引用文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。</p>
  <footer class="c-blockquote__footer">
    <cite class="c-blockquote__cite">
      <a href="/">
        引用元: 『XXX辞書』
        <svg class="icon c-blockquote__icon" role="img">
          <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
        </svg>
      </a>
    </cite>
  </footer>
</blockquote>

外部ページの場合

別サイトの引用元にリンクを設定することが可能です。
<blockquote>要素のcite属性及び<cite>要素内にtarget="_blankを追加したリンクを設定します。

<blockquote class="c-blockquote" cite="#">
  <p class="c-blockquote__text">引用文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。</p>
  <footer class="c-blockquote__footer">
    <cite class="c-blockquote__cite">
      <a href="/" target="_blank">
        引用元: 『XXX辞書』
        <svg class="icon c-blockquote__icon" role="img" aria-label="新しいウインドウで開く">
          <use xlink:href="/assets/img/sprite.svg#new_window"></use>
        </svg>
      </a>
    </cite>
  </footer>
</blockquote>