Skip to content
Toyota Motor Europe

Box

You can use the Box component as a container for any element that needs a border, elevation, padding, or scheme. It is a versatile component that can be styled with various utilities to fit your design needs.

<div class="tng-box">
  <p class="tng-text-body">This is in a box!</p>
</div>

This is in a box!

Contrast Scheme

Section titled “Contrast Scheme”

Many sections of our website could be rendered with a default or contrast color scheme. To help you implement this easily, we provide the Box foundation component that can switch all its (supported) child content to the contrast color scheme.

With wrapper

Section titled “With wrapper”
<div class="tng-box border-sm border-subtle p-md">
  <p class="tng-text-body">This text is in base color scheme.</p>
</div>
<div class="tng-box border-sm border-subtle p-md is-contrast">
  <p class="tng-text-body">This text is in contrast color scheme.</p>
</div>

This text is in base color scheme.

This text is in contrast color scheme.

Without wrapper

Section titled “Without wrapper”

Should you need to render any of the supported components on a contrast color scheme without a wrapper, you can use the .on-contrast modifier on the element itself to have it switch to the contrast color scheme.

<button class="tng-button on-contrast">Button</button>

Components

Section titled “Components”

These components will automatically adapt to a contrast color scheme.

Utilities

Section titled “Utilities”

Background

Section titled “Background”
<div class="tng-box background-subtle">
  <p class="tng-text-body">This is in a box!</p>
</div>

This is in a box!

See Background utilities.

Border

Section titled “Border”
<div class="tng-box border-md border-subtle radius-md">
  <p class="tng-text-body">This is in a box!</p>
</div>

This is in a box!

See Border utilities.

Elevation

Section titled “Elevation”
<div class="tng-box elevation-lg">
  <p class="tng-text-body">This is in a box!</p>
</div>

This is in a box!

See Elevation utility.

Foreground

Section titled “Foreground”
<div class="tng-box fg-primary-default">
  <p class="tng-text-body">This is in a box!</p>
</div>

This is in a box!

See Foreground utility.

Padding

Section titled “Padding”
<div class="tng-box border-sm border-subtle p-md">
  <p class="tng-text-body">This is in a box!</p>
</div>

This is in a box!

See Padding utility.

Kitchen-sink Demo

Section titled “Kitchen-sink Demo”
<h3 class="tng-text-title is-3">Heading</h3>
<i aria-hidden class="tng-icon icon-car is-md"></i>
<p class="tng-text-body">…</p>
<div class="tng-divider"></div>
<button class="tng-button">Button</button>
<div class="tng-count-indicator">
  <div class="item" aria-current></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="tng-toggle-control">
  <input id="c1" type="checkbox" />
  <label for="c1">Off</label>
</div>
<div class="tng-box p-2xl | tng-stack align-items-center">
  <button class="tng-icon-button is-neutral" aria-label="Info">
    <i class="tng-icon icon-info" aria-hidden="true"></i>
  </button>
  <div class="tng-popover is-contrast">
    <div class="tng-popover-arrow" data-placement="top"></div>
    <div class="tng-popover-bubble">
      <button class="tng-icon-button is-neutral" aria-label="Close">
        <i class="tng-icon icon-close" aria-hidden="true"></i>
      </button>
      <div class="tng-text-title">…</div>
      <p class="tng-text-body">…</p>
      <a class="tng-link">Link</a>
    </div>
  </div>
</div>
<div class="tng-stack gap-lg | tng-box p-2xl is-contrast tng-stack">
  <p class="tng-text-body">…</p>
  <div class="tng-tabs">
    <button class="tng-tabs-item is-selected">Tab 1</button>
    <button class="tng-tabs-item">Tab 2</button>
    <button class="tng-tabs-item">Tab 3</button>
  </div>
  <table class="tng-table">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>
  <div class="tng-box p-2xl is-contrast">
    <p class="tng-text-body">…</p>
  </div>
</div>

Heading

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.

Ut aliqua.

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.

Link

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.

Header 1 Header 2
Data 1 Data 2

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.