Skip to content
Toyota Motor Europe DX Playbook

Content

The Content component is used to display text and other basic semantic content in a styled way. Reach for it on CMS-driven copy where you have limited control over the generated HTML structure; for everything else prefer the typography styles and existing semantic components.

Styles

Section titled “Styles”

Apply .tng-content to a container of CMS-driven HTML to give every nested heading, paragraph, list, table, and inline element a consistent style. For everything you author by hand, prefer typography styles and existing semantic components.

<div class="tng-content">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <hr />
  <p>
    Sit sit
    <strong>occaecat minim</strong>
    aute tempor veniam Lorem non et anim. Id in
    <em>quis eiusmod</em>
    ea velit sit qui aute
    <mark>cillum aliquip</mark>
    ad aliqua ex. Proident
    <sup>irure</sup>
    proident
    <sub>labore occaecat</sub>
    ex velit Lorem.
  </p>
  <p>
    This is
    <small>small</small>
    .
  </p>
  <details>
    <summary>Details</summary>
    <p>Details content</p>
  </details>
  <a href="#">Link</a>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
  </ol>
  <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>
  <blockquote>
    <p>
      "Excepteur nisi incididunt excepteur minim laboris cillum sint
      consectetur. Nisi excepteur amet aliqua excepteur incididunt
      aliqua laboris. Laboris dolor ea amet cillum pariatur excepteur
      sint reprehenderit."
    </p>
  </blockquote>
</div>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

This is small.

Details

Details content

Link
  • List item 1
  • List item 2
  1. List item 1
  2. List item 2
Header 1 Header 2
Data 1 Data 2

"Excepteur nisi incididunt excepteur minim laboris cillum sint consectetur. Nisi excepteur amet aliqua excepteur incididunt aliqua laboris. Laboris dolor ea amet cillum pariatur excepteur sint reprehenderit."

Sizes

Section titled “Sizes”

The Content component picks up the same is-1 … is-8 size modifiers as Typography body text. Headings keep their semantic title sizes; everything else scales. Reach for is-8 on legal copy, footnotes, and dense data displays.

<div class="tng-content is-8">
  <h3>Heading 3 keeps its title size</h3>
  <p>
    Body copy renders at 12px (
    <code>is-8</code>
    ). Inline
    <small>small</small>
    ,
    <sup>sup</sup>
    , and
    <sub>sub</sub>
    stay proportional to the surrounding text.
  </p>
</div>

Heading 3 keeps its title size

Body copy renders at 12px (is-8). Inline small, sup, and sub stay proportional to the surrounding text.