Links Icon Box

No notes defined.

<!-- Default -->
<div class="sds-linksIconBox">
    <div class="sds-linksIconBox__header">
        <div class="sds-linksIconBox__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-linksIconBox__headerText">
            <h4 class="h4">Virements</h4>
            <p class="sds-linksIconBox__description">Transactions &quot;Eurotransfert&quot; illimitées et sans frais</p>
        </div>
    </div>
    <div class="sds-linksIconBox__body">
        <ul class="list-unstyled">

            <li class="sds-linksIconBox__bodyItem">
                <a href="" class="sds-linksIconBox__listItem">
                    <span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall sds-linksIconBox__listIcon " aria-hidden="true">

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

                    </span>
                    Comment devenir client Spuerkeess et ouvir un compte ?
                </a>
            </li>

            <li class="sds-linksIconBox__bodyItem">
                <a href="" class="sds-linksIconBox__listItem">
                    <span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall sds-linksIconBox__listIcon " aria-hidden="true">

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

                    </span>
                    Qu’est-ce que le relevé d’identité bancaire (RIB), et comment l’obtenir ?
                </a>
            </li>

        </ul>
    </div>
    <div class="sds-linksIconBox__footer">
        <a href="" class="sds-btn -btnSecondary">

            <span class="sds-btn__text">Tous les articles</span>

        </a>
    </div>
</div>


<!-- Highlight -->
<div class="sds-linksIconBox -isHighlight">
    <div class="sds-linksIconBox__header">
        <div class="sds-linksIconBox__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-linksIconBox__headerText">
            <h4 class="h4">Virements</h4>
            <p class="sds-linksIconBox__description">Transactions &quot;Eurotransfert&quot; illimitées et sans frais</p>
        </div>
    </div>
    <div class="sds-linksIconBox__body">
        <ul class="list-unstyled">

            <li class="sds-linksIconBox__bodyItem">
                <a href="" class="sds-linksIconBox__listItem">
                    <span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall sds-linksIconBox__listIcon " aria-hidden="true">

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

                    </span>
                    Comment devenir client Spuerkeess et ouvir un compte ?
                </a>
            </li>

            <li class="sds-linksIconBox__bodyItem">
                <a href="" class="sds-linksIconBox__listItem">
                    <span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall sds-linksIconBox__listIcon " aria-hidden="true">

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

                    </span>
                    Qu’est-ce que le relevé d’identité bancaire (RIB), et comment l’obtenir ?
                </a>
            </li>

        </ul>
    </div>
    <div class="sds-linksIconBox__footer">
        <a href="" class="sds-btn -btnSecondary">

            <span class="sds-btn__text">Tous les articles</span>

        </a>
    </div>
</div>


<!-- Header Row -->
<div class="sds-linksIconBox -headerRow sds-box -insetMd">
    <div class="sds-linksIconBox__header">
        <div class="sds-linksIconBox__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-linksIconBox__headerText">
            <h4 class="h4">Virements</h4>
            <p class="sds-linksIconBox__description">Transactions &quot;Eurotransfert&quot; illimitées et sans frais</p>
        </div>
    </div>
    <div class="sds-linksIconBox__body">
        <ul class="list-unstyled">

            <li class="sds-linksIconBox__bodyItem">
                <a href="" class="sds-linksIconBox__listItem">
                    <span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall sds-linksIconBox__listIcon " aria-hidden="true">

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

                    </span>
                    Comment devenir client Spuerkeess et ouvir un compte ?
                </a>
            </li>

            <li class="sds-linksIconBox__bodyItem">
                <a href="" class="sds-linksIconBox__listItem">
                    <span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall sds-linksIconBox__listIcon " aria-hidden="true">

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

                    </span>
                    Qu’est-ce que le relevé d’identité bancaire (RIB), et comment l’obtenir ?
                </a>
            </li>

        </ul>
    </div>
    <div class="sds-linksIconBox__footer">
        <a href="" class="sds-btn -btnSecondary">

            <span class="sds-btn__text">Tous les articles</span>

        </a>
    </div>
</div>


