No notes defined.
<article class="sds-cardEvent sds-box sds-shadowInteraction -boxInsetLg">
<div class="sds-cardEvent__img">
<img class="img-fluid" src="../../media/snet/components/picture-link-box/picture-link-box.jpg" alt="" />
</div>
<div class="d-flex justify-content-between flex-grow-1 flex-column sds-stackXl">
<div class="sds-cardEvent__text sds-stackSm flex-grow-1">
<h3 class="sds-cardEvent__title h3">Conférence Invitation à un atelier – Cybersécurité et bonnes pratiques en ligne</h3>
<p class="sds-cardEvent__description">Présentation en langue luxembourgeoise</p>
</div>
<div class="sds-cardEvent__info sds-box -boxInsetLg -boxSunken sds-stackLg">
<div class="d-flex justify-content-between flex-wrap sds-staticGapMd">
<div class="sds-stackXs">
<p class="sds-headingColor sds-textBodyXl sds-textBold">
Jeudi 01.01.2026
</p>
<p class="sds-metaColor sds-textHelperSmall">
20h00 - 23h00
</p>
</div>
<div class="flex-shrink-0 d-flex align-items-center">
<span class="sds-badge badge -badgeDanger -badgeMuted">
<span class="sds-icon sds-icon-minuscircleborder" aria-hidden="true"></span>
Annulé
</span>
</div>
</div>
</div>
</div>
<div class="sds-cardEvent__revealAction">
<div class="sds-cardEvent__revealActionTransition">
<ul class="sds-cardEvent__revealActionInner sds-btnGroup">
<li>
<a href="" class="sds-btn -btnSecondary stretched-link">
<span class="sds-btn__text">
Plus d'infos
</span>
</a>
</li>
</ul>
</div>
</div>
</article>
{% set badgeVariant = "@badge-status--" + badgeStatus %}
<article class="{{ namespace }}cardEvent {{ namespace }}box {{ namespace }}shadowInteraction{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}cardEvent__img">
<img class="img-fluid" src="{{ (mediaPath + img) | path }}" alt="" />
</div>
<div class="d-flex justify-content-between flex-grow-1 flex-column {{ namespace }}stackXl">
<div class="{{ namespace }}cardEvent__text {{ namespace }}stackSm flex-grow-1">
<h3 class="{{ namespace }}cardEvent__title h3">{{ title }}</h3>
<p class="{{ namespace }}cardEvent__description">{{ text }}</p>
</div>
<div class="{{ namespace }}cardEvent__info {{ namespace }}box -boxInsetLg -boxSunken {{ namespace }}stackLg">
<div class="d-flex justify-content-between flex-wrap {{ namespace }}staticGapMd">
<div class="{{ namespace }}stackXs">
<p class="{{ namespace }}headingColor {{ namespace }}textBodyXl {{ namespace }}textBold">
Jeudi 01.01.2026
</p>
<p class="{{ namespace }}metaColor {{ namespace }}textHelperSmall">
20h00 - 23h00
</p>
</div>
<div class="flex-shrink-0 d-flex align-items-center">
{% render badgeVariant, {
status: badgeStatus,
iconLeft: badgeIcon,
text: badgeText
}, true %}
</div>
</div>
</div>
</div>
<div class="{{ namespace }}cardEvent__revealAction">
<div class="{{ namespace }}cardEvent__revealActionTransition">
<ul class="{{ namespace }}cardEvent__revealActionInner {{ namespace }}btnGroup">
<li>
{% render "@btn-secondary",{
classes: ["stretched-link"],
eltType: "a",
text: "Plus d'infos"
},true %}
</li>
{% if not isCanceled %}
<li class="{{ namespace }}aboveClickArea">
{% render "@btn-primary",{
eltType: "a",
text: "S'inscrire"
},true %}
</li>
{% endif %}
</ul>
</div>
</div>
</article>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}cardEvent {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
display: flex;
flex-direction: column;
/* 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 */
// cardEvent__img
&__img {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
margin-top: calc(-1 * var(--comp-box-inset));
margin-inline: calc(-1 * var(--comp-box-inset));
margin-bottom: var(--comp-box-inset);
aspect-ratio: 16 / 9;
IMG {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
border-radius: inherit;
}
}
// cardEvent__revealAction
&__revealAction {
position: absolute;
inset: 0;
overflow: hidden;
}
&__revealActionTransition {
display: flex;
justify-content: center;
align-items: flex-end;
border-radius: inherit;
position: absolute;
padding: var(--comp-box-inset);
padding-bottom: calc(var(--comp-box-inset) * 1.75);
inset: 0;
transform: translateY(calc(var(--comp-box-inset) * 1.75));
transition: opacity 0.15s linear, transform 0.15s linear;
}
&__revealActionInner {
@include custom-prop-fallback("padding","comp-card-product-floating-footer-inset-h");
@include custom-prop-fallback("box-shadow","comp-card-product-floating-footer-box-shadow");
@include custom-prop-fallback("background-color","comp-card-product-floating-footer-background-color");
border-radius: map-deep-get($token-button-size-big-map, "desktop", "border-radius");
opacity: 0;
flex-wrap: wrap;
@include custom-prop-fallback("row-gap","ui-space-inset-vertical-static-250");
}
/* modifiers */
// cardEvent -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover,
&:has(BUTTON:focus-visible, A:focus-visible) {
@media (hover: hover) {
#{$self}__revealActionTransition {
transform: none !important;
}
#{$self}__revealActionInner {
opacity: 1;
}
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}