Content banners
Narrow
<section class="content-banner">
<div class="content-banner__row">
<div class="content-banner__row__col">
<div class="content-banner__image">
<img src="images/content/content-banner-1.jpg" alt="Content banner row 1" />
</div>
</div>
<div class="content-banner__row__col">
<div class="content-banner__desc">
<h2 class="h3">Title in one or two lines</h2>
<hr />
<p>Tortor aliquet a amet, ultricies proin diam vitae. Dictumst pharetra tortor, posuere fermentum est nibh at libero. Lectus a curabitur sit scelerisque accumsan nisl. Sit egestas sit nec, purus risus ut ultrices odio. Turpis scelerisque feugiat cras turpis tincidunt enim odio consectetur. Ultricies hac pulvinar pulvinar.</p>
<a href="#" class="button button--cta"><span>More</span></a>
</div>
</div>
</div>
<div class="content-banner__row">
<div class="content-banner__row__col">
<div class="content-banner__desc">
<h2 class="h3">Title in one or two lines</h2>
<hr />
<p>Tortor aliquet a amet, ultricies proin diam vitae. Dictumst pharetra tortor, posuere fermentum est nibh at libero. Lectus a curabitur sit scelerisque accumsan nisl. Sit egestas sit nec, purus risus ut ultrices odio. Turpis scelerisque feugiat cras turpis tincidunt enim odio consectetur. Ultricies hac pulvinar pulvinar.</p>
<a href="#" class="button button--cta"><span>More</span></a>
</div>
</div>
<div class="content-banner__row__col">
<div class="content-banner__image">
<img src="images/content/content-banner-1.jpg" alt="Content banner row 1" />
</div>
</div>
</div>
...
</section>Wide
<section class="content-banner content-banner--wide">
<div class="content-banner__row">
<div class="content-banner__row__col content-banner__row__col--imageholder">
<div class="content-banner__image">
<img src="images/content/content-banner-2.jpg" alt="Content 2" />
</div>
</div>
<div class="content-banner__row__col">
<div class="content-banner__desc">
<h2 class="h3">Title in one or two lines</h2>
<hr />
<p>Tortor aliquet a amet, ultricies proin diam vitae. Dictumst pharetra tortor, posuere fermentum est nibh at libero. Lectus a curabitur sit scelerisque accumsan nisl. Sit egestas sit nec, purus risus ut ultrices odio. Turpis scelerisque feugiat cras turpis tincidunt enim odio consectetur. Ultricies hac pulvinar pulvinar.</p>
<a href="#" class="button button--cta"><span>More</span></a>
</div>
</div>
</div>
</section>
<!-- Put image on the right (Just swap elements) -->
<section class="content-banner content-banner--wide mt-5 pt-5">
<div class="content-banner__row">
<div class="content-banner__row__col">
<div class="content-banner__desc">
<h2 class="h3">Title in one or two lines</h2>
<hr />
<p>Tortor aliquet a amet, ultricies proin diam vitae. Dictumst pharetra tortor, posuere fermentum est nibh at libero. Lectus a curabitur sit scelerisque accumsan nisl. Sit egestas sit nec, purus risus ut ultrices odio. Turpis scelerisque feugiat cras turpis tincidunt enim odio consectetur. Ultricies hac pulvinar pulvinar.</p>
<a href="#" class="button button--cta"><span>More</span></a>
</div>
</div>
<div class="content-banner__row__col content-banner__row__col--imageholder">
<div class="content-banner__image">
<img src="images/content/content-banner-2.jpg" alt="Content 2" />
</div>
</div>
</div>
</section>Link Wide
You will se below that module is flipped. Just flip elements and use additional class to parent / root element .content-banner--link--reverse
<section class="content-banner content-banner--link">
<div class="content-banner__row">
<div class="content-banner__row__col content-banner__row__col--imageholder">
<div class="content-banner__image">
<img src="images/content/content-banner-2.jpg" alt="Content 2" />
</div>
</div>
<div class="content-banner__row__col">
<div class="content-banner__desc">
<h2 class="h3">Eleifend quam duis magna tellus habitant turpis. Viverra ultrices erat nullam sem enim.</h2>
<hr />
<p>Ultrices diam sed lectus aliquet. Consectetur commodo accumsan adipiscing consectetur potenti lacinia at urna arcu. Quis tellus, facilisi feugiat quis iaculis gravida fermentum. Faucibus eu turpis eu scelerisque ut libero nisi, gravida. Diam enim curabitur lobortis non ut donec elit justo, eu. Varius vulputate risus mollis mauris fringilla. Cursus viverra nibh urna proin. Lacus mauris in est commodo. Risus ac ridiculus volutpat ac cursus pulvinar. Duis viverra vitae cum sed nunc bibendum lacus. Et, lectus elit hendrerit id id. Dignissim cras pretium, nibh sed.
Vitae felis egestas ut lorem pellentesque et in vitae odio. Bibendum at suspendisse ac pulvinar non facilisis sit magnis. Sed quis in velit a mus massa. Sit facilisis leo non ullamcorper at pellentesque tincidunt odio. Duis velit, tortor dolor amet. At faucibus nullam morbi suscipit neque nulla lectus pulvinar turpis. Sapien auctor odio rhoncus, nibh donec. Mi, malesuada nibh accumsan risus quis. Morbi ornare pellentesque nisi, elit elit quam. Vel amet pharetra felis aliquam nam accumsan consectetur et proin. Posuere varius vitae tristique quis commodo condimentum massa. Euismod auctor neque integer aliquam, ullamcorper at praesent. Nunc ut molestie velit, id velit quam ut.
Ut tincidunt non egestas viverra vitae quis. Facilisis turpis non urna, vitae ac. Arcu est integer massa adipiscing vel, magnis iaculis venenatis. Morbi neque porttitor turpis lectus. Scelerisque elit tincidunt lectus morbi arcu aliquet. Sodales nisi accumsan accumsan in rhoncus bibendum ut tempor.</p>
<div class="row justify-content-center justify-content-md-start">
<div class="col-auto"><a href="#" class="link link--arrow"><span>Products by area</span></a></div>
<div class="col-auto"><a href="#" class="link link--arrow"><span>Healthcare matters by area</span></a></div>
</div>
</div>
</div>
</div>
</section>
<!-- To reverse it, just flip elements and add class content-baner--link--reverse -->
<section class="content-banner content-banner--link content-banner--link--reverse mt-5 pt-5">
<div class="content-banner__row">
<div class="content-banner__row__col">
<div class="content-banner__desc">
<h2 class="h3">Eleifend quam duis magna tellus habitant turpis. Viverra ultrices erat nullam sem enim.</h2>
<hr />
<p>Ultrices diam sed lectus aliquet. Consectetur commodo accumsan adipiscing consectetur potenti lacinia at urna arcu. Quis tellus, facilisi feugiat quis iaculis gravida fermentum. Faucibus eu turpis eu scelerisque ut libero nisi, gravida. Diam enim curabitur lobortis non ut donec elit justo, eu. Varius vulputate risus mollis mauris fringilla. Cursus viverra nibh urna proin. Lacus mauris in est commodo. Risus ac ridiculus volutpat ac cursus pulvinar. Duis viverra vitae cum sed nunc bibendum lacus. Et, lectus elit hendrerit id id. Dignissim cras pretium, nibh sed.
Vitae felis egestas ut lorem pellentesque et in vitae odio. Bibendum at suspendisse ac pulvinar non facilisis sit magnis. Sed quis in velit a mus massa. Sit facilisis leo non ullamcorper at pellentesque tincidunt odio. Duis velit, tortor dolor amet. At faucibus nullam morbi suscipit neque nulla lectus pulvinar turpis. Sapien auctor odio rhoncus, nibh donec. Mi, malesuada nibh accumsan risus quis. Morbi ornare pellentesque nisi, elit elit quam. Vel amet pharetra felis aliquam nam accumsan consectetur et proin. Posuere varius vitae tristique quis commodo condimentum massa. Euismod auctor neque integer aliquam, ullamcorper at praesent. Nunc ut molestie velit, id velit quam ut.
Ut tincidunt non egestas viverra vitae quis. Facilisis turpis non urna, vitae ac. Arcu est integer massa adipiscing vel, magnis iaculis venenatis. Morbi neque porttitor turpis lectus. Scelerisque elit tincidunt lectus morbi arcu aliquet. Sodales nisi accumsan accumsan in rhoncus bibendum ut tempor.</p>
<div class="row justify-content-center justify-content-md-start">
<div class="col-auto"><a href="#" class="link link--arrow"><span>Products by area</span></a></div>
<div class="col-auto"><a href="#" class="link link--arrow"><span>Healthcare matters by area</span></a></div>
</div>
</div>
</div>
<div class="content-banner__row__col content-banner__row__col--imageholder">
<div class="content-banner__image">
<img src="images/content/content-banner-2.jpg" alt="Content 2" />
</div>
</div>
</div>
</section>