KSS Style Guide

<insert-markup>molecules.content.banner-</insert-markup>
Test Image
Duis vitae lobortis odio, sed convallis lacus

Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.

.-large-banner
larger version
<insert-markup>molecules.content.banner-0</insert-markup>
Test Image
Duis vitae lobortis odio, sed convallis lacus

Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.

.-left-side-text
left side text
<insert-markup>molecules.content.banner-1</insert-markup>
Test Image
Duis vitae lobortis odio, sed convallis lacus

Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.

.-right-side-text
right side
<insert-markup>molecules.content.banner-2</insert-markup>
Test Image
Duis vitae lobortis odio, sed convallis lacus

Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.

Markup: ..\..\styleguide\templates\molecules\content-banner.html
<div class="rocksite-m-content-banner [modifier class]">

    <div class="rocksite-m-content-banner__image">
        <img src="../assets/images/pages/bg-woman.jpg" alt="Test Image"/>
    </div>

    <div class="rocksite-m-content-banner__wrapper">

        <div class="rocksite-m-content-banner__wrapper__item">

            <h5 class="rocksite-m-content-banner__wrapper__item__title"><a href="#">Duis vitae lobortis odio, sed convallis lacus</a></h5>

            <div class="rocksite-m-content-banner__wrapper__item__content">
                <p>Sed euismod blandit leo. Mauris malesuada mi id mi lacinia scelerisque. Vivamus nec nibh nec sem sagittis mollis et luctus neque. Morbi eget ligula euismod, auctor dui at, suscipit est. In a tristique leo, eu tristique augue. Quisque et placerat velit.</p>
            </div>
        </div>
    </div>



</div>
Source: ../source/scss/components/molecules/_content-banner.scss, line 1