The media element has the following modifiers
<!-- Default -->
<div class="sds-media">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">
</div>
<!-- 2 Xs -->
<div class="sds-media -media2xs">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">
</div>
<!-- Xs -->
<div class="sds-media -mediaXs">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">
</div>
<!-- Lg -->
<div class="sds-media -mediaLg">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">
</div>
<!-- Xl -->
<div class="sds-media -mediaXl">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">
</div>
<!-- Brand Icon -->
<div class="sds-media -media2xs">
<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="M27.7782 17.7071L13.6361 31.8493L12.2219 30.4351L26.364 16.2929L27.7782 17.7071Z" fill="#DE0000" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 42C4 44.7614 6.23858 47 9 47H24V45H9C7.34315 45 6 43.6569 6 42V4L34 4L34 20L34 21L34 42C34 44.7614 36.2386 47 39 47H40C42.7614 47 45 44.7614 45 42V20H36L36 2H4V42ZM39 45C37.3431 45 36 43.6569 36 42L36 22H43V42C43 43.6569 41.6569 45 40 45H39ZM26 27C24.8954 27 24 27.8954 24 29C24 30.1046 24.8954 31 26 31C27.1046 31 28 30.1046 28 29C28 27.8954 27.1046 27 26 27ZM22 29C22 26.7909 23.7909 25 26 25C28.2091 25 30 26.7909 30 29C30 31.2091 28.2091 33 26 33C23.7909 33 22 31.2091 22 29ZM12 19C12 17.8954 12.8954 17 14 17C15.1046 17 16 17.8954 16 19C16 20.1046 15.1046 21 14 21C12.8954 21 12 20.1046 12 19ZM14 15C11.7909 15 10 16.7909 10 19C10 21.2091 11.7909 23 14 23C16.2091 23 18 21.2091 18 19C18 16.7909 16.2091 15 14 15Z" fill="#003060" />
</svg>
</div>
<!-- Background -->
<div class="sds-media -media2xs -mediaHasBg -mediaRounded">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">
</div>
<!-- Border -->
<div class="sds-media -media2xs -mediaBorder -mediaRounded">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">
</div>
<!-- Fallback -->
<div class="sds-media -media2xs -mediaHasBg -mediaRounded">
<span class="sds-media__icon sds-icon sds-icon-photo"></span>
</div>
<!-- Fetch -->
<div class="sds-media -media2xs -mediaRounded">
<span class="sds-skeletonUnit -floating -radiusInherit"></span>
</div>
<div class="{{ namespace }}media{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
{% if fallback %}
<span class="{{ namespace }}media__icon {{ namespace }}icon {{ namespace }}icon-photo"></span>
{% endif %}
{% if fetch %}
{% render "@skeleton-unit",{
classes: ["-floating", "-radiusInherit"]
},true %}
{% endif %}
{% if inlineSvg %}
{{ inlineSvg | safe }}
{% elseif img %}
<img src="{{ (mediaPath + img) | path }}" alt="">
{% endif %}
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}media {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
position: relative;
z-index: z("zero");
@include custom-prop-fallback("width","comp-media-width");
@include custom-prop-fallback("height","comp-media-height");
display: inline-flex;
align-items: center;
justify-content: 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 */
// media__childElement
svg,
IMG {
// follows same logic as parent
width: 100%;
height: 100%;
object-fit: contain;
}
IMG {
border-radius: inherit;
}
&__icon {
@include custom-prop-fallback("color","comp-media-fallback-icon-background-color");
&::before {
@include custom-prop-fallback("font-size","comp-media-fallback-medium-icon-size");
}
}
/* modifiers */
&.-media2xs {
@include custom-prop-fallback("width","comp-media-large-width");
@include custom-prop-fallback("height","comp-media-large-height");
@include custom-prop-fallback-override("comp-media-extra-small-border-radius","comp-media-large-border-radius");
@include custom-prop-fallback-override("comp-media-fallback-medium-icon-size","comp-media-fallback-large-icon-size");
}
&.-mediaXs {
@include custom-prop-fallback("width","comp-media-extra-large-width");
@include custom-prop-fallback("height","comp-media-extra-large-height");
@include custom-prop-fallback-override("comp-media-extra-small-border-radius","comp-media-extra-large-border-radius");
@include custom-prop-fallback-override("comp-media-fallback-medium-icon-size","comp-media-fallback-extra-large-icon-size");
}
&.-mediaLg {
@include custom-prop-fallback("width","comp-media-giga-width");
@include custom-prop-fallback("height","comp-media-giga-height");
@include custom-prop-fallback-override("comp-media-extra-small-border-radius","comp-media-giga-border-radius");
@include custom-prop-fallback-override("comp-media-fallback-medium-icon-size","comp-media-fallback-giga-icon-size");
}
&.-mediaXl {
@include custom-prop-fallback("width","comp-media-tera-width");
@include custom-prop-fallback("height","comp-media-tera-height");
@include custom-prop-fallback-override("comp-media-extra-small-border-radius","comp-media-tera-border-radius");
@include custom-prop-fallback-override("comp-media-fallback-medium-icon-size","comp-media-fallback-tera-icon-size");
}
// media -hasBG
&.-mediaHasBg {
// follows same logic as base element
@include custom-prop-fallback("background-color","comp-media-background-color");
}
&.-mediaRounded {
@include custom-prop-fallback("border-radius","comp-media-extra-small-border-radius");
}
&.-mediaBorder {
border: map-deep-get($design-tokens, "comp-media-outline-border-width") solid;
@include custom-prop-fallback("border-color","comp-media-outline-border-color");
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}