Banner

<!-- Default -->
<div class="sds-banner">

    <div class="d-flex flex-grow-1 align-items-center sds-staticInlineXl">

        <div class="sds-media -mediaMd">

            <img src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-piggybankpercentageb.svg" alt="">

        </div>
        <h4 class="h4">
            Heading

            <span class="sds-headingLight">Heading subtext</span>

        </h4>

    </div>
    <button type="button" class="sds-btn -iconBtn -btnSecondary">

        <span class="sds-icon sds-icon-arrownext"></span>

    </button>

</div>

<!-- Highlight -->
<div class="sds-banner -bannerHighlight">

    <div class="d-flex flex-grow-1 align-items-center sds-staticInlineXl">

        <div class="sds-media -mediaMd">

            <img src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-piggybankpercentageb.svg" alt="">

        </div>
        <h4 class="h4">
            Heading

            <span class="sds-headingLight">Heading subtext</span>

        </h4>

    </div>
    <button type="button" class="sds-btn -iconBtn -btnSecondary">

        <span class="sds-icon sds-icon-arrownext"></span>

    </button>

</div>

<!-- Large -->
<div class="sds-banner -bannerLg">

    <div class="row align-items-center">
        <div class="col-12 col-md-6">
            <div class="sds-staticStackMd">
                <div class="sds-heroHeading">
                    <h1 class="sds-heroHeading__separator sds-heroHeading__main">Logement</h1>

                    <p class="sds-heroHeading__sub  h1">Heading subtext</p>

                </div>
                <button type="button" class="sds-btn -iconBtn -btnSecondary">

                    <span class="sds-icon sds-icon-arrownext"></span>

                </button>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <img class="img-fluid" src="../../media/placeholder/placeholder-7-5.jpg" alt="">
        </div>
    </div>

</div>

<!-- Medium -->
<div class="sds-banner">

    <div class="d-flex flex-grow-1 align-items-center sds-staticInlineXl">

        <div class="sds-media -mediaLg">

            <img src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-piggybankpercentageb.svg" alt="">

        </div>
        <h2 class="h2">
            Heading

            <span class="sds-headingLight">Heading subtext</span>

        </h2>

    </div>
    <button type="button" class="sds-btn -iconBtn -btnSecondary">

        <span class="sds-icon sds-icon-arrownext"></span>

    </button>

</div>