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

カード／Card

同じ要素で構成されるリンク（カード）を連続して表示するコンポーネントです。

<div class="c-cardGroup">
  <div class="grid grid--cols2 sm:grid--cols1">
    <div class="grid__col">
      <div class="c-card c-card--horizontal">
        <div class="c-card__body">
          <h2 class="c-card__title">
            <a href="/">
              <span class="c-card__titleLabel">リンクテキスト</span>
              <svg class="icon c-card__titleIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
          </h2>
          <p class="c-card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        </div>
        <a class="c-card__image" href="/">
          <div class="c-image">
            <picture>
              <img src="/images/sample.webp"
                   width="800"
                   height="450"
                   alt="画像のalt" />
            </picture>
          </div>
        </a>
      </div>
    </div>
    <div class="grid__col">
      <div class="c-card c-card--horizontal">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <a href="/" target="_blank">
              <span class="c-card__titleLabel">リンクテキスト</span>
              <svg class="icon c-card__titleIcon" role="img" aria-label="新しいウインドウで開く">
                <use xlink:href="/assets/img/sprite.svg#new_window"></use>
              </svg>
            </a>
          </h3>
          <p class="c-card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        </div>
        <a class="c-card__image" href="/" target="_blank">
          <div class="c-image">
            <picture>
              <img src="/images/sample.webp"
                   width="800"
                   height="450"
                   alt="画像のalt" />
            </picture>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

原則

  • 2カラム、または3カラムでZ型レイアウトで表示します。
  • 以下の「タイル」タイプのコンポーネントは、単一のリンク先を必須で指定します。
    • コンテンツリスト - タイル
    • コンテンツリスト - タイル・人物
    • コンテンツリスト - メディア
    • コンテンツリスト - イベント
    • コンテンツリスト - イベントカレンダー
  • 以下の「階層」タイプのコンポーネントは、下層のリンク先を階層で指定して利用します。
    • コンテンツリスト - 階層
    • コンテンツリスト - 階層・人物
  • 日付の表記はライティングガイドラインの章（日本語／英語）をご確認ください。
    • 日本語の場合
      • 日付の表記例「2025年1月1日」「2024年12月31日」
        • 数字は半角、年は西暦で「年」「月」「日」を用いて表記します。
      • 時間の表記例「9:00〜16:00」
        • 期間を示す場合は「〜」を利用し、数字は半角、24時間で表記します。
    • 英語の場合
      • 日付の表記例「January 1, 2025」
        • 数字は半角、月は省略表記しません。
      • 日付の表記例外「Jan. 1, 2025」
        • 「イベントカレンダー」コンポーネントでは、例外として月を省略して表記します。
      • 時間の表記例「9:00 - 16:00」
        • 期間を示す場合は「 - 」（前後に半角スペース）を利用し、数字は半角、24時間で表記します。
    • イベント用コンポーネントの日付は、公開日でなく開催日が表示されます。

パターン

カラム数の変更

カラム数を変更することができます。

コンテンツリスト - 3カラム

<div class="c-cardGroup">
  <div class="grid grid--cols3 sm:grid--cols1">
    <div class="grid__col">
      <div class="c-card">
        <div class="c-card__body">
          <h2 class="c-card__title">
            <a href="/">
              <span class="c-card__titleLabel">リンクテキスト</span>
              <svg class="icon c-card__titleIcon" role="img">
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
          </h2>
          <p class="c-card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        </div>
        <a class="c-card__image" href="/">
          <div class="c-image">
            <picture>
              <img src="/images/sample.webp"
                   width="800"
                   height="450"
                   alt="画像のalt" />
            </picture>
          </div>
        </a>
      </div>
    </div>
    <div class="grid__col">
      <div class="c-card">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <a href="/" target="_blank">
              <span class="c-card__titleLabel">リンクテキスト</span>
              <svg class="icon c-card__titleIcon" role="img" aria-label="新しいウインドウで開く">
                <use xlink:href="/assets/img/sprite.svg#new_window"></use>
              </svg>
            </a>
          </h3>
          <p class="c-card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        </div>
        <a class="c-card__image" href="/" target="_blank">
          <div class="c-image">
            <picture>
              <img src="/images/sample.webp"
                   width="800"
                   height="450"
                   alt="画像のalt" />
            </picture>
          </div>
        </a>
      </div>
    </div>
    <div class="grid__col">
      <div class="c-card">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <a href="/" target="_blank">
              <span class="c-card__titleLabel">リンクテキスト</span>
              <svg class="icon c-card__titleIcon" role="img" aria-label="新しいウインドウで開く">
                <use xlink:href="/assets/img/sprite.svg#new_window"></use>
              </svg>
            </a>
          </h3>
          <p class="c-card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        </div>
        <a class="c-card__image" href="/" target="_blank">
          <div class="c-image">
            <picture>
              <img src="/images/sample.webp"
                   width="800"
                   height="450"
                   alt="画像のalt" />
            </picture>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

