Skip to content
Toyota Motor Europe DXP Reference Guide

Alert

Use an Alert component to display important messages to users.

<div class="tng-alert">
  <header>
    <i aria-hidden="true" class="tng-icon icon-info"></i>
    <h4 class="tng-alert-title">Alert Title</h4>
    <button class="tng-icon-button is-neutral">
      <i class="tng-icon icon-close" aria-hidden="true"></i>
      <span class="sr-only">Close</span>
    </button>
  </header>
  <main>
    <p class="tng-text-body">…</p>
  </main>
  <footer>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
  </footer>
</div>

Alert Title

Ea reprehenderit qui mollit. Magna quis veniam ea est deserunt labore eu ullamco ea ex cupidatat ullamco exercitation esse. Anim amet mollit qui mollit reprehenderit nisi commodo occaecat. Laboris esse ex amet consequat proident officia id velit cupidatat nostrud deserunt ipsum proident. Enim exercitation qui sunt.

Schemes

Section titled “Schemes”
<div class="tng-alert is-error">
  <p class="tng-text-body">…</p>
</div>

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

<div class="tng-alert is-info">
  <p class="tng-text-body">…</p>
</div>

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

<div class="tng-alert is-success">
  <p class="tng-text-body">…</p>
</div>

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

<div class="tng-alert is-warning">
  <p class="tng-text-body">…</p>
</div>

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.