Badges are found in the base component tab in atoms.
Available social icons are:
All icons are available in the same folder.
<!-- Default -->
<a href="#" class="sds-iconLinkBox">
<span class="sds-iconLinkBox__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="M2 18L6 24V40H23H25H42V24L46 18H26L24 21L22 18H2ZM25.737 22H40.9296L42.263 20H27.0704L25.737 22ZM22 24H8V38H23V24H22ZM25 24V38H40V24H26H25ZM22.263 22H7.07037L5.73703 20H20.9296L22.263 22Z" fill="#003060" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3328 15.2592C14.8426 11.4844 19.1314 9 24 9C28.8687 9 33.1575 11.4844 35.6673 15.2592C35.828 15.501 35.9815 15.748 36.1273 16H38.3913C38.0789 15.3588 37.7249 14.7415 37.3328 14.1518C34.468 9.84318 29.5663 7 24 7C18.4338 7 13.5321 9.84318 10.6673 14.1518C10.2752 14.7415 9.9212 15.3588 9.60876 16H11.8728C12.0186 15.748 12.172 15.501 12.3328 15.2592Z" fill="#DE0000" />
</svg>
</span>
<div class="sds-iconLinkBox__inner sds-stackXs">
<h4 class="h3">S-Net</h4>
<p class="sds-iconLinkBox__description">Gérez vos principales opérations bancaires via S-Net</p>
<div class="sds-iconLinkBox__badge">
<div class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</div>
</div>
</div>
</a>
<!-- External -->
<a href="#" class="sds-iconLinkBox">
<span class="sds-iconLinkBox__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="M2 18L6 24V40H23H25H42V24L46 18H26L24 21L22 18H2ZM25.737 22H40.9296L42.263 20H27.0704L25.737 22ZM22 24H8V38H23V24H22ZM25 24V38H40V24H26H25ZM22.263 22H7.07037L5.73703 20H20.9296L22.263 22Z" fill="#003060" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3328 15.2592C14.8426 11.4844 19.1314 9 24 9C28.8687 9 33.1575 11.4844 35.6673 15.2592C35.828 15.501 35.9815 15.748 36.1273 16H38.3913C38.0789 15.3588 37.7249 14.7415 37.3328 14.1518C34.468 9.84318 29.5663 7 24 7C18.4338 7 13.5321 9.84318 10.6673 14.1518C10.2752 14.7415 9.9212 15.3588 9.60876 16H11.8728C12.0186 15.748 12.172 15.501 12.3328 15.2592Z" fill="#DE0000" />
</svg>
</span>
<div class="sds-iconLinkBox__inner sds-stackXs">
<h4 class="h3">S-Net <span class="sds-icon sds-icon-externallink sds-iconLinkBox__titleIcon" aria-hidden="true"></span></h4>
<p class="sds-iconLinkBox__description">Gérez vos principales opérations bancaires via S-Net</p>
<div class="sds-iconLinkBox__badge">
<div class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</div>
</div>
</div>
</a>
<!-- Row -->
<a href="#" class="sds-iconLinkBox -row">
<span class="sds-iconLinkBox__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="M2 18L6 24V40H23H25H42V24L46 18H26L24 21L22 18H2ZM25.737 22H40.9296L42.263 20H27.0704L25.737 22ZM22 24H8V38H23V24H22ZM25 24V38H40V24H26H25ZM22.263 22H7.07037L5.73703 20H20.9296L22.263 22Z" fill="#003060" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3328 15.2592C14.8426 11.4844 19.1314 9 24 9C28.8687 9 33.1575 11.4844 35.6673 15.2592C35.828 15.501 35.9815 15.748 36.1273 16H38.3913C38.0789 15.3588 37.7249 14.7415 37.3328 14.1518C34.468 9.84318 29.5663 7 24 7C18.4338 7 13.5321 9.84318 10.6673 14.1518C10.2752 14.7415 9.9212 15.3588 9.60876 16H11.8728C12.0186 15.748 12.172 15.501 12.3328 15.2592Z" fill="#DE0000" />
</svg>
</span>
<div class="sds-iconLinkBox__inner sds-stackXs">
<h4 class="h3">S-Net</h4>
<p class="sds-iconLinkBox__description">Gérez vos principales opérations bancaires via S-Net</p>
</div>
</a>
<!-- Social -->
<a href="#" class="sds-iconLinkBox -row">
<span class="sds-iconLinkBox__icon sds-brandIconWrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns:v="https://vecta.io/nano">
<path d="M46 24c0-12.15-9.85-22-22-22S2 11.85 2 24c0 10.317 7.103 18.975 16.686 21.352V30.723h-4.536V24h4.536v-2.897c0-7.488 3.389-10.959 10.741-10.959 1.394 0 3.799.274 4.783.546v6.094c-.519-.055-1.421-.082-2.541-.082-3.607 0-5.001 1.367-5.001 4.919V24h7.186l-1.235 6.723h-5.951v15.116C37.56 44.524 46.001 35.248 46.001 24H46z" fill="#0866ff" />
<path d="M32.617 30.724L33.852 24h-7.186v-2.378c0-3.552 1.394-4.919 5.001-4.919l2.541.082v-6.094c-.984-.274-3.389-.546-4.783-.546-7.352 0-10.74 3.471-10.74 10.959V24h-4.536v6.723h4.536v14.629a22.04 22.04 0 0 0 5.314.648c.902 0 1.792-.056 2.666-.161V30.724h5.951.001z" fill="#fff" />
</svg>
</span>
<div class="sds-iconLinkBox__inner sds-stackXs">
<h4 class="h3">Facebook</h4>
<p class="sds-iconLinkBox__description">Gérez vos principales opérations bancaires via S-Net</p>
</div>
</a>
<!-- Spot Meta -->
<a href="#" class="sds-iconLinkBox">
<span class="sds-iconLinkBox__icon sds-brandIconWrapper">
<img class="sds-iconLinkBox__icon" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-bankerclientb.svg" alt="" aria-hidden="true">
</span>
<div class="sds-iconLinkBox__inner sds-stackXs">
<h4 class="h4">S-Net</h4>
<p class="sds-metaColor sds-textHelper">19 articles</p>
<div class="sds-iconLinkBox__dot">
<div class="sr-only">Non lu</div>
<span class="sds-dot -dotDanger"></span>
</div>
</div>
</a>
<a href="{{ href or "#" }}" class="{{ namespace }}iconLinkBox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<span class="{{ namespace }}iconLinkBox__icon {{ namespace }}brandIconWrapper">
{% if inlineSVG %}
{{ inlineSVG | safe }}
{% else %}
{% if socialIcon %}
<img class="{{ namespace }}iconLinkBox__icon" src="{{ (mediaPath + "/snet/social-icons/" + socialIcon + ".svg") | path }}" alt="" aria-hidden="true">
{% elseif spotillu %}
<img class="{{ namespace }}iconLinkBox__icon" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-{{ spotillu or "bankerclientb" }}.svg" alt="" aria-hidden="true">
{% else %}
<img class="{{ namespace }}iconLinkBox__icon" src="https://design.spuerkeess.lu/media/brand-icons/svg48x/feature/sdsbrandicon-{{ icon or "package" }}.svg" alt="" aria-hidden="true">
{% endif %}
{% endif %}
</span>
<div class="{{ namespace }}iconLinkBox__inner {{ namespace }}stackXs">
<h4 class="{{ lvl or "h3" }}">{{ title or "S-Net" }}{% if external %} <span class="{{ namespace }}icon {{ namespace }}icon-externallink {{ namespace }}iconLinkBox__titleIcon" aria-hidden="true"></span>{% endif %}</h4>
{% if description %}<p class="{{ namespace }}iconLinkBox__description">{{ description }}</p>{% endif %}
{% if meta %}<p class="{{ namespace }}metaColor {{ namespace }}textHelper">{{ meta }}</p>{% endif %}
{% if badge %}
<div class="{{ namespace }}iconLinkBox__badge">
{% render "@badge--highlight-muted",{
text: badgeText
},true %}
</div>
{% endif %}
{% if badgeDot %}
<div class="{{ namespace }}iconLinkBox__dot">
<div class="sr-only">Non lu</div>
{% render "@snet-dot--danger" %}
</div>
{% endif %}
</div>
</a>
/* variables specific to current element */
$icon-link-box-padding: map-deep-get($token-spacer-inset-map, "md");
$icon-link-box-padding-lg: map-deep-get($token-spacer-inset-map, "lg");
.#{$namespace}iconLinkBox {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
position: relative;
z-index: z("zero");
display: flex;
align-items: stretch;
padding: $icon-link-box-padding;
border-radius: map-deep-get($token-radius-map, "16");
transition: box-shadow 0.15s linear;
@include custom-prop-fallback("background-color","comp-box-raised-background-color");
@include media-breakpoint-up(lg) {
flex-direction: column;
padding: $icon-link-box-padding-lg;
}
/* Pseudo Elements */
&::before,
&::after {
content: "";
position: absolute;
z-index: z("negative");
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: inherit;
transition: opacity 0.15s linear;
}
&::before {
box-shadow: map-deep-get($token-shadow-map, "active");
}
&::after {
box-shadow: map-deep-get($token-shadow-map, "detail");
opacity: 0;
}
/*
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 */
// iconLinkBox__icon
&__icon {
width: map-deep-get($token-sizes-unit-map, "48");
height: map-deep-get($token-sizes-unit-map, "48");
margin-right: map-deep-get($token-spacer-stack-max-map, "md");
svg,
IMG {
width: 100%;
height: 100%;
object-fit: cover;
}
@include media-breakpoint-up(lg) {
width: map-deep-get($token-sizes-unit-map, "64");
height: map-deep-get($token-sizes-unit-map, "64");
margin-right: 0;
margin-bottom: map-deep-get($token-spacer-stack-max-map, "lg");
}
}
&__titleIcon {
vertical-align: baseline;
&::before {
font-size: $font-size-base;
}
}
// iconLinkBox__inner
&__inner {
display: flex;
flex-direction: column;
justify-content: center;
}
&__badge {
display: flex;
margin-top: map-deep-get($token-spacer-stack-max-map, "sm");
@include media-breakpoint-up(lg) {
margin-top: 0;
position: absolute;
top: $icon-link-box-padding-lg;
right: $icon-link-box-padding-lg;
}
}
&__dot {
margin: 0;
display: inline-flex;
position: absolute;
top: $icon-link-box-padding;
right: $icon-link-box-padding;
@include media-breakpoint-up("lg") {
top: $icon-link-box-padding-lg;
right: $icon-link-box-padding-lg;
}
}
/* modifiers */
// iconLinkBox -row
&.-row {
// follows same logic as base element
@include media-breakpoint-up(lg) {
flex-direction: row;
}
#{$self}__icon {
margin-right: map-deep-get($token-spacer-stack-max-map, "md");
margin-bottom: 0;
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover,
&:focus {
@media (hover: hover) {
&::before {
opacity: 0;
}
&::after {
opacity: 1;
}
}
}
&:focus-visible {
outline: none !important;
&::before,
&::after {
outline: map-deep-get($design-tokens,"comp-tile-active-border-width") solid;
@include custom-prop-fallback("outline-color", "comp-tile-active-border-color");
}
}
&:active {
}
&:focus,
&:active {
}
}