Skip to content

CSS

The module is pure composition. Wrap a copy pane (label, headline, description, Asset Download, action buttons) and a Frame in Split Content. No new classes, no Alternate Content–specific CSS.

<div class="tng-split-content">
  <div class="tng-stack gap-5xl">
    <div class="tng-stack gap-3xl">
      <div class="tng-stack gap-2xl">
        <p class="tng-text-body" style="text-transform: uppercase">
          Label
        </p>
        <h3 class="tng-text-title is-6">This is a headline</h3>
      </div>
      <p class="tng-text-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
        do eiusmod tempor incididunt ut labore.
      </p>
    </div>
    <ul class="tng-asset-download align-self-stretch" role="list">
      <li class="tng-asset-download-item">
        <a class="tng-link is-neutral is-md" href="#" download>
          <span class="tng-overflow-ellipsis">
            Download brochure.pdf
          </span>
          <i class="tng-icon icon-download" aria-hidden="true"></i>
        </a>
        <span class="tng-asset-download-meta">100 MB</span>
      </li>
      <li class="tng-asset-download-item">
        <a class="tng-link is-neutral is-md" href="#" download>
          <span class="tng-overflow-ellipsis">
            Download catalogue.pdf
          </span>
          <i class="tng-icon icon-download" aria-hidden="true"></i>
        </a>
        <span class="tng-asset-download-meta">12 MB</span>
      </li>
    </ul>
    <div
      class="tng-stack gap-xl align-self-start align-items-stretch"
    >
      <button class="tng-button is-primary">Primary Button</button>
      <button class="tng-button is-secondary">
        Secondary Button
      </button>
    </div>
  </div>
  <div>
    <div class="tng-frame p-relative">
      <div class="tng-slot"></div>
      <div
        class="p-absolute at-top-right inset-xl | tng-stack gap-xl"
      >
        <button class="tng-media-button is-sm" aria-label="Play">
          <i class="tng-icon icon-player" aria-hidden="true"></i>
        </button>
        <button class="tng-media-button is-sm" aria-label="Mute">
          <i class="tng-icon icon-sound" aria-hidden="true"></i>
        </button>
      </div>
    </div>
  </div>
</div>
Open in playground

Label

This is a headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.