コンテンツにスキップ
Science Tokyo
デザインシステム

ユーティリティリンク／Utility link

ブロック要素として配置されるリンクのコンポーネントです。
複数のリンクを並列して表示する場合や、組み合わせて他のコンポーネントを作成する際のパーツとして使用します。

<div class="c-utilityLinkGroup">
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink">
      リンクテキスト
      <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>
  </div>
</div>

原則

  • 単独で利用する場合はブロック要素で配置されます。
  • リンクの前後にアイコンを設定できます。
    • 末尾のアイコン：外部リンクに対しては「new-window」アイコンを、リンク先がPDFやワードファイルなどのドキュメントのダウンロードの場合は「pdf（file）」を設定します。同一サイト内へのリンクの場合は「chevron-right」を設定します。
    • 先頭のアイコン：一つ前のページに戻るリンクの場合は「arrow-left」を設定します。

パターン

サイズ

リンクのサイズを指定できます。

<div class="c-utilityLinkGroup c-utilityLinkGroup--horizontal">
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--sizeLL">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--sizeL">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--sizeS">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--sizeSS">
      リンクテキスト
      <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>
  </div>
</div>

スタイル

リンクのスタイルを指定できます。

Fill

<div class="c-utilityLinkGroup c-utilityLinkGroup--horizontal">
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink  c-utilityLink--bordered c-utilityLink--sizeLL">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink  c-utilityLink--bordered c-utilityLink--sizeL">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--bordered">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink  c-utilityLink--bordered c-utilityLink--sizeS">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink  c-utilityLink--bordered c-utilityLink--sizeSS">
      リンクテキスト
      <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>
  </div>
</div>

Pill

<div class="c-utilityLinkGroup c-utilityLinkGroup--horizontal">
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--bordered c-utilityLink--rounded c-utilityLink--sizeLL">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--bordered c-utilityLink--rounded c-utilityLink--sizeL">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--bordered c-utilityLink--rounded">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--bordered c-utilityLink--rounded c-utilityLink--sizeS">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--bordered c-utilityLink--rounded c-utilityLink--sizeSS">
      リンクテキスト
      <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>
  </div>
</div>

Pill - no border

<div class="c-utilityLinkGroup c-utilityLinkGroup--horizontal">
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--rounded c-utilityLink--sizeLL">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--rounded c-utilityLink--sizeL">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--rounded">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--rounded c-utilityLink--sizeS">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink c-utilityLink--rounded c-utilityLink--sizeSS">
      リンクテキスト
      <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>
  </div>
</div>

縦積み/横並び

デフォルトは縦積みとなり、. c-utilityLinkGroup--horizontalを付与することで横並びにできます。

<div class="c-utilityLinkGroup">
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink">
      リンクテキスト
      <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>
  </div>
</div>
<div class="c-utilityLinkGroup c-utilityLinkGroup--horizontal">
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink">
      リンクテキスト
      <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>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink">
      リンクテキスト
      <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>
  </div>
</div>