Demos: o-banner

<div class="o-banner" data-o-component="o-banner">
  <div class="o-banner__outer">
    <div class="o-banner__inner" data-o-banner-inner>
      <div class="o-banner__content o-banner__content--long">
        <p>
          Try the new compact homepage. A list view of today&apos;s homepage
          with fewer images.
        </p>
      </div>
      <div class="o-banner__content o-banner__content--short">
        <p>Try the new compact homepage.</p>
      </div>
      <div class="o-banner__actions">
        <div class="o-banner__action">
          <a href="#" class="o-banner__button">Try it now</a>
        </div>
        <div class="o-banner__action o-banner__action--secondary">
          <a href="#" class="o-banner__link">Give feedback</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="o-banner o-banner--small" data-o-component="o-banner">
  <div class="o-banner__outer">
    <div class="o-banner__inner" data-o-banner-inner>
      <div class="o-banner__content o-banner__content--long">
        <header class="o-banner__heading">
          <h1>FT Compact</h1>
        </header>
        <p>
          Try the new compact homepage. A list view of today&apos;s homepage
          with fewer images.
        </p>
      </div>
      <div class="o-banner__content o-banner__content--short">
        <header class="o-banner__heading">
          <h1>FT Compact</h1>
        </header>
        <p>Try the new compact homepage.</p>
      </div>
      <div class="o-banner__actions">
        <div class="o-banner__action">
          <a href="#" class="o-banner__button">Try it now</a>
        </div>
        <div class="o-banner__action o-banner__action--secondary">
          <a href="#" class="o-banner__link">Give feedback</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="o-banner o-banner--compact" data-o-component="o-banner">
  <div class="o-banner__outer">
    <div class="o-banner__inner" data-o-banner-inner>
      <div class="o-banner__content">
        <header class="o-banner__heading">
          <h1>FT Compact</h1>
        </header>
        <p>
          Try the new compact homepage. A list view of today&apos;s homepage
          with fewer images.
        </p>
      </div>
      <div class="o-banner__actions">
        <div class="o-banner__action">
          <a href="#" class="o-banner__button">Try it now</a>
        </div>
        <div class="o-banner__action o-banner__action--secondary">
          <a href="#" class="o-banner__link">Give feedback</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div
  class="o-banner o-banner--small o-banner--marketing"
  data-o-component="o-banner"
>
  <div class="o-banner__outer">
    <div class="o-banner__inner" data-o-banner-inner>
      <div class="o-banner__content o-banner__content--long">
        <header class="o-banner__heading">
          <p>Limited time only</p>
          <h1>You qualify for a special offer: Save 33%</h1>
        </header>
        <p>
          Pay just $4.29 per week for annual Standard &#x2028;Digital access.
        </p>
        <ul>
          <li>Global news and opinion from experts in 50+ countries</li>
          <li>Access on desktop and mobile</li>
          <li>Market-moving news, politics, tech, the arts and more</li>
        </ul>
      </div>
      <div class="o-banner__content o-banner__content--short">
        <header class="o-banner__heading">
          <p>Limited time only</p>
          <h1>You qualify for a special offer: Save 33%</h1>
        </header>
        <p>
          Pay just $4.29 per week for annual Standard &#x2028;Digital access.
        </p>
      </div>
      <div class="o-banner__actions">
        <div class="o-banner__action">
          <a href="#" class="o-banner__button">Save 33% now</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div
  class="o-banner o-banner--small o-banner--product"
  data-o-component="o-banner"
>
  <div class="o-banner__outer">
    <div class="o-banner__inner" data-o-banner-inner>
      <div class="o-banner__content o-banner__content--long">
        <header class="o-banner__heading">
          <h1>FT Product Message</h1>
        </header>
        <p>This is an example product message.</p>
      </div>
      <div class="o-banner__content o-banner__content--short">
        <header class="o-banner__heading">
          <h1>FT Product Message</h1>
        </header>
        <p>This is an example product message.</p>
      </div>
      <div class="o-banner__actions">
        <div class="o-banner__action">
          <a href="#" class="o-banner__button">Try it now</a>
        </div>
        <div class="o-banner__action o-banner__action--secondary">
          <a href="#" class="o-banner__link">Give feedback</a>
        </div>
      </div>
    </div>
  </div>
</div>