Banner

No notes defined.

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

    <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>


<!-- Highlight -->
<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>


<!-- Highlight Button Link Text -->
<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 -btnSecondary">

        <span class="sds-btn__text">Découvrir</span>

        <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 aria-hidden="true" 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 aria-hidden="true" class="sds-icon sds-icon-arrownext"></span>

    </button>

</div>


<!-- Default -->
{% 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 %}

<!-- Highlight -->
{% 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 %}

<!-- Highlight Button Link Text -->
{% 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 %}

<!-- Large -->
{% extends "@banner-frame" %}
{% block content %}
	<div class="row align-items-center">
		<div class="col-12 col-md-6">
			<div class="{{ namespace }}staticStackMd">
				{% render "@hero-heading" %}
				{% render "@icon-btn-secondary",{
					icon: "icon-arrownext"
				},true %}
			</div>
		</div>
		<div class="col-12 col-md-6">
			<img class="img-fluid" src="{{ (mediaPath + "/placeholder/placeholder-7-5.jpg") | path }}" alt="">
		</div>
	</div>
{% endblock %}

<!-- Medium -->
{% extends "@banner-frame" %}
{% block content %}
	<div class="d-flex flex-grow-1 align-items-center {{ namespace }}staticInlineXl">
		{% render "@media--lg",{
			internalResource: false,
			img: "https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-piggybankpercentageb.svg"
		},true %}
		{% render "@heading--h2-subtext" %}
	</div>
	{% render "@icon-btn-secondary",{
		icon: "icon-arrownext"
	},true %}
{% endblock %}