スタイル

扱うコンテンツに合わせて、次のスタイルに変更が可能です。

コンテンツリスト - タイル

<div class="c-cardGroup">
  <div class="grid grid--cols3 sm:grid--cols1">
    <div class="grid__col">
      <a class="c-card" href="/">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <span class="c-card__titleLabel">リンクテキスト</span>
            <svg class="icon c-card__titleIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
            </svg>
          </h3>
          <p class="c-card__text">
            本文テキスト 「自然界はどのようにしてできているのだろう?」
          </p>
        </div>
        <div class="c-card__image">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </div>
      </a>
    </div>
    <div class="grid__col">
      <a class="c-card" href="/" target="_blank">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <span class="c-card__titleLabel">リンクテキストリンクテキスト</span>
            <svg
              class="icon c-card__titleIcon"
              role="img"
              aria-label="新しいウインドウで開く"
            >
              <use xlink:href="/assets/img/sprite.svg#new_window"></use>
            </svg>
          </h3>
          <p class="c-card__text">
            本文テキスト 「自然界はどのようにしてできているのだろう?」
          </p>
        </div>
        <div class="c-card__image">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </div>
      </a>
    </div>
    <div class="grid__col">
      <a class="c-card" href="/">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <span class="c-card__titleLabel">リンクテキスト</span>
            <svg class="icon c-card__titleIcon" role="img" aria-label="ファイルを開く">
              <use xlink:href="/assets/img/sprite.svg#pdf"></use>
            </svg>
          </h3>
          <p class="c-card__text">
            本文テキスト 「自然界はどのようにしてできているのだろう?」
          </p>
        </div>
        <div class="c-card__image">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

コンテンツリスト - タイル・人物

<div class="c-cardGroup">
  <div class="grid grid--cols3 sm:grid--cols1">
    <div class="grid__col">
      <a class="c-card" href="/">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <span class="c-card__titleLabel">人物名 人物名</span>
            <svg class="icon c-card__titleIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
            </svg>
          </h3>
          <p class="c-card__subTitle">English name</p>
          <p class="c-card__text">
            役職名・所属名テキスト テキストテキストテキスト テキストテキスト
            テキストテキスト
          </p>
        </div>
        <div class="c-card__image">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </div>
      </a>
    </div>
    <div class="grid__col">
      <a class="c-card" href="/">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <span class="c-card__titleLabel">人物名 人物名</span>
            <svg class="icon c-card__titleIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
            </svg>
          </h3>
          <p class="c-card__subTitle">English name</p>
          <p class="c-card__text">
            役職名・所属名テキスト テキストテキストテキスト テキストテキスト
          </p>
        </div>
        <div class="c-card__image">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </div>
      </a>
    </div>
    <div class="grid__col">
      <a class="c-card" href="/">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <span class="c-card__titleLabel">人物名 人物名</span>
            <svg class="icon c-card__titleIcon" role="img" aria-label="ファイルを開く">
              <use xlink:href="/assets/img/sprite.svg#pdf"></use>
            </svg>
          </h3>
          <p class="c-card__subTitle">English name</p>
          <p class="c-card__text">役職名・所属名テキスト テキスト</p>
        </div>
        <div class="c-card__image">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

コンテンツリスト - メディア

