Badges are found in the base component tab in atoms.
Available social icons are:
All icons are available in the same folder.
<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 {
}
}