No notes defined.
<article class="sds-cardEvent sds-box -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="sds-cardEvent__body sds-stackXl">
<div class="sds-cardEvent__text sds-stackMd">
<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 sds-staticGapMd">
<div class="sds-stackXs">
<p class="sds-cardEvent__date">
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">
<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>
</article>
{% set badgeVariant = "@badge-status--" + badgeStatus %}
<article class="{{ namespace }}cardEvent {{ namespace }}box{% 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="{{ namespace }}cardEvent__body {{ namespace }}stackXl">
<div class="{{ namespace }}cardEvent__text {{ namespace }}stackMd">
<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 {{ namespace }}staticGapMd">
<div class="{{ namespace }}stackXs">
<p class="{{ namespace }}cardEvent__date">
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">
<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>
</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 */
position: relative;
padding: 0;
box-shadow: 0 0 16px 0 var(--sys-color-elevation-shadow-primary-transparent);
/* 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;
height: auto;
flex-shrink: 0;
IMG {
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
border-radius: inherit;
}
}
// cardEvent__body
&__body {
display: flex;
flex-direction: column;
padding: map-deep-get($token-spacer-inset-map, "lg");
}
// cardEvent__text
&__text {
@include spacer-component-stack("md");
flex-grow: 1;
}
// cardEvent__date
&__date {
font-size: 20px;
font-weight: var(--sys-font-weight-bold);
}
// cardEvent__revealAction
&__revealAction {
display: flex;
justify-content: center;
align-items: flex-end;
border-radius: inherit;
position: absolute;
inset: 0;
padding: $spacer-unit-24;
}
&__revealActionInner {
border-radius: $border-radius-lg;
background-color: white;
box-shadow: 0 0 64px 0 var(--sys-color-elevation-shadow-primary-subtle, rgba(0, 48, 96, 0.24));
backdrop-filter: blur(32px);
gap: var(--comp-card-product-floating-footer-inline);
padding: var(--comp-card-product-floating-footer-inset-v) var(--comp-card-product-floating-footer-inset-h);
opacity: 0;
transform: translateY(40%);
transition: opacity 0.15s linear, transform 0.15s linear;
}
/* modifiers */
// cardEvent -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
#{$self}__revealActionInner {
opacity: 1;
transform: translateY(0);
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}