お問い合わせリスト／Contact list

お問い合わせ先を表示するコンポーネントです。


<div class="c-contactList">
  <div class="grid grid--cols1 sm:grid--cols1">
    <div class="grid__col">
      <div class="c-contactList__item">
        <p class="c-paragraph c-contactList__department">担当部署</p>
        <p class="c-paragraph c-contactList__name">担当者名</p>

        <dl class="c-definitionList c-contactList__data">
          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">住所</dt>
            <dd class="c-definitionList__description">
              東京都目黒区大岡山2丁目12-1
            </dd>
          </div>

          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">Tel</dt>
            <dd class="c-definitionList__description">
              <a class="c-link" href="tel:03-XXXX-XXXX">03-XXXX-XXXX</a>
            </dd>
          </div>

          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">Fax</dt>
            <dd class="c-definitionList__description">
              <a class="c-link" href="tel:03-XXXX-XXXX">03-XXXX-XXXX</a>
            </dd>
          </div>

          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">Email</dt>
            <dd class="c-definitionList__description">
              <a class="c-link" href="mailto:info-XXXX@isct.ac.jp">
                info-XXXX@isct.ac.jp
              </a>
            </dd>
          </div>
        </dl>
      </div>
    </div>

    <div class="grid__col">
      <div class="c-contactList__item">
        <p class="c-paragraph c-contactList__department">担当部署</p>
        <p class="c-paragraph c-contactList__name">担当者名</p>

        <dl class="c-definitionList c-contactList__data">
          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">住所</dt>
            <dd class="c-definitionList__description">
              東京都目黒区大岡山2丁目12-1
            </dd>
          </div>

          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">Tel</dt>
            <dd class="c-definitionList__description">
              <a class="c-link" href="tel:03-XXXX-XXXX">03-XXXX-XXXX</a>
            </dd>
          </div>

          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">Fax</dt>
            <dd class="c-definitionList__description">
              <a class="c-link" href="tel:03-XXXX-XXXX">03-XXXX-XXXX</a>
            </dd>
          </div>

          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">Email</dt>
            <dd class="c-definitionList__description">
              <a class="c-link" href="mailto:info-XXXX@isct.ac.jp">
                info-XXXX@isct.ac.jp
              </a>
            </dd>
          </div>
        </dl>
      </div>
    </div>
  </div>
</div>

原則

1カラム、または2カラムで表示します。
「担当部署」「担当者名」の2項目は任意で記載してください。
構成要素は必要に応じて表示・非表示を選択して利用します。
住所の表記は以下の通りです。
- 日本語の表示例「東京都目黒区大岡山2丁目12-1」
- 英語の表示例「2-12-1 Ookayama, Meguro-ku, Tokyo, Japan」
  - 丁目、番地から記入し、最後に県名と住所、国名を記載します。
電話番号の表記は以下の通りです。
- 日本語の表示例「03-XXXX-XXXX」
  - 市外局番、市内局番、加入者番号を「-」でつなぎます。
- 英語の表示例「+81-3-XXXX-XXXX」
  - 日本の国番号「+81」、先頭の0を外した市外局番、市内局番、加入者番号を「-」でつなぎます。

パターン

カラム数の変更

2カラムで表示することが可能です。

<div class="c-contactList">
  <div class="grid grid--cols2 sm:grid--cols1">
    <div class="grid__col">
      <div class="c-contactList__item">
        <p class="c-paragraph c-contactList__department">担当部署</p>
        <p class="c-paragraph c-contactList__name">担当者名</p>

        <dl class="c-definitionList c-contactList__data">
          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">住所</dt>
            <dd class="c-definitionList__description">
              東京都目黒区大岡山2丁目12-1
            </dd>
          </div>

          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">Tel</dt>
            <dd class="c-definitionList__description">
              <a class="c-link" href="tel:03-XXXX-XXXX">03-XXXX-XXXX</a>
            </dd>
          </div>

          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">Fax</dt>
            <dd class="c-definitionList__description">
              <a class="c-link" href="tel:03-XXXX-XXXX">03-XXXX-XXXX</a>
            </dd>
          </div>

          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">Email</dt>
            <dd class="c-definitionList__description">
              <a class="c-link" href="mailto:info-XXXX@isct.ac.jp">
                info-XXXX@isct.ac.jp
              </a>
            </dd>
          </div>
        </dl>
      </div>
    </div>

    <div class="grid__col">
      <div class="c-contactList__item">
        <p class="c-paragraph c-contactList__department">担当部署</p>
        <p class="c-paragraph c-contactList__name">担当者名</p>

        <dl class="c-definitionList c-contactList__data">
          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">住所</dt>
            <dd class="c-definitionList__description">
              東京都目黒区大岡山2丁目12-1
            </dd>
          </div>

          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">Tel</dt>
            <dd class="c-definitionList__description">
              <a class="c-link" href="tel:03-XXXX-XXXX">03-XXXX-XXXX</a>
            </dd>
          </div>

          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">Fax</dt>
            <dd class="c-definitionList__description">
              <a class="c-link" href="tel:03-XXXX-XXXX">03-XXXX-XXXX</a>
            </dd>
          </div>

          <div class="c-definitionList__item">
            <dt class="c-definitionList__term">Email</dt>
            <dd class="c-definitionList__description">
              <a class="c-link" href="mailto:info-XXXX@isct.ac.jp">
                info-XXXX@isct.ac.jp
              </a>
            </dd>
          </div>
        </dl>
      </div>
    </div>
  </div>
</div>