<div class="c-cardGroup">
  <div class="grid grid--cols2 sm:grid--cols1">
    <div class="grid__col">
      <a class="c-card c-card--media" href="/">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <span class="c-card__titleLabel">
              メディア情報タイトルテキストタイトルテキストタイトルテキストタイトルテキスト
            </span>
          </h3>
          <p class="c-card__date">
            <time class="c-card__dateStart" datetime="2024-12-31">
              <span class="c-card__dateStartYear">2024年</span>
              12月31日
            </time>
          </p>
          <div class="c-card__tag">
            <span class="c-label">
              <span class="c-label__text">タグテキスト1</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト2</span>
            </span>
          </div>
        </div>
        <div class="c-card__image">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </div>
      </a>
    </div>
    <div class="grid__col">
      <a class="c-card c-card--media" href="/">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <span class="c-card__titleLabel">
              メディア情報タイトルテキスト
            </span>
          </h3>
          <p class="c-card__date">
            <time class="c-card__dateStart" datetime="2025-01-01">
              <span class="c-card__dateStartYear">2025年</span>
              1月1日
            </time>
          </p>
          <div class="c-card__tag">
            <span class="c-label">
              <span class="c-label__text">タグテキスト1</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト2</span>
            </span>
          </div>
        </div>
        <div class="c-card__image">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

英語表示

<!-- en -->
<div class="c-cardGroup">
  <div class="grid grid--cols2 sm:grid--cols1">
    <div class="grid__col">
      <a class="c-card c-card--media" href="/">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <span class="c-card__titleLabel">
              Media title text
            </span>
          </h3>
          <p class="c-card__date">
            <time class="c-card__dateStart" datetime="2024-12-31">
              December 31,
              <span class="c-card__dateStartYear">2024</span>
            </time>
          </p>
          <div class="c-card__tag">
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
          </div>
        </div>
        <div class="c-card__image">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="image alt"
              />
            </picture>
          </div>
        </div>
      </a>
    </div>
    <div class="grid__col">
      <a class="c-card c-card--media" href="/">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <span class="c-card__titleLabel">
              Media title text title text title text title text
            </span>
          </h3>
          <p class="c-card__date">
            <time class="c-card__dateStart" datetime="2025-01-01">
              January 1,
              <span class="c-card__dateStartYear">2025</span>
            </time>
          </p>
          <div class="c-card__tag">
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
          </div>
        </div>
        <div class="c-card__image">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="image alt"
              />
            </picture>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

コンテンツリスト - イベント

<div class="c-cardGroup">
  <div class="grid grid--cols2 sm:grid--cols1">
    <div class="grid__col">
      <a class="c-card" href="/">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <span class="c-card__titleLabel">
              イベント情報タイトルテキストタイトルテキストタイトルテキストタイトルテキスト
            </span>
          </h3>
          <p class="c-card__date">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#calendar"></use>
            </svg>
            <time class="c-card__dateStart" datetime="2024-12-31">
              <span class="c-card__dateStartYear">2024年</span>
              12月31日（月）
            </time>
            〜
            <time class="c-card__dateEnd" datetime="2025-01-01">
              <span class="c-card__dateEndYear">2025年</span>
              1月1日（火）
            </time>
          </p>
          <p class="c-card__time">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#clock"></use>
            </svg>
            10:00〜12:00
          </p>
          <p class="c-card__place">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#location"></use>
            </svg>
            XXXXキャンパス XXXX棟 XX階 XXXX室
          </p>
          <div class="c-card__tag">
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
          </div>
        </div>
        <div class="c-card__image">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </div>
      </a>
    </div>
    <div class="grid__col">
      <a class="c-card" href="/">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <span class="c-card__titleLabel">イベント情報タイトル</span>
          </h3>
          <p class="c-card__date">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#calendar"></use>
            </svg>
            <time class="c-card__dateStart" datetime="2024-12-31">
              <span class="c-card__dateStartYear">2024年</span>
              12月31日（月）
            </time>
            〜
            <time class="c-card__dateEnd" datetime="2025-01-01">
              <span class="c-card__dateEndYear">2025年</span>
              1月1日（火）
            </time>
          </p>
          <p class="c-card__time">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#clock"></use>
            </svg>
            10:00〜12:00
          </p>
          <p class="c-card__place">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#location"></use>
            </svg>
            XXXXキャンパス XXXX棟 XX階 XXXX室
          </p>
          <div class="c-card__tag">
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
          </div>
        </div>
        <div class="c-card__image">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

英語表示

