Feature Icon Box

No notes defined.

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

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

<!-- Modal Link -->
<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>

<!-- External Link -->
<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>

                <a href="" class="sds-textHelper sds-featureIconBox__action">
                    <span class="sds-icon sds-icon-externallink sds-featureIconBox__actionIcon"></span>
                    <span>External link</span>
                </a>

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

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

                <a href="" class="sds-textHelper sds-featureIconBox__action">
                    <span class="sds-icon sds-icon-arrownext sds-featureIconBox__actionIcon"></span>
                    <span>Link</span>
                </a>

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

<!-- Column -->
<div class="sds-featureIconBox -column">
    <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>

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

<!-- Column Centered -->
<div class="sds-featureIconBox -column -columnCentered">
    <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>

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

<!-- Column Centered Icon Big -->
<div class="sds-featureIconBox -column -columnCentered -iconBig">
    <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>

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

<div class="{{ namespace }}featureIconBox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}featureIconBox__inner">
		<div class="{{ namespace }}featureIconBox__innerContent">
			<div class="{{ namespace }}featureIconBox__icon {{ namespace }}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="{{ namespace }}featureIconBox__text {{ namespace }}stackXs">
				<h4 class="h4">{{ title }}</h4>
				<p class="{{ namespace }}featureIconBox__description">{{ description }}</p>
				{% if action %}
					{% if btn %}
						<button type="button" class="{{ namespace }}textHelper {{ namespace }}featureIconBox__action" data-toggle="modal" data-target="#{{ target or "targetModalID" }}">
							<span class="{{ namespace }}icon {{ namespace }}{{ actionIcon }} {{ namespace }}featureIconBox__actionIcon"></span>
							<span>{{ action }}</span>
						</button>
					{% else %}
						<a href="" class="{{ namespace }}textHelper {{ namespace }}featureIconBox__action"{% if external %} target="_blank"{% endif %}>
							<span class="{{ namespace }}icon {{ namespace }}{{ actionIcon }} {{ namespace }}featureIconBox__actionIcon"></span>
							<span>{{ action }}</span>
						</a>
					{% endif %}
				{% endif %}
			</div>
		</div>
	</div>
</div>
  • Content:
    @use "sass:math";
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}featureIconBox {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    	display: flex;
    	align-items: flex-start;
    
    	/* 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 */
    
    	&__inner,
    	&__text {
    
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    
    	}
    
    	// featureIconBox__inner
    	&__innerContent {
    
    		display: flex;
    
    	}
    
    	// featureIconBox__icon
    	&__icon {
    
    		width: $feature-icon-box-img-dimensions-global;
    		height: $feature-icon-box-img-dimensions-global;
    		margin-right: $feature-icon-box-img-spacing-global;
    		object-fit: contain;
    
    		svg,
    		IMG {
    
    			width: 100%;
    			height: 100%;
    			object-fit: cover;
    
    		}
    
    		@include media-breakpoint-up(lg) {
    			width: $feature-icon-box-img-dimensions-lg-global;
    			height: $feature-icon-box-img-dimensions-lg-global;
    			margin-right: $feature-icon-box-img-spacing-lg-global;
    		}
    
    	}
    	
    	// featureIconBox__action
    	&__action {
    
    		// follows same logic as parent
    
    		@include custom-prop-fallback("color", "sys-color-text-primary-muted");
    		margin-top: map-deep-get($token-spacer-stack-max-map, "sm");
    		display: inline-flex;
    		align-items: center;
    
    		@include media-breakpoint-up("lg") {
    
    			margin-top: map-deep-get($token-spacer-stack-max-map, "md");
    
    		}
    
    	}
    	
    	// featureIconBox__actionIcon
    	&__actionIcon {
    
    		// follows same logic as parent
    		margin-right: map-deep-get($token-spacer-inline-map, "sm");
    
    		&::before {
    
    			font-size: math.div(map-deep-get($token-font-size-map, "body", "m"),map-deep-get($token-font-size-map, "body", "s"))*1em;
    
    		}
    
    	}
    
    
    	/* modifiers */
    
    	// featureIconBox -column
    	&.-column {
    
    		// follows same logic as base element
    
    		@include media-breakpoint-up(lg) {
    
    			#{$self}__innerContent {
    				flex-direction: column;
    			}
    
    		}
    
    		#{$self}__text {
    
    			@include media-breakpoint-up(lg) {
    
    				margin-top: map-deep-get($token-spacer-stack-max-map, "lg");
    
    			}
    
    		}
    
    	}
    
    	&.-iconBig {
    
    		#{$self}__icon {
    
    			width: $feature-icon-box-img-big-dimensions-global;
    			height: $feature-icon-box-img-big-dimensions-global;
    			margin-right: $feature-icon-box-img-spacing-lg-global;
    
    			@include media-breakpoint-up(lg) {
    				width: $feature-icon-box-img-big-dimensions-lg-global;
    				height: $feature-icon-box-img-big-dimensions-lg-global;
    			}
    
    		}
    
    	}
    
    	&.-columnCentered {
    
    
    		@include media-breakpoint-up(lg) {
    
    			justify-content: center;
    
    			#{$self}__innerContent {
    
    				align-items: center;
    				text-align: center;
    				flex-direction: column;
    
    			}
    
    		}
    
    		#{$self}__icon {
    
    			@include media-breakpoint-up(lg) {
    
    				margin-right: 0;
    
    			}
    
    		}
    
    		#{$self}__inner {
    
    			@include media-breakpoint-up(lg) {
    
    				align-items: center;
    
    			}
    
    		}
    
    		#{$self}__action {
    
    			@include media-breakpoint-up(lg) {
    
    				margin-left: auto;
    				margin-right: auto;
    
    			}
    
    		}
    
    	}
    
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/spk-feature-icon-box/_feature-icon-box.scss
  • Filesystem Path: components/spuerkeess-site/molecules/feature-icon-box/_feature-icon-box.scss
  • Size: 3.4 KB