No notes defined.
<div class="sds-storeCard sds-box -insetLg">
<div class="sds-storeCard__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/brand-icons/svg48x/feature/sdsbrandicon-settings.svg" alt="" aria-hidden="true">
</div>
<div class="sds-storeCard__content">
<div class="h4">Gestion des bénéficiaires</div>
</div>
<div class="sds-storeCard__action">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost stretched-link">
<span class="sds-icon sds-icon-chevronright"></span>
</button>
</div>
</div>
<div class="{{ namespace }}storeCard {{ namespace }}box -insetLg{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}storeCard__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/brand-icons/svg48x/feature/sdsbrandicon-{{ icon }}.svg" alt="" aria-hidden="true">
</div>
<div class="{{ namespace }}storeCard__content">
<div class="h4">{{ title }}</div>
{%- if description %}<p>{{ description }}</p>{% endif %}
</div>
{% if action %}
<div class="{{ namespace }}storeCard__action">
{% render "@icon-btn-secondary--ghost",{
icon: "icon-chevronright",
classes: ["stretched-link"]
},true %}
</div>
{% endif %}
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}storeCard {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
position: relative;
border-radius: map-deep-get($token-radius-map, "16");
display: flex;
align-items: center;
/* 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 */
// storeCard__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-inline-map, "md");
flex-shrink: 0;
}
// storeCard__content
&__content {
// follows same logic as parent
flex-grow: 1;
}
// storeCard__action
&__action {
margin-left: map-deep-get($token-spacer-inline-map, "md");
}
/* modifiers */
// storeCard -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}