<!-- en -->
<div class="c-cardGroup">
  <div class="grid grid--cols2 sm:grid--cols1">
    <div class="grid__col">
      <a class="c-card" href="/">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <span class="c-card__titleLabel">
              Event information title text title text title text title text title text
            </span>
          </h3>
          <p class="c-card__date">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#calendar"></use>
            </svg>
            <time class="c-card__dateStart" datetime="2024-12-31">
              Mon, Dec. 31,
              <span class="c-card__dateStartYear">2024</span>
            </time>
            -
            <time class="c-card__dateEnd" datetime="2025-01-01">
              Tue, Jan. 1,
              <span class="c-card__dateEndYear">2025</span>
            </time>
          </p>
          <p class="c-card__time">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#clock"></use>
            </svg>
            10:00 - 12:00
          </p>
          <p class="c-card__place">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#location"></use>
            </svg>
            XXXX Campus XXXX Building XX Floor XXXX Room
          </p>
          <div class="c-card__tag">
            <span class="c-label">
              <span class="c-label__text">tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">tag text</span>
            </span>
          </div>
        </div>
        <div class="c-card__image">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="image alt"
              />
            </picture>
          </div>
        </div>
      </a>
    </div>
    <div class="grid__col">
      <a class="c-card" href="/">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <span class="c-card__titleLabel">Event information title</span>
          </h3>
          <p class="c-card__date">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#calendar"></use>
            </svg>
            <time class="c-card__dateStart" datetime="2024-12-31">
              Mon, Dec. 31,
              <span class="c-card__dateStartYear">2024</span>
            </time>
            -
            <time class="c-card__dateEnd" datetime="2025-01-01">
              Tue, Jan. 1,
              <span class="c-card__dateEndYear">2025</span>
            </time>
          </p>
          <p class="c-card__time">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#clock"></use>
            </svg>
            10:00 - 12:00
          </p>
          <p class="c-card__place">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#location"></use>
            </svg>
            XXXX Campus XXXX Building XX Floor XXXX Room
          </p>
          <div class="c-card__tag">
            <span class="c-label">
              <span class="c-label__text">tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">tag text</span>
            </span>
          </div>
        </div>
        <div class="c-card__image">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="image alt"
              />
            </picture>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

コンテンツリスト - 階層

<div class="c-cardGroup">
  <div class="grid grid--cols3 sm:grid--cols1">
    <div class="grid__col">
      <div class="c-card c-card--hierarchy">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <a href="#" target="_blank">
              <span class="c-card__titleLabel">
                リンクテキストリンクテキストリンクテキストリンクテキスト
              </span>
              <svg
                class="icon c-card__titleIcon"
                role="img"
                aria-label="新しいウインドウで開く"
              >
                <use xlink:href="/assets/img/sprite.svg#new_window"></use>
              </svg>
            </a>
          </h3>
          <p class="c-card__text">
            リード文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、
          </p>
          <div class="c-card__addContents">
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-hidden="true"
              >
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
            <a
              href="#"
              target="_blank"
              class="c-link c-utilityLink c-utilityLink--sizeS"
            >
              リンクテキスト
              <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>
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-label="ファイルを開く"
              >
                <use xlink:href="/assets/img/sprite.svg#pdf"></use>
              </svg>
            </a>
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-hidden="true"
              >
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
          </div>
        </div>
        <a class="c-card__image" href="#" target="_blank">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>
    <div class="grid__col">
      <div class="c-card c-card--hierarchy">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <a href="#">
              <span class="c-card__titleLabel">リンクテキスト</span>
              <svg
                class="icon c-card__titleIcon"
                role="img"
                aria-label="ファイルを開く"
              >
                <use xlink:href="/assets/img/sprite.svg#pdf"></use>
              </svg>
            </a>
          </h3>
          <p class="c-card__text">
            リード文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、
          </p>
          <div class="c-card__addContents">
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-hidden="true"
              >
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
            <a
              href="#"
              target="_blank"
              class="c-link c-utilityLink c-utilityLink--sizeS"
            >
              リンクテキスト
              <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>
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-label="ファイルを開く"
              >
                <use xlink:href="/assets/img/sprite.svg#pdf"></use>
              </svg>
            </a>
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-hidden="true"
              >
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
          </div>
        </div>
        <a class="c-card__image" href="#">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>
    <div class="grid__col">
      <div class="c-card c-card--hierarchy">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <a href="#">
              <span class="c-card__titleLabel">リンクテキスト</span>
              <svg class="icon c-card__titleIcon" role="img" aria-hidden="true">
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
          </h3>
          <p class="c-card__text">
            リード文「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、
          </p>
          <div class="c-card__addContents">
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-hidden="true"
              >
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
            <a
              href="#"
              target="_blank"
              class="c-link c-utilityLink c-utilityLink--sizeS"
            >
              リンクテキスト
              <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>
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-label="ファイルを開く"
              >
                <use xlink:href="/assets/img/sprite.svg#pdf"></use>
              </svg>
            </a>
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-hidden="true"
              >
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
          </div>
        </div>
        <a class="c-card__image" href="#">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