<div class="{{ namespace }}linksIconBox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}linksIconBox__header">
		<div class="{{ namespace }}linksIconBox__icon {{ namespace }}brandIconWrapper">
			{% if inlineSVG %}
			{{ inlineSVG | safe }}
				{% else %}
			<img class="{{ namespace }}linksIconBox__icon" src="https://design.spuerkeess.lu/media/brand-icons/svg48x/feature/sdsbrandicon-{{ img }}.svg" alt="" aria-hidden="true">
			{% endif %}
		</div>
		<div class="{{ namespace }}linksIconBox__headerText">
			<h4 class="h4">{{ title }}</h4>
			<p class="{{ namespace }}linksIconBox__description">{{ description }}</p>
		</div>
	</div>
	<div class="{{ namespace }}linksIconBox__body">
		<ul class="list-unstyled">
		{% for key, item in items %}
			<li class="{{ namespace }}linksIconBox__bodyItem">
				<a href="{{ href }}" class="{{ namespace }}linksIconBox__listItem">
					{% render "@icon-btn-secondary-inverse--small",{
						classes: [namespace + "linksIconBox__listIcon "],
						eltType: "span",
						icon: icon,
						attrs: {
							"aria-hidden": "true"
						}
					},true %}
					{{ item.text }}
				</a>
			</li>
		{% endfor %}
		</ul>
	</div>
	<div class="{{ namespace }}linksIconBox__footer">
		{% render "@btn-secondary",{
			text: "Tous les articles",
			eltType: "a"
		},true %}
	</div>
</div>
  • Content: 
    @use "sass:math";
/* variables specific to current element */

$element-specific-variables: "";

.#{$namespace}linksIconBox {

	/* Save root element context for easy access if nesting is needed */

	$self: &;

	/* properties of current element  + media queries */
	display: flex;
	flex-direction: column;
	@include spacer-component-stack("xl");

	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
	}


	/* children - write selector in full in comments in order to facilitate search */

	&__header {
		display: flex;
		@include media-breakpoint-up(lg) {
			flex-direction: column;
		}
	}

	&__headerText {

		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	&__headerText {

		@include spacer-component-stack("xs");

	}

	// linksIconBox__inner
	&__body {

		flex-grow: 1;

	}

	// linksIconBox__icon
	&__icon {

		width: $links-icon-box-img-dimensions-global;
		height: $links-icon-box-img-dimensions-global;
		margin-right: $links-icon-box-img-spacing-global;

		svg,
		IMG {

			width: 100%;
			height: 100%;
			object-fit: cover;

		}

		@include media-breakpoint-up(lg) {
			width: $links-icon-box-img-dimensions-lg-global;
			height: $links-icon-box-img-dimensions-lg-global;
			margin-right: $links-icon-box-img-spacing-lg-global;
			margin-bottom: $links-icon-box-img-spacing-lg-global;
		}

	}

	&__bodyItem {

		& + & {
			margin-top: map-deep-get($token-spacer-stack-max-map, "sm");
		}

	}
	
	&__listItem {

		@include custom-prop-fallback("background-color","comp-link-item-background-color");
		@include custom-prop-fallback("color","comp-link-item-text-color");
		padding: map-deep-get($token-spacer-inset-map, "sm");
		border-radius: map-deep-get($token-radius-map, "8");
		display: flex;
		align-items: center;

		&:hover,
		&:focus {
			@media (hover: hover) {
				@include custom-prop-fallback("background-color","comp-link-item-hovered-background-color");
				@include custom-prop-fallback("color","comp-link-item-hovered-text-color");
			}
		}

	}

	&__listIcon {

		margin-right: map-deep-get($token-spacer-inline-map, "sm");
		pointer-events: none;

		@include media-breakpoint-up(lg) {
			margin-right: map-deep-get($token-spacer-inline-map, "md");
		}

	}


	/* modifiers */

	// linksIconBox -highlight
	&.-isHighlight {

		#{$self}__listItem {

			@include custom-prop-fallback("background-color", "comp-link-item-highlight-background-color");
			@include custom-prop-fallback("color","comp-link-item-text-color");

			&:hover,
			&:focus {
				@media (hover: hover) {
					@include custom-prop-fallback("background-color", "comp-link-item-highlight-hovered-background-color");
				}
			}

		}

		#{$self}__listIcon {

			@include custom-prop-fallback("background-color","comp-link-item-highlight-icon-background-color");
			@include custom-prop-fallback("color","sys-color-text-neutral-inverse");

		}

	}

	&.-headerRow {

		position: relative;

		#{$self}__header {

			flex-direction: row;

		}

		#{$self}__icon {

			margin-bottom: 0;

		}

	}

	/* random parent element */
	/* 
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}
  • URL: /components/raw/spk-links-icon-box/_links-icon-box.scss
  • Filesystem Path: components/spuerkeess-site/organisms/links-icon-box/_links-icon-box.scss
  • Size: 3.4 KB