Split content with a tagline

Core elements

  1. A heading
  2. A summary paragraph
  3. A tagline
  4. A footnote (optional)

More information

  • Editors can choose the colour of the split content with a tagline between dark background and light background. Dark background is bg-granite and light colour is bg-steel
  • Editors cannot choose the position for the tagline. Tagline only displays on the right side.
<!-- Section: Split content with a tagline starts -->
<section class="split split-type-quote bg-granite split-media-right">
    <div class="flex-wrapper">
        <div class="split-body">
            <div class="flex-wrapper flex-justify-right flex-align-top">
                <div class="split-body-inner">
                    <!-- Header -->
                    <header class="split-header">
                        <h1 class="section-heading">Split lorem ipsum dolor, sit amet consectetur elit</h1>
                        <hr class="section-header-divider section-header-divider-left">
                    </header>
                </div>
            </div>
        </div>
        <div class="split-media"></div>
    </div>
    <div class="flex-wrapper flex-align-top">
        <div class="split-body">
            <div class="flex-wrapper flex-justify-right">
                <div class="split-body-inner">
                    <!-- Body -->
                    <div class="content-part">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue felis a lorem ornare, tempor tincidunt magna facilisis*</p>
                        <a class="button button-on-dark" href="#">Lorem ipsum dolor sit</a>
                    </div>
                    <!-- Small Print -->
                    <div class="footnote">
                        *Donec id justo. Vivamus laoreet. Ut non enim eleifend felis pretium feugiat.
                    </div>
                </div>
            </div>
        </div>
        <!-- Media -->
        <aside class="split-media">
            <div class="flex-wrapper flex-justify-left">
                <div class="split-quote-inner">
                    Duis vel nibh at velit scelerisque suscipit. Scelerisque quis, convallis in, nisi.*
                </div>
            </div>
        </aside>
    </div>
</section>
<!-- Section: Split content with a tagline ends -->
  • Handle: @split-content-with-tagline
  • Preview:
  • Filesystem Path: components/recipes/split-content/split-content-with-tagline/split-content-with-tagline.hbs