アンカーリンク／Anchor link

ページ内への特定の箇所にリンクを設定するコンポーネントです。
ページの上部に配置することを想定しています。

<div class="c-utilityLinkGroup c-utilityLinkGroup--horizontal">
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink">
      アンカーリンク
      <svg
        class="c-link__icon c-link__icon--right icon"
        aria-hidden="true"
        role="img"
      >
        <use xlink:href="/assets/img/sprite.svg#arrow_downward"></use>
      </svg>
    </a>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink">
      アンカーリンク
      <svg
        class="c-link__icon c-link__icon--right icon"
        aria-hidden="true"
        role="img"
      >
        <use xlink:href="/assets/img/sprite.svg#arrow_downward"></use>
      </svg>
    </a>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink">
      アンカーリンク
      <svg
        class="c-link__icon c-link__icon--right icon"
        aria-hidden="true"
        role="img"
      >
        <use xlink:href="/assets/img/sprite.svg#arrow_downward"></use>
      </svg>
    </a>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink">
      アンカーリンク
      <svg
        class="c-link__icon c-link__icon--right icon"
        aria-hidden="true"
        role="img"
      >
        <use xlink:href="/assets/img/sprite.svg#arrow_downward"></use>
      </svg>
    </a>
  </div>
  <div class="c-utilityLinkGroup__item">
    <a href="/" class="c-link c-utilityLink">
      アンカーリンク
      <svg
        class="c-link__icon c-link__icon--right icon"
        aria-hidden="true"
        role="img"
      >
        <use xlink:href="/assets/img/sprite.svg#arrow_downward"></use>
      </svg>
    </a>
  </div>
</div>

原則

リンクテキストと移動先の文字列は一致させることが望ましいため、そのまま表示します。
末尾にアイコンを表示させます。設定できるアイコンはユーティリティリンクの「arrow-bottom」のみです。