Skip to content
Toyota Motor Europe DXP Reference Guide

Surface

You can use the Surface 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-surface">
  <p class="tng-text-body">This is on a surface!</p>
</div>

This is on a surface!

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 Surface core component that can switch all its (supported) child content to the contrast color scheme.

<div class="tng-surface border-sm p-md">
  <p class="tng-text-body">This is on a surface!</p>
</div>
<div class="tng-surface border-sm p-md is-contrast">
  <p class="tng-text-body">This is on a surface!</p>
</div>

This is on a surface!

This is on a surface!

With wrapper

Section titled “With wrapper”
<div class="tng-surface border-sm p-md">
  <p class="tng-text-body">This text is in base color scheme.</p>
</div>
<div class="tng-surface border-sm 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.

Other Schemes

Section titled “Other Schemes”

Muted

Section titled “Muted”
<div class="tng-surface is-muted border-sm p-md">
  <p class="tng-text-body">This is on a surface!</p>
</div>

This is on a surface!

Subtle

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

This is on a surface!

Utilities

Section titled “Utilities”

Border

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

This is on a surface!

See Border utilities.

Elevation

Section titled “Elevation”
<div class="tng-surface border-sm elevation-lg">
  <p class="tng-text-body">This is on a surface!</p>
</div>

This is on a surface!

See Elevation utility.

Padding

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

This is on a surface!

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-pagination">
  <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-surface p-2xl | tng-stack align-items-center">
  <button class="tng-icon-button is-neutral">
    <i class="tng-icon icon-info" aria-hidden="true"></i>
    <span class="sr-only">Info</span>
  </button>
  <div class="tng-popover is-contrast">
    <div class="tng-popover-arrow" data-placement="top"></div>
    <div class="tng-popover-bubble">
      <div class="tng-popover-header">
        <div class="tng-text-title">…</div>
        <button class="tng-icon-button is-neutral">
          <i class="tng-icon icon-close" aria-hidden="true"></i>
          <span class="sr-only">Close</span>
        </button>
      </div>
      <p class="tng-text-body">…</p>
      <button href="#" class="tng-link-button">Link</button>
    </div>
  </div>
</div>
<div class="tng-surface p-2xl is-contrast tng-stack">
  <p class="tng-text-body">…</p>
  <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>
  <button class="tng-icon-button is-neutral">
    <i class="tng-icon icon-close" aria-hidden="true"></i>
    <span class="sr-only">Close</span>
  </button>
  <div class="tng-surface p-2xl is-contrast">
    <p class="tng-text-body">…</p>
    <button class="tng-icon-button is-neutral">
      <i class="tng-icon icon-close" aria-hidden="true"></i>
      <span class="sr-only">Close</span>
    </button>
  </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.

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.