コンテンツリスト - 階層・人物

<div class="c-cardGroup">
  <div class="grid grid--cols3 sm:grid--cols1">
    <div class="grid__col">
      <div class="c-card c-card--hierarchy">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <a href="#" target="_blank">
              <span class="c-card__titleLabel">人物名</span>
              <svg
                class="icon c-card__titleIcon"
                role="img"
                aria-label="新しいウインドウで開く"
              >
                <use xlink:href="/assets/img/sprite.svg#new_window"></use>
              </svg>
            </a>
          </h3>
          <p class="c-card__subTitle">English name</p>
          <p class="c-card__text">
            役職名役職名役職名役職名役職名 役職名役職名役職名役職名役職名
            役職名役職名役職名役職名役職名
          </p>
          <div class="c-card__addContents">
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-hidden="true"
              >
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
            <a
              href="#"
              target="_blank"
              class="c-link c-utilityLink c-utilityLink--sizeS"
            >
              リンクテキスト
              <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>
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-label="ファイルを開く"
              >
                <use xlink:href="/assets/img/sprite.svg#pdf"></use>
              </svg>
            </a>
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-hidden="true"
              >
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
          </div>
        </div>
        <a class="c-card__image" href="#" target="_blank">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>
    <div class="grid__col">
      <div class="c-card c-card--hierarchy">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <a href="#">
              <span class="c-card__titleLabel">人物名</span>
              <svg
                class="icon c-card__titleIcon"
                role="img"
                aria-label="ファイルを開く"
              >
                <use xlink:href="/assets/img/sprite.svg#pdf"></use>
              </svg>
            </a>
          </h3>
          <p class="c-card__subTitle">English name</p>
          <p class="c-card__text">
            役職名役職名役職名役職名役職名 役職名役職名役職名役職名役職名
            役職名役職名役職名役職名役職名
          </p>
          <div class="c-card__addContents">
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-hidden="true"
              >
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
            <a
              href="#"
              target="_blank"
              class="c-link c-utilityLink c-utilityLink--sizeS"
            >
              リンクテキスト
              <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>
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-label="ファイルを開く"
              >
                <use xlink:href="/assets/img/sprite.svg#pdf"></use>
              </svg>
            </a>
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-hidden="true"
              >
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
          </div>
        </div>
        <a class="c-card__image" href="#">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>
    <div class="grid__col">
      <div class="c-card c-card--hierarchy">
        <div class="c-card__body">
          <h3 class="c-card__title">
            <a href="#">
              <span class="c-card__titleLabel">人物名</span>
              <svg class="icon c-card__titleIcon" role="img" aria-hidden="true">
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
          </h3>
          <p class="c-card__subTitle">English name</p>
          <p class="c-card__text">
            役職名役職名役職名役職名役職名 役職名役職名役職名役職名役職名
            役職名役職名役職名役職名役職名
          </p>
          <div class="c-card__addContents">
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-hidden="true"
              >
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
            <a
              href="#"
              target="_blank"
              class="c-link c-utilityLink c-utilityLink--sizeS"
            >
              リンクテキスト
              <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>
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-label="ファイルを開く"
              >
                <use xlink:href="/assets/img/sprite.svg#pdf"></use>
              </svg>
            </a>
            <a href="#" class="c-link c-utilityLink c-utilityLink--sizeS">
              リンクテキスト
              <svg
                class="c-link__icon c-link__icon--external icon"
                role="img"
                aria-hidden="true"
              >
                <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
              </svg>
            </a>
          </div>
        </div>
        <a class="c-card__image" href="#">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="800"
                height="450"
                alt="画像のalt"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

コンテンツリスト - イベントカレンダー

