Skip to content
Toyota Motor Europe DXP Reference Guide

Typography

Body

Section titled “Body”
<p class="tng-text-body">…</p>

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.

Sizes

Section titled “Sizes”

The default size is md.

<p class="tng-text-body is-sm">…</p>
<p class="tng-text-body is-md">…</p>
<p class="tng-text-body is-lg">…</p>

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.

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.

Light

Section titled “Light”
<p class="tng-text-body is-sm is-light">…</p>
<p class="tng-text-body is-md is-light">…</p>
<p class="tng-text-body is-lg is-light">…</p>

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.

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.

Caption

Section titled “Caption”
<p class="tng-text-caption">…</p>

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.

Display

Section titled “Display”
<p class="tng-text-display is-1">Display</p>

Display

Sizes

Section titled “Sizes”

There is no default size.

<p class="tng-text-display is-1">Display 1</p>
<p class="tng-text-display is-2">Display 2</p>
<p class="tng-text-display is-3">Display 3</p>
<p class="tng-text-display is-4">Display 4</p>
<p class="tng-text-display is-5">Display 5</p>
<p class="tng-text-display is-6">Display 6</p>

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Eyebrown

Section titled “Eyebrown”
<p class="tng-text-eyebrown">…</p>

Ut aliqua.

Sizes

Section titled “Sizes”

The default size is md.

<p class="tng-text-eyebrown is-sm">Small</p>
<p class="tng-text-eyebrown is-md">Medium</p>
<p class="tng-text-eyebrown is-lg">Large</p>

Small

Medium

Large

Heading

Section titled “Heading”
<p class="tng-text-heading is-1">Heading</p>

Heading

Sizes

Section titled “Sizes”

There is no default size.

<p class="tng-text-heading is-1">Heading 1</p>
<p class="tng-text-heading is-2">Heading 2</p>
<p class="tng-text-heading is-3">Heading 3</p>
<p class="tng-text-heading is-4">Heading 4</p>
<p class="tng-text-heading is-5">Heading 5</p>
<p class="tng-text-heading is-6">Heading 6</p>
<p class="tng-text-heading is-7">Heading 7</p>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 7

Label

Section titled “Label”
<label class="tng-text-label">Label</label>

Strong

Section titled “Strong”
<label class="tng-text-label is-strong">Label</label>

Value

Section titled “Value”
<div class="tng-text-value">Value</div>
Value

Sizes

Section titled “Sizes”

The default size is md.

<div class="tng-text-value is-sm">Small</div>
<div class="tng-text-value is-md">Medium</div>
<div class="tng-text-value is-lg">Large</div>
<div class="tng-text-value is-xl">Extra Large</div>
Small
Medium
Large
Extra Large