Skip to content
Toyota Motor Europe DXP Reference Guide

Cover

A cover layout takes up the height of the viewport and centers its main content vertically within. It is useful for landing pages or sections that require focused attention.

<section class="tng-cover">
  <h1 class="tng-text-title">…cillum nisi aliquip.</h1>
</section>

Ut aliqua cillum nisi aliquip.

Section titled “Header and Footer”

A cover layout can include a header and footer, which will remain at the top and bottom of the viewport, respectively. The main content will still be centered vertically between them.

<section class="tng-cover">
  <header>
    <nav class="tng-group gap-sm">
      <a href="#" class="tng-link-button">Home</a>
      <a href="#" class="tng-link-button">About</a>
      <a href="#" class="tng-link-button">Contact</a>
    </nav>
  </header>
  <main>
    <h1 class="tng-text-title">…cillum nisi aliquip.</h1>
  </main>
  <footer class="tng-text-body is-7">&copy; 2025 Your Company</footer>
</section>

Ut aliqua cillum nisi aliquip.

© 2025 Your Company

Utilities

Section titled “Utilities”

All our layouts that are Flexbox or Grid based support the base same utilities.