Media: Xs

300 × 150

Modifiers

The media element has the following modifiers

Size:

  • -mediaXs
  • -mediaSm
  • -mediaLg
  • -mediaXl

Misc

  • -mediaHasBg: Gives the media a background
  • -mediaRounded: Gives the media rounded corners. The rounded corners are different with each size variant
  • -mediaBorder: Gives the media a border
<div class="sds-media -mediaXs">

    <img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">

</div>
{% if internalResource %}
	{% set mediaPath = (mediaPath+img)  %}
{% else %}
	{% set mediaPath = img  %}
{% endif %}
<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) | path }}" alt="">
	{% endif %}
</div>
  • Content:
    /* 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","ui-size-80");
    	@include custom-prop-fallback("height","ui-size-80");
    	@include custom-prop-fallback("border-radius","comp-media-md-border-radius");
    	display: inline-flex;
    	align-items: center;
    	justify-content: center;
    	flex-shrink: 0;
    
    	/* 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-md-icon-size");
    
    		}
    
    	}
    
    	/* modifiers */
    
    	&.-mediaXs {
    
    		@include custom-prop-fallback("width","comp-media-xs-width");
    		@include custom-prop-fallback("height","comp-media-xs-width");
    		@include custom-prop-fallback-override("comp-media-md-border-radius","comp-media-xs-border-radius");
    		@include custom-prop-fallback-override("comp-media-fallback-md-icon-size","comp-media-fallback-xs-icon-size");
    
    	}
    
    	&.-mediaSm {
    
    		@include custom-prop-fallback("width","ui-size-64");
    		@include custom-prop-fallback("height","ui-size-64");
    		@include custom-prop-fallback-override("comp-media-md-border-radius","comp-media-sm-border-radius");
    		@include custom-prop-fallback-override("comp-media-fallback-md-icon-size","comp-media-fallback-sm-icon-size");
    
    	}
    
    	&.-mediaLg {
    
    		@include custom-prop-fallback("width","ui-size-144");
    		@include custom-prop-fallback("height","ui-size-144");
    		@include custom-prop-fallback-override("comp-media-md-border-radius","comp-media-lg-border-radius");
    		@include custom-prop-fallback-override("comp-media-fallback-md-icon-size","comp-media-fallback-lg-icon-size");
    
    	}
    
    	&.-mediaXl {
    
    		@include custom-prop-fallback("width","ui-size-192");
    		@include custom-prop-fallback("height","ui-size-192");
    		@include custom-prop-fallback-override("comp-media-md-border-radius","comp-media-xl-border-radius");
    		@include custom-prop-fallback-override("comp-media-fallback-md-icon-size","comp-media-fallback-xl-icon-size");
    
    	}
    
    	//&.-mediaXl {
    	//
    	//	@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-md-icon-size","comp-media-fallback-giga-icon-size");
    	//
    	//}
    	//
    	//&.-media2Xl {
    	//
    	//	@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-md-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-md-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 {
    	}
    
    }
  • URL: /components/raw/media/_media.scss
  • Filesystem Path: components/token-based/content/media/_media.scss
  • Size: 4.1 KB