No notes defined.
<!-- Default -->
<div class="sds-preciousMetal sds-box -insetLg sds-scaleInteraction ">
<div class="sds-stackXl">
<div class="sds-stackLg">
<div class="sds-preciousMetal__img">
<img src="../../media/spuerkeess-site/components/precious-metal/gold.png" alt="" class="img-fluid">
</div>
<div class="sds-stackXs">
<h3 class="h3">LINGOT OR 5 GRAMMES / FAIRTRADE</h3>
<p>Gold</p>
</div>
</div>
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<table class="sds-infoTable table -noBorder">
<tbody>
<tr>
<td class=>
<div class="sds-infoTable__cellContent">
<label for="" class="sds-label">
Spuerkeess bid
</label>
</div>
</td>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountXl">
<span class="sds-amount__value">293,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-label">
Spuerkeess ask
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountXl">
<span class="sds-amount__value">334,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<table class="sds-infoTable table -noBorder">
<tbody>
<tr>
<td class=>
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Type
</div>
</div>
</td>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
Bar
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-label">
Purity
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
999,9/1000
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-label">
Weight (net)
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
5,00 g
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-label">
Weight (brut)
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
100,00 g
</div>
</div>
</td>
</tr>
</tbody>
</table>
<a href="" class="sds-preciousMetal__action">
<div class="sds-preciousMetal__actionInner">
<span class="sds-btn -btnPrimary position-static stretched-link">
<span class="sds-btn__text">Acheter sur S-Net</span>
</span>
</div>
</a>
</div>
</div>
<!-- Nopic -->
<div class="sds-preciousMetal sds-box -insetLg sds-scaleInteraction ">
<div class="sds-stackXl">
<div class="sds-stackLg">
<div class="sds-preciousMetal__img">
<div class="sds-preciousMetal__noPic">
<div class="sds-noPic">
<svg width="630" height="630" viewBox="0 0 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="630" height="630" transform="translate(0 0.304688)" fill="#F0F6FF" />
<g opacity="0.32">
<path d="M411.436 305.117L411.452 305.133L411.469 305.147C417.042 309.792 418.919 317.228 416.113 324.713L416.109 324.721L416.106 324.73L402.693 364.97C402.693 364.972 402.692 364.973 402.692 364.975C398.007 378.081 382.145 382.703 371.893 372.451L361.351 361.91L360.497 361.056V362.263C360.497 371.603 353.023 380.93 341.831 380.93H231.622C217.602 380.93 208.295 365.98 214.813 353.875L214.816 353.868L214.82 353.862L233.986 315.528L233.993 315.515L233.999 315.502C236.782 309.007 243.287 305.263 250.789 305.263H303.497H304.705L303.851 304.41L293.309 293.868C284.005 284.563 287.695 267.752 301.739 263.071L341.978 249.658C348.516 247.794 355.988 249.669 360.644 254.325L411.436 305.117ZM231.175 362.04L230.813 362.763H231.622H341.831H342.64L342.278 362.04L323.111 323.706L322.973 323.43H322.664H250.789H250.48L250.342 323.706L231.175 362.04ZM384.602 359.742L385.179 360.318L385.431 359.543L398.848 318.335L398.943 318.043L398.726 317.826L347.934 267.035L347.717 266.818L347.426 266.913L306.218 280.329L305.442 280.582L306.019 281.158L384.602 359.742Z" fill="#4D6E90" stroke="#4D6E90" />
</g>
</svg>
</div>
</div>
</div>
<div class="sds-stackXs">
<h3 class="h3">LINGOT OR 5 GRAMMES / FAIRTRADE</h3>
<p>Gold</p>
</div>
</div>
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<table class="sds-infoTable table -noBorder">
<tbody>
<tr>
<td class=>
<div class="sds-infoTable__cellContent">
<label for="" class="sds-label">
Spuerkeess bid
</label>
</div>
</td>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountXl">
<span class="sds-amount__value">293,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-label">
Spuerkeess ask
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -amountXl">
<span class="sds-amount__value">334,00</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<table class="sds-infoTable table -noBorder">
<tbody>
<tr>
<td class=>
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Type
</div>
</div>
</td>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
Bar
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-label">
Purity
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
999,9/1000
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-label">
Weight (net)
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
5,00 g
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-label">
Weight (brut)
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
100,00 g
</div>
</div>
</td>
</tr>
</tbody>
</table>
<a href="" class="sds-preciousMetal__action">
<div class="sds-preciousMetal__actionInner">
<span class="sds-btn -btnPrimary position-static stretched-link">
<span class="sds-btn__text">Acheter sur S-Net</span>
</span>
</div>
</a>
</div>
</div>
<!-- Loading -->
<div class="sds-preciousMetal sds-box -insetLg sds-scaleInteraction ">
<div class="sds-stackXl">
<div class="sds-stackLg">
<span class="sds-skeletonUnit" style=" width: 144px; height: 144px;"></span>
<div class="sds-staticStackXs">
<span class="sds-skeletonUnit -skeletonUnitH2"></span>
<span class="sds-skeletonUnit -skeletonUnitH2 w-25"></span>
</div>
</div>
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken sds-skeletonUnit -floating position-relative" style="height: 112px;"></div>
<div class="sds-stackXl">
<span class="sds-skeletonUnit -skeletonUnitH3"></span>
<span class="sds-skeletonUnit -skeletonUnitH3"></span>
<span class="sds-skeletonUnit -skeletonUnitH3"></span>
<span class="sds-skeletonUnit -skeletonUnitH3"></span>
</div>
</div>
</div>
<!-- Default -->
<div class="{{ namespace }}preciousMetal {{ namespace }}box -insetLg {{ namespace }}scaleInteraction {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}stackXl">
<div class="{{ namespace }}stackLg">
<div class="{{ namespace }}preciousMetal__img">
{% if nopic %}
<div class="{{ namespace }}preciousMetal__noPic">
{% render "@nopic-ingot" %}
</div>
{% else %}
<img src="{{ (mediaPath + img) | path }}" alt="" class="img-fluid">
{% endif %}
</div>
<div class="{{ namespace }}stackXs">
<h3 class="h3">{{ title }}</h3>
<p>{{ description }}</p>
</div>
</div>
<div class="{{ namespace }}box -insetLg {{ namespace }}box__outOfBoundsMd -boxSunken">
<table class="{{ namespace }}infoTable table -noBorder">
<tbody>
<tr>
<td class=>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
text: "Spuerkeess bid"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--xtra-large",{
text: "293,00"
},true %}
</div>
</td>
</tr>
<tr>
<td class="">
{% render "@label",{
eltType: "div",
text: "Spuerkeess ask"
},true %}
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--xtra-large",{
text: "334,00"
},true %}
</div>
</td>
</tr>
</tbody>
</table>
</div>
<table class="{{ namespace }}infoTable table -noBorder">
<tbody>
<tr>
<td class=>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Type"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
Bar
</div>
</div>
</td>
</tr>
<tr>
<td class="">
{% render "@label",{
eltType: "div",
text: "Purity"
},true %}
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
999,9/1000
</div>
</div>
</td>
</tr>
<tr>
<td class="">
{% render "@label",{
eltType: "div",
text: "Weight (net)"
},true %}
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
5,00 g
</div>
</div>
</td>
</tr>
<tr>
<td class="">
{% render "@label",{
eltType: "div",
text: "Weight (brut)"
},true %}
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
100,00 g
</div>
</div>
</td>
</tr>
</tbody>
</table>
<a href="" class="{{ namespace }}preciousMetal__action">
<div class="{{ namespace }}preciousMetal__actionInner">
{% render "@btn-primary", {
eltType: "span",
text: "Acheter sur S-Net",
classes: ["position-static","stretched-link"]
}, true %}
</div>
</a>
</div>
</div>
<!-- Nopic -->
<div class="{{ namespace }}preciousMetal {{ namespace }}box -insetLg {{ namespace }}scaleInteraction {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}stackXl">
<div class="{{ namespace }}stackLg">
<div class="{{ namespace }}preciousMetal__img">
{% if nopic %}
<div class="{{ namespace }}preciousMetal__noPic">
{% render "@nopic-ingot" %}
</div>
{% else %}
<img src="{{ (mediaPath + img) | path }}" alt="" class="img-fluid">
{% endif %}
</div>
<div class="{{ namespace }}stackXs">
<h3 class="h3">{{ title }}</h3>
<p>{{ description }}</p>
</div>
</div>
<div class="{{ namespace }}box -insetLg {{ namespace }}box__outOfBoundsMd -boxSunken">
<table class="{{ namespace }}infoTable table -noBorder">
<tbody>
<tr>
<td class=>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
text: "Spuerkeess bid"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--xtra-large",{
text: "293,00"
},true %}
</div>
</td>
</tr>
<tr>
<td class="">
{% render "@label",{
eltType: "div",
text: "Spuerkeess ask"
},true %}
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
{% render "@amount--xtra-large",{
text: "334,00"
},true %}
</div>
</td>
</tr>
</tbody>
</table>
</div>
<table class="{{ namespace }}infoTable table -noBorder">
<tbody>
<tr>
<td class=>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Type"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
Bar
</div>
</div>
</td>
</tr>
<tr>
<td class="">
{% render "@label",{
eltType: "div",
text: "Purity"
},true %}
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
999,9/1000
</div>
</div>
</td>
</tr>
<tr>
<td class="">
{% render "@label",{
eltType: "div",
text: "Weight (net)"
},true %}
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
5,00 g
</div>
</div>
</td>
</tr>
<tr>
<td class="">
{% render "@label",{
eltType: "div",
text: "Weight (brut)"
},true %}
</td>
<td class="">
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
100,00 g
</div>
</div>
</td>
</tr>
</tbody>
</table>
<a href="" class="{{ namespace }}preciousMetal__action">
<div class="{{ namespace }}preciousMetal__actionInner">
{% render "@btn-primary", {
eltType: "span",
text: "Acheter sur S-Net",
classes: ["position-static","stretched-link"]
}, true %}
</div>
</a>
</div>
</div>
<!-- Loading -->
<div class="{{ namespace }}preciousMetal {{ namespace }}box -insetLg {{ namespace }}scaleInteraction {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}stackXl">
<div class="{{ namespace }}stackLg">
{% render "@skeleton-unit",{
inlineCSS: {
"width": "144px",
"height": "144px"
}
},true %}
<div class="{{ namespace }}staticStackXs">
{% render "@skeleton-unit--h2" %}
{% render "@skeleton-unit--h2",{
classes: ["w-25"]
},true %}
</div>
</div>
<div class="{{ namespace }}box -insetLg {{ namespace }}box__outOfBoundsMd -boxSunken {{ namespace }}skeletonUnit -floating position-relative" style="height: 112px;"></div>
<div class="{{ namespace }}stackXl">
{% render "@skeleton-unit--h3" %}
{% render "@skeleton-unit--h3" %}
{% render "@skeleton-unit--h3" %}
{% render "@skeleton-unit--h3" %}
</div>
</div>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}preciousMetal {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
position: relative;
/* 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 */
&__img {
height: 144px;
IMG {
height: 100%;
object-fit: contain;
}
}
&__noPic {
width: 144px;
border-radius: map-deep-get($token-radius-map, "16");
}
// preciousMetal__action
&__action {
// follows same logic as parent
display: block;
@media (hover: hover) {
position: absolute;
z-index: z("zero");
pointer-events: none;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding: inherit;
margin-top: 0 !important;
&:focus {
#{$self}__actionInner {
transform: none;
opacity: 1;
}
}
}
}
&__actionInner {
text-align: center;
@media (hover: hover) {
opacity: 0;
pointer-events: auto;
transform: translateY(25%);
transition: opacity 0.15s linear, transform 0.15s linear;
@include opacityBg();
box-shadow: map-deep-get($token-shadow-map, "active");
padding: map-deep-get($token-spacer-inset-map, "sm");
border-radius: map-deep-get($token-radius-map, "button-small")*2;
margin-bottom: $box-lg-inset-spacing-mobile-global;
@include media-breakpoint-up("lg") {
margin-bottom: $box-lg-inset-spacing-desktop-global;
}
}
}
/* modifiers */
// preciousMetal -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover,
&:focus {
@media (hover: hover) {
#{$self}__actionInner {
transform: none;
opacity: 1;
}
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}