Split content with a media

Core elements

  1. A heading
  2. A summary paragraph
  3. A media
  4. A CTA (optional)

More information

  • Editors can choose the colour of the split content with a media between dark background and light background. Dark background is bg-granite and light colour is bg-steel
  • Editors can choose the position for the media by changing the class split-media-left or split-media-right. for Dark background; class for button inside the content-part div needs to be changed to button-on-dark
<!-- Section starts: Split content with a media -->
<section class="split split-type-embed bg-granite split-media-left">
    <div class="flex-wrapper flex-align-stretch">
        <div class="split-body">
            <div class="split-flex-body flex-wrapper flex-align-center">
                <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>
                    <!-- Body -->
                    <div class="content-part">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue felis a lorem ornare, tempor tincidunt magna facilisis. Aliquam mauris tortor, congue ac commodo sed, egestas non lorem. Interdum et malesuada fames ac ante ipsum primis.</p>
                        <a class="button" href="#">Lorem ipsum dolor sit</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Media -->
        <div class="split-media">
            <div class="split-flex-media flex-wrapper flex-align-center">
                <div class="split-media-inner">
                    <div class="embedded-media">
                        <iframe src="https://player.vimeo.com/video/375365888?color=4ED5E8&amp;byline=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" data-vimeo-tracked="true" data-ready="true"></iframe>
                        <p><a href="https://vimeo.com/375365888">Welcome to the University of Bath</a> from <a href="https://vimeo.com/uniofbath">University of Bath</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Section ends: Split content with a media -->
  • Handle: @split-content-with-media-left
  • Preview:
  • Filesystem Path: components/recipes/split-content/split-content-with-media/split-content-with-media-left.hbs