リンクリスト／Link list

複数のリンクを表示するコンポーネントです。

<ul class="c-linkList">
  <li class="c-linkList__item">
    <a href="/" class="c-link c-utilityLink c-linkList__link">サイト内リンク</a>
  </li>
  <li class="c-linkList__item">
    <a target="_blank" href="/" class="c-link c-utilityLink c-linkList__link">
      外部リンク
      <svg
        class="c-link__icon c-link__icon--external icon"
        role="img"
        aria-label="新しいウインドウで開く"
      >
        <use xlink:href="/assets/img/sprite.svg#new_window"></use>
      </svg>
    </a>
  </li>
  <li class="c-linkList__item">
    <a href="/" class="c-link c-utilityLink c-linkList__link">
      ファイルリンク
      <svg
        class="c-link__icon c-link__icon--right icon"
        role="img"
        aria-label="ファイルを開く"
      >
        <use xlink:href="/assets/img/sprite.svg#pdf"></use>
      </svg>
    </a>
  </li>
</ul>

原則

「デフォルト」タイプは、縦並びのリンクのリストです。テキストリンクを縦積み、横並びを選択して表示します。
「ボタン」タイプは、3カラムで横並びに表示します。
「関連リンク」タイプは、縦並びのリンクリストです。本文の補足として関連するリンクを表示します。
末尾にのみアイコンを設定できます。設定できるアイコンはユーティリティリンクのルールに準じます。

パターン

横並び

横並びにレイアウトを変更可能です。

<ul class="c-linkList c-linkList--horizontal">
  <li class="c-linkList__item">
    <a href="/" class="c-link c-utilityLink c-linkList__link">サイト内リンク</a>
  </li>
  <li class="c-linkList__item">
    <a target="_blank" href="/" class="c-link c-utilityLink c-linkList__link">
      外部リンク
      <svg
        class="c-link__icon c-link__icon--external icon"
        role="img"
        aria-label="新しいウインドウで開く"
      >
        <use xlink:href="/assets/img/sprite.svg#new_window"></use>
      </svg>
    </a>
  </li>
  <li class="c-linkList__item">
    <a href="/" class="c-link c-utilityLink c-linkList__link">
      ファイルリンク
      <svg
        class="c-link__icon c-link__icon--right icon"
        role="img"
        aria-label="ファイルを開く"
      >
        <use xlink:href="/assets/img/sprite.svg#pdf"></use>
      </svg>
    </a>
  </li>
</ul>

ボタン

ボタン型でリンクを表示することができます。

<ul class="c-linkList c-linkList--button">
  <li class="c-linkList__item">
    <a target="" href="/" class="c-button c-button--secondary c-linkList__link">
      <span class="c-button__label">リンクテキスト</span>
      <svg
        class="c-button__icon c-button__icon--right icon"
        aria-hidden="true"
        role="img"
      >
        <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
      </svg>
    </a>
  </li>
  <li class="c-linkList__item">
    <a
      target="_blank"
      href="/"
      class="c-button c-button--secondary c-linkList__link"
    >
      <span class="c-button__label">リンクテキスト</span>
      <svg
        class="c-button__icon c-button__icon--external icon"
        role="img"
        aria-label="新しいウインドウで開く"
      >
        <use xlink:href="/assets/img/sprite.svg#new_window"></use>
      </svg>
    </a>
  </li>
  <li class="c-linkList__item">
    <a target="" href="/" class="c-button c-button--secondary c-linkList__link">
      <span class="c-button__label">リンクテキスト</span>
      <svg
        class="c-button__icon c-button__icon--right icon"
        role="img"
        aria-label="ファイルを開く"
      >
        <use xlink:href="/assets/img/sprite.svg#pdf"></use>
      </svg>
    </a>
  </li>
</ul>

関連リンク

コンテンツに関連するリンクを表示する場合は次のようにします。

<ul class="c-linkList c-linkList--related">
  <li class="c-linkList__item">
    <a href="/" class="c-link c-utilityLink c-linkList__link">
      リンクテキスト「自然界はどのようにしてできているのだろう?」
      <svg
        class="c-link__icon c-link__icon--right icon"
        aria-hidden="true"
        role="img"
      >
        <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
      </svg>
    </a>
  </li>
  <li class="c-linkList__item">
    <a target="_blank" href="/" class="c-link c-utilityLink c-linkList__link">
      リンクテキスト「自然界はどのようにしてできているのだろう?」

      <svg
        class="c-link__icon c-link__icon--external icon"
        role="img"
        aria-label="新しいウインドウで開く"
      >
        <use xlink:href="/assets/img/sprite.svg#new_window"></use>
      </svg>
    </a>
  </li>
  <li class="c-linkList__item">
    <a href="/" class="c-link c-utilityLink c-linkList__link">
      リンクテキスト「自然界はどのようにしてできているのだろう?」
      <svg
        class="c-link__icon c-link__icon--right icon"
        role="img"
        aria-label="ファイルを開く"
      >
        <use xlink:href="/assets/img/sprite.svg#pdf"></use>
      </svg>
    </a>
  </li>
</ul>