Banners

<section class="banner tall left dark bg-photo left-center fixed" style="background-image: url(../../assets/images/bratislava-2x.jpg);">
  <div class="overlay" style="opacity: 0.25;"></div>
  <div class="text">
    <h1>Banners</h1>
    <p>Banners are a key visual organism in the Delta Design System. This is a tall photo banner.</p>
    <button type="button">Button</button>
    <p><cite>Photo: <a href="https://www.stockio.com/free-photo/bratislava-2" target="_blank">Bratislava</a> by David Cohen</cite></p>
  </div>
</section>

<section class="banner short right light bg-photo right-center" style="background-image: url(../../assets/images/london-2x.jpg);">
  <div class="overlay" style="opacity: 0;"></div>
  <div class="text">
    <h2>Banners</h2>
    <p>This is a short photo banner.</p>
    <button type="button">Button</button>
    <p><cite>Photo: <a href="https://www.stockio.com/free-photo/london-235" target="_blank">London</a> by Richard Tilney-Basset</cite></p>
  </div>
</section>

<section class="banner split">
  <figure>
    <img src="../../assets/images/macbook-pro-16-2x.jpg" srcset="../../assets/images/macbook-pro-16-1x.jpg 1x, ../../assets/images/macbook-pro-16-2x.jpg 2x" alt="Example of image used in split banner">
  </figure>
  <div class="text">
    <h2>Split Banner</h2>
    <p>Banners are a key visual organism in the Delta Design System. This is a split banner.</p>
  </div>
</section>

<section class="banner left dark bg-dk-blue">
  <div class="text">
    <h2>Solid Color Banners</h2>
    <p>This is a solid color banner.</p>
    <button type="button">Button</button>
  </div>
</section>