UIパーツ

UIパーツのレイアウトについての章です。

ユーザー情報

ユーザー情報は「t-container」クラス内の「t-user-info」クラス内に下記を参考に記述してください。


  <body>
    <section class="t-container">

      <div class="t-user-info">

        <div class="t-user-icon"><img src="../apl/sp/images/common/ico02.png" alt=""></div>

        <div class="t-user-text">
          <div class="t-user-subtitle">保険契約者</div>
          <div class="t-user-title">恵比寿太郎</div>
          <div class="t-user-number">A123456789</div>
        </div>

      </div><!-- /.t-user-info -->

    </section>
  </body>

テキスト

テキストは「t-container」クラス内の「t-text」クラス内に下記を参考に記述してください。

パスワードをお忘れの場合、またはログインを制限された場合に、登録されているメールアドレス宛てにパスワードをお送りします。


  <body>
    <section class="t-container">

      <p class="t-text">パスワードをお忘れの場合、またはログインを制限された場合に、登録されているメールアドレス宛てにパスワードをお送りします。</p>
  
    </section>
  </body>

赤いテキスト

赤いテキストは「t-container」クラス内の「t-text」クラスに「t-color-red」クラスを併記してください。

後日、当社より送信する「ログイン開始のご案内メール」が届くまではログインできません。


  <body>
    <section class="t-container">

      <p class="t-text t-color-red">後日、当社より送信する「ログイン開始のご案内メール」が届くまではログインできません。</p>
  
    </section>
  </body>

小さいテキスト

小さいテキストは「t-container」クラス内の「t-text」クラスに「small」クラスを併記してください。

パスワードをお忘れの場合、またはログインを制限された場合に、登録されているメールアドレス宛てにパスワードをお送りします。


  <body>
    <section class="t-container">

      <p class="t-text small">パスワードをお忘れの場合、またはログインを制限された場合に、登録されているメールアドレス宛てにパスワードをお送りします。</p>
  
    </section>
  </body>

注釈

注釈は「t-container」クラス内の「t-annotation」クラス内に下記を参考に記述してください。

  • 車両から大きな衝撃を検知した際にご連絡をさせていただきます。
  • 希望されない場合、衝撃検知時にご登録のメールアドレスにメールを送信します。

  <body>
    <section class="t-container">

      <ul class="t-annotation">
        <li class="t-annotation-item">車両から大きな衝撃を検知した際にご連絡をさせていただきます。</li>
        <li class="t-annotation-item">希望されない場合、衝撃検知時にご登録のメールアドレスにメールを送信します。</li>
      </ul>
  
    </section>
  </body>

箇条書きリスト

箇条書きリストは「t-container」クラス内の「t-list-dots」クラス内に下記を参考に記述してください。

  • メールアドレスをお忘れの方 メールアドレスをお忘れの方は、ご契約の代理店・扱者までご連絡ください。
    登録したメールアドレスを確認のうえ、下記のリンク先よりログイン制限解除し、再度ログインしてください。
  • メールアドレスをお忘れの方 下記のリンク先より、ご登録のメールアドレスにパスワードをお送りし、ログイン制限を解除することができます。 

  <body>
    <section class="t-container">

      <ul class="t-list-dots pl-0">
        <li>
          <span class="t-list-dots-title">メールアドレスをお忘れの方</span>
          <span class="t-list-dots-text">メールアドレスをお忘れの方は、ご契約の代理店・扱者までご連絡ください。<br>登録したメールアドレスを確認のうえ、下記のリンク先よりログイン制限解除し、再度ログインしてください。</span>
        </li>
        <li>
          <span class="t-list-dots-title">メールアドレスをお忘れの方</span>
          <span class="t-list-dots-text">下記のリンク先より、ご登録のメールアドレスにパスワードをお送りし、ログイン制限を解除することができます。</span>
        </li>
      </ul>
  
    </section>
  </body>

カード

カードは「t-container」クラス内の「t-card」クラス内に下記を参考に記述してください。

タイトル

テキストなど

  • 番号付きリスト
  • 番号付きリスト
  • 番号付きリスト
  • アルファベット付きリスト
  • アルファベット付きリスト
  • アルファベット付きリスト

  <body>
    <section class="t-container">

      <div class="t-card">

        <div class="t-card-title">
          <p>タイトル</p>
        </div><!-- /.t-card-title -->

        <div class="t-card-item">
          <p>テキストなど</p>
        </div><!-- /.t-card-item -->

        <div class="t-card-item">
          <ul class="t-card-list-decimal">
            <li>番号付きリスト</li>
            <li>番号付きリスト</li>
            <li>番号付きリスト</li>
          </ul>
        </div><!-- /.t-card-item -->

        <div class="t-card-item">
          <ul class="t-card-list-latin">
            <li>アルファベット付きリスト</li>
            <li>アルファベット付きリスト</li>
            <li>アルファベット付きリスト</li>
          </ul>
        </div><!-- /.t-card-item -->

      </div><!-- /.t-card -->
  
    </section>
  </body>

メッセージ

メッセージは「t-container」クラス内の「t-message」クラス内に下記を参考に記述してください。

しばらくお待ちください


  <body>
    <section class="t-container">

      <div class="t-message">
        
        <div class="t-message-text">
          <p>しばらくお待ちください</p>
        </div><!-- /.t-message-text -->

      </div><!-- /.t-message -->
  
    </section>
  </body>