Banner: Highlight

No notes defined.

<div class="sds-banner -bannerHighlight" data-scope-wrapper="section" data-scope="inverted">

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

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

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

        </div>
        <div class="sds-stackXxs">
            <h2 class="h4">Mouvement professionnels ?</h2>
            <p class="sds-textHelper">Dans votre quotidien, votre entreprise, vos mouvements professionnels, S-Net Business vous accompagne à chaque transaction.</p>
        </div>
    </div>

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

        <span aria-hidden="true" class="sds-icon sds-icon-arrownext"></span>

        <div class="sr-only">Découvrir</div>

    </button>

</div>
 
{% extends "@banner-frame" %}
{% block content %}
	<div class="d-flex flex-grow-1 align-items-center {{ namespace }}staticInlineXl">
		{% render "@media",{
			classes: ["-mediaHasBg"],
			internalResource: false,
			img: "https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-snetbusiness.svg"
		},true %}
		<div class="{{ namespace }}stackXxs">
			<h2 class="h4">{{ title }}</h2>
			<p class="{{ namespace }}textHelper">{{ text }}</p>
		</div>
	</div>
	{% if textBtn %}
		{% render "@btn-secondary--icon-right",{
			iconRight: true,
			icon: "icon-arrownext",
			text: "Découvrir"
		},true %}
	{% else %}
		{% render "@icon-btn-secondary",{
			icon: "icon-arrownext",
			action: "Découvrir"
		},true %}
	{% endif %}
{% endblock %}