<div class="c-cardGroup">
  <div class="grid grid--cols3 sm:grid--cols1">
    <div class="grid__col">
      <a class="c-card c-card--event" href="/">
        <div class="c-card__body">
          <h2 class="c-card__title">
            <span class="c-card__titleLabel">
              イベント情報タイトルテキストタイトルテキストタイトルテキストタイトルテキスト
            </span>
          </h2>
          <p class="c-card__date">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#calendar"></use>
            </svg>
            <time class="c-card__dateStart" datetime="2024-12-31">
              <span class="c-card__dateStartYear">2024年</span>
              12月31日（月）
            </time>
          </p>
          <p class="c-card__place">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#location"></use>
            </svg>
            XXXXキャンパス XXXX棟 XX階 XXXX室
          </p>
          <div class="c-card__tag">
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
          </div>
        </div>
      </a>
    </div>
    <div class="grid__col">
      <a class="c-card c-card--event" href="/">
        <div class="c-card__body">
          <h2 class="c-card__title">
            <span class="c-card__titleLabel">
              イベント情報タイトルテキストタイトルテキストタイトルテキストタイトルテキスト
            </span>
          </h2>
          <p class="c-card__date">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#calendar"></use>
            </svg>
            <time class="c-card__dateStart" datetime="2025-01-01">
              <span class="c-card__dateStartYear">2025年</span>
              1月1日（火）
            </time>
          </p>
          <p class="c-card__place">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#location"></use>
            </svg>
            XXXXキャンパス XXXX棟 XX階 XXXX室
          </p>
          <div class="c-card__tag">
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
          </div>
        </div>
      </a>
    </div>
    <div class="grid__col">
      <a class="c-card c-card--event" href="/">
        <div class="c-card__body">
          <h2 class="c-card__title">
            <span class="c-card__titleLabel">
              イベント情報タイトルテキスト
            </span>
          </h2>
          <p class="c-card__date">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#calendar"></use>
            </svg>
            <time class="c-card__dateStart" datetime="2025-01-01">
              <span class="c-card__dateStartYear">2025年</span>
              1月1日（火）
            </time>
          </p>
          <p class="c-card__place">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#location"></use>
            </svg>
            XXXXキャンパス XXXX棟 XX階 XXXX室
          </p>
          <div class="c-card__tag">
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">タグテキスト</span>
            </span>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

英語表示

<!-- en -->
<div class="c-cardGroup">
  <div class="grid grid--cols3 sm:grid--cols1">
    <div class="grid__col">
      <a class="c-card c-card--event" href="/">
        <div class="c-card__body">
          <h2 class="c-card__title">
            <span class="c-card__titleLabel">
              Event information title text title text title text title text title text
            </span>
          </h2>
          <p class="c-card__date">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#calendar"></use>
            </svg>
            <time class="c-card__dateStart" datetime="2024-12-31">
              Mon, Dec. 31
              <span class="c-card__dateStartYear">2024</span>
            </time>
          </p>
          <p class="c-card__place">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#location"></use>
            </svg>
            XXXX Campus XXXX Building XX Floor XXXX Room
          </p>
          <div class="c-card__tag">
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
          </div>
        </div>
      </a>
    </div>
    <div class="grid__col">
      <a class="c-card c-card--event" href="/">
        <div class="c-card__body">
          <h2 class="c-card__title">
            <span class="c-card__titleLabel">
              Event information title text title text title text title text title text
            </span>
          </h2>
          <p class="c-card__date">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#calendar"></use>
            </svg>
            <time class="c-card__dateStart" datetime="2025-01-01">
              Tue, Jan. 1
              <span class="c-card__dateStartYear">2025</span>
            </time>
          </p>
          <p class="c-card__place">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#location"></use>
            </svg>
            XXXX Campus XXXX Building XX Floor XXXX Room
          </p>
          <div class="c-card__tag">
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
          </div>
        </div>
      </a>
    </div>
    <div class="grid__col">
      <a class="c-card c-card--event" href="/">
        <div class="c-card__body">
          <h2 class="c-card__title">
            <span class="c-card__titleLabel">
              Event information title text
            </span>
          </h2>
          <p class="c-card__date">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#calendar"></use>
            </svg>
            <time class="c-card__dateStart" datetime="2025-01-01">
              Tue, Jan. 1
              <span class="c-card__dateStartYear">2025</span>
            </time>
          </p>
          <p class="c-card__place">
            <svg class="icon c-card__bodyIcon" role="img">
              <use xlink:href="/assets/img/sprite.svg#location"></use>
            </svg>
            XXXX Campus XXXX Building XX Floor XXXX Room
          </p>
          <div class="c-card__tag">
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
            <span class="c-label">
              <span class="c-label__text">Tag text</span>
            </span>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>