Product Features

No notes defined.

<div class="sds-productFeatures">

    <div class="row flex-md-row-reverse align-items-center">

        <div class="col-12 col-md-6 col-lg-7">

            <div class="text-center">

                <img src="https://design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-packagefull.svg" alt="" class="img-fluid">

            </div>

        </div>

        <div class="col-12 col-md-6 col-lg-5">

            <div class="sds-featureIconBoxList">
                <ul class="sds-featureIconBoxList__inner list-unstyled row row-cols-1 row-sm">
                    <li class="sds-featureIconBoxList__col col">
                        <div class="sds-featureIconBox">
                            <div class="sds-featureIconBox__inner">
                                <div class="sds-featureIconBox__innerContent">
                                    <div class="sds-featureIconBox__icon sds-brandIconWrapper">
                                        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M34.4431 7.38786C33.7562 6.42917 32.5247 5.90539 31.268 6.22159L8.26798 12.0087C6.93463 12.3442 6 13.5431 6 14.918V14.9994C6.83566 14.3717 7.87439 13.9998 9 13.9998H35V9.30902L25.2631 11.9645L24.7368 10.035L34.4431 7.38786ZM4 14.918V18.9998V35.9998C4 38.7612 6.23858 40.9998 9 40.9998H37C39.7614 40.9998 42 38.7612 42 35.9998V34.9998H40V35.9998C40 37.6566 38.6569 38.9998 37 38.9998H9C7.34315 38.9998 6 37.6566 6 35.9998V18.9998C6 17.3429 7.34315 15.9998 9 15.9998H37C38.6569 15.9998 40 17.3429 40 18.9998V19.9998H42V18.9998C42 16.2384 39.7614 13.9998 37 13.9998V9.13091C37 5.87492 33.9375 3.48755 30.78 4.28204L7.77996 10.0691C5.55772 10.6283 4 12.6265 4 14.918Z" fill="#003060" />
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M41.5 24H36V22H41.5C44.5376 22 47 24.4624 47 27.5C47 30.5376 44.5376 33 41.5 33H36V31H41.5C43.433 31 45 29.433 45 27.5C45 25.567 43.433 24 41.5 24Z" fill="#DE0000" />
                                        </svg>
                                    </div>
                                    <div class="sds-featureIconBox__text sds-stackXs">
                                        <h4 class="h4">Virements</h4>
                                        <p class="sds-featureIconBox__description">Transactions &quot;Eurotransfert&quot; illimitées et sans frais</p>

                                        <button type="button" class="sds-textHelper sds-featureIconBox__action" data-toggle="modal" data-target="#targetModalID">
                                            <span class="sds-icon sds-icon-infocircleborder sds-featureIconBox__actionIcon"></span>
                                            <span>Modal link</span>
                                        </button>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="sds-featureIconBoxList__col col">
                        <div class="sds-featureIconBox">
                            <div class="sds-featureIconBox__inner">
                                <div class="sds-featureIconBox__innerContent">
                                    <div class="sds-featureIconBox__icon sds-brandIconWrapper">
                                        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M34.4431 7.38786C33.7562 6.42917 32.5247 5.90539 31.268 6.22159L8.26798 12.0087C6.93463 12.3442 6 13.5431 6 14.918V14.9994C6.83566 14.3717 7.87439 13.9998 9 13.9998H35V9.30902L25.2631 11.9645L24.7368 10.035L34.4431 7.38786ZM4 14.918V18.9998V35.9998C4 38.7612 6.23858 40.9998 9 40.9998H37C39.7614 40.9998 42 38.7612 42 35.9998V34.9998H40V35.9998C40 37.6566 38.6569 38.9998 37 38.9998H9C7.34315 38.9998 6 37.6566 6 35.9998V18.9998C6 17.3429 7.34315 15.9998 9 15.9998H37C38.6569 15.9998 40 17.3429 40 18.9998V19.9998H42V18.9998C42 16.2384 39.7614 13.9998 37 13.9998V9.13091C37 5.87492 33.9375 3.48755 30.78 4.28204L7.77996 10.0691C5.55772 10.6283 4 12.6265 4 14.918Z" fill="#003060" />
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M41.5 24H36V22H41.5C44.5376 22 47 24.4624 47 27.5C47 30.5376 44.5376 33 41.5 33H36V31H41.5C43.433 31 45 29.433 45 27.5C45 25.567 43.433 24 41.5 24Z" fill="#DE0000" />
                                        </svg>
                                    </div>
                                    <div class="sds-featureIconBox__text sds-stackXs">
                                        <h4 class="h4">Virements</h4>
                                        <p class="sds-featureIconBox__description">Transactions &quot;Eurotransfert&quot; illimitées et sans frais</p>

                                        <button type="button" class="sds-textHelper sds-featureIconBox__action" data-toggle="modal" data-target="#targetModalID">
                                            <span class="sds-icon sds-icon-infocircleborder sds-featureIconBox__actionIcon"></span>
                                            <span>Modal link</span>
                                        </button>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="sds-featureIconBoxList__col col">
                        <div class="sds-featureIconBox">
                            <div class="sds-featureIconBox__inner">
                                <div class="sds-featureIconBox__innerContent">
                                    <div class="sds-featureIconBox__icon sds-brandIconWrapper">
                                        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M34.4431 7.38786C33.7562 6.42917 32.5247 5.90539 31.268 6.22159L8.26798 12.0087C6.93463 12.3442 6 13.5431 6 14.918V14.9994C6.83566 14.3717 7.87439 13.9998 9 13.9998H35V9.30902L25.2631 11.9645L24.7368 10.035L34.4431 7.38786ZM4 14.918V18.9998V35.9998C4 38.7612 6.23858 40.9998 9 40.9998H37C39.7614 40.9998 42 38.7612 42 35.9998V34.9998H40V35.9998C40 37.6566 38.6569 38.9998 37 38.9998H9C7.34315 38.9998 6 37.6566 6 35.9998V18.9998C6 17.3429 7.34315 15.9998 9 15.9998H37C38.6569 15.9998 40 17.3429 40 18.9998V19.9998H42V18.9998C42 16.2384 39.7614 13.9998 37 13.9998V9.13091C37 5.87492 33.9375 3.48755 30.78 4.28204L7.77996 10.0691C5.55772 10.6283 4 12.6265 4 14.918Z" fill="#003060" />
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M41.5 24H36V22H41.5C44.5376 22 47 24.4624 47 27.5C47 30.5376 44.5376 33 41.5 33H36V31H41.5C43.433 31 45 29.433 45 27.5C45 25.567 43.433 24 41.5 24Z" fill="#DE0000" />
                                        </svg>
                                    </div>
                                    <div class="sds-featureIconBox__text sds-stackXs">
                                        <h4 class="h4">Virements</h4>
                                        <p class="sds-featureIconBox__description">Transactions &quot;Eurotransfert&quot; illimitées et sans frais</p>

                                        <button type="button" class="sds-textHelper sds-featureIconBox__action" data-toggle="modal" data-target="#targetModalID">
                                            <span class="sds-icon sds-icon-infocircleborder sds-featureIconBox__actionIcon"></span>
                                            <span>Modal link</span>
                                        </button>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

        </div>

    </div>

</div>
<div class="{{ namespace }}productFeatures{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">

	<div class="row flex-md-row-reverse align-items-center">

		<div class="col-12 col-md-6 col-lg-7">

			<div class="text-center">

				<img src="https://design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-packagefull.svg" alt="" class="img-fluid">

			</div>

		</div>

		<div class="col-12 col-md-6 col-lg-5">

			{% render "@spk-feature-icon-box-list", {
				rowModifiers: ["row-sm"],
				itemOptions1: {
					btn: true,
					action: "Modal link",
					actionIcon: "icon-infocircleborder"
				},
				itemOptions2: {
					btn: true,
					action: "Modal link",
					actionIcon: "icon-infocircleborder"
				},
				itemOptions3: {
					btn: true,
					action: "Modal link",
					actionIcon: "icon-infocircleborder"
				}
			}, true %}

		</div>

	</div>

</div>