No notes defined.
<!-- Default -->
<a href="" class="sds-pictureLinkBox sds-box sds-shadowInteraction">
<div class="sds-pictureLinkBox__img">
<img class="img-fluid" src="../../media/snet/components/picture-link-box/picture-link-box.jpg" alt="">
</div>
<div class="sds-pictureLinkBox__body">
<div class="sds-pictureLinkBox__text sds-stackMd">
<h3 class="sds-pictureLinkBox__title">Spuerkeess recrute !</h3>
<p class="sds-pictureLinkBox__description">Spuerkeess recherche continuellement des collaborateurs dynamiques et motivés ! Consultez nos offres d'emploi sur mylittlebigstep.lu.</p>
</div>
<div class="sds-pictureLinkBox__action">
<span class="sds-btn -btnSecondary stretched-link">
<span class="sds-btn__text">Postuler</span>
<span class="sds-icon sds-icon-arrownext"></span>
</span>
</div>
</div>
</a>
<!-- Vertical -->
<a href="" class="sds-pictureLinkBox sds-box sds-shadowInteraction -isVertical">
<div class="sds-pictureLinkBox__img">
<img class="img-fluid" src="../../media/snet/components/picture-link-box/picture-link-box.jpg" alt="">
</div>
<div class="sds-pictureLinkBox__body">
<div class="sds-pictureLinkBox__text sds-stackMd">
<h3 class="sds-pictureLinkBox__title">Spuerkeess recrute !</h3>
<p class="sds-pictureLinkBox__description">Spuerkeess recherche continuellement des collaborateurs dynamiques et motivés ! Consultez nos offres d'emploi sur mylittlebigstep.lu.</p>
</div>
<div class="sds-pictureLinkBox__action">
<span class="sds-btn -btnSecondary stretched-link">
<span class="sds-btn__text">Postuler</span>
<span class="sds-icon sds-icon-arrownext"></span>
</span>
</div>
</div>
</a>
<!-- Big -->
<a href="" class="sds-pictureLinkBox sds-box sds-shadowInteraction -isBig">
<div class="sds-pictureLinkBox__img">
<img class="img-fluid" src="../../media/snet/components/picture-link-box/picture-link-box.jpg" alt="">
</div>
<div class="sds-pictureLinkBox__body">
<div class="sds-pictureLinkBox__text sds-stackMd">
<h3 class="sds-pictureLinkBox__title">Spuerkeess recrute !</h3>
<p class="sds-pictureLinkBox__description">Spuerkeess recherche continuellement des collaborateurs dynamiques et motivés ! Consultez nos offres d'emploi sur mylittlebigstep.lu.</p>
</div>
<div class="sds-pictureLinkBox__action">
<span class="sds-btn -btnSecondary stretched-link">
<span class="sds-btn__text">Postuler</span>
<span class="sds-icon sds-icon-arrownext"></span>
</span>
</div>
</div>
</a>
<!-- Search Item -->
<a href="" class="sds-pictureLinkBox sds-box sds-shadowInteraction -isVertical -searchItem">
<div class="sds-pictureLinkBox__img">
<img class="img-fluid" src="../../media/snet/components/picture-link-box/picture-link-box.jpg" alt="">
</div>
<div class="sds-pictureLinkBox__body">
<div class="sds-pictureLinkBox__text sds-stackMd">
<h3 class="sds-pictureLinkBox__title">Spuerkeess recrute !</h3>
<p class="sds-pictureLinkBox__description">Spuerkeess recherche continuellement des collaborateurs dynamiques et motivés ! Consultez nos offres d'emploi sur mylittlebigstep.lu.</p>
</div>
<div class="sds-pictureLinkBox__action">
<span class="sds-btn -btnSecondary stretched-link">
<span class="sds-btn__text">Postuler</span>
<span class="sds-icon sds-icon-arrownext"></span>
</span>
</div>
</div>
</a>
<!-- Product -->
<a href="" class="sds-pictureLinkBox sds-box sds-shadowInteraction -product">
<div class="sds-pictureLinkBox__img">
<img class="img-fluid" src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">
</div>
<div class="sds-pictureLinkBox__body">
<div class="sds-pictureLinkBox__text sds-stackMd">
<h3 class="sds-pictureLinkBox__title">Spuerkeess recrute !</h3>
<p class="sds-pictureLinkBox__description">Spuerkeess recherche continuellement des collaborateurs dynamiques et motivés ! Consultez nos offres d'emploi sur mylittlebigstep.lu.</p>
</div>
<div class="sds-pictureLinkBox__action">
<span class="sds-btn -btnSecondary stretched-link">
<span class="sds-btn__text">Postuler</span>
<span class="sds-icon sds-icon-arrownext"></span>
</span>
</div>
</div>
</a>
<!-- Search Item Product -->
<a href="" class="sds-pictureLinkBox sds-box sds-shadowInteraction -isVertical -searchItem -product">
<div class="sds-pictureLinkBox__img">
<img class="img-fluid" src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">
</div>
<div class="sds-pictureLinkBox__body">
<div class="sds-pictureLinkBox__text sds-stackMd">
<h3 class="sds-pictureLinkBox__title">Spuerkeess recrute !</h3>
<p class="sds-pictureLinkBox__description">Spuerkeess recherche continuellement des collaborateurs dynamiques et motivés ! Consultez nos offres d'emploi sur mylittlebigstep.lu.</p>
</div>
<div class="sds-pictureLinkBox__action">
<span class="sds-btn -btnSecondary stretched-link">
<span class="sds-btn__text">Postuler</span>
<span class="sds-icon sds-icon-arrownext"></span>
</span>
</div>
</div>
</a>
<a href=""{% if document %} download="" {% endif %}class="{{ namespace }}pictureLinkBox {{ namespace }}box {{ namespace }}shadowInteraction{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
{% if nopic %}
<div class="{{ namespace }}pictureLinkBox__img">
{% render "@nopic-world",{
classes: [namespace + "pictureLinkBox__noPic"]
},true %}
</div>
{% else %}
<div class="{{ namespace }}pictureLinkBox__img">
<img class="img-fluid" src="{{ (mediaPath + img) | path }}" alt="">
</div>
{% endif %}
<div class="{{ namespace }}pictureLinkBox__body">
<div class="{{ namespace }}pictureLinkBox__text {{ namespace }}stackMd">
{% if meta %}
<span class="{{ namespace }}staticInlineXs {{ namespace }}metaColor {{ namespace }}textHelper d-flex align-items-baseline">
{% if document %}<span class="{{ namespace }}icon {{ namespace }}icon-document {{ namespace }}iconSizeInherit"></span>{% endif %}
<span>Blog</span>
</span>
{% endif %}
<h3 class="{{ namespace }}pictureLinkBox__title">{{ title }}</h3>
<p class="{{ namespace }}pictureLinkBox__description">{{ description }}</p>
</div>
{% if action %}
<div class="{{ namespace }}pictureLinkBox__action">
{% if iconBtn %}
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link"],
icon: icon,
action: action
},true %}
{% else %}
{% render "@btn-secondary--icon-right",{
eltType: "span",
classes: ["stretched-link"],
icon: icon,
text: action
},true %}
{% endif %}
</div>
{% endif %}
</div>
</a>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}pictureLinkBox {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
display: flex;
align-items: stretch;
border-radius: map-deep-get($token-radius-map, "16");
transition: box-shadow 0.15s linear;
position: relative;
z-index: z("low");
/* 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 */
// pictureLinkBox__img
&__img {
// follows same logic as parent
width: map-deep-get($token-sizes-unit-map, "96");
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
height: auto;
flex-shrink: 0;
IMG {
@supports (aspect-ratio: 16 / 9) {
aspect-ratio: 16 / 9;
}
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
border-radius: inherit;
}
[src$=".svg"] {
object-fit: contain;
}
@include media-breakpoint-up(lg) {
@include make-col(5)
}
}
&__noPic {
width: 100%;
height: 100%;
}
&__body {
display: flex;
flex-direction: column;
padding: map-deep-get($token-spacer-inset-map, "md");
flex: 0 1 100% !important;
@include media-breakpoint-up(lg) {
padding: map-deep-get($token-spacer-inset-map, "lg");
}
}
&__text {
@include spacer-component-stack("sm");
flex-grow: 1;
}
&__title {
@include fluid-type($min_width, $max_width, $h4-font-size-min, $h4-font-size, true);
* + & {
margin-top: map-deep-get($token-spacer-stack-max-map, "xs") !important;
}
}
&__description {
@extend %lineClampBase;
@extend %textEllipsisMd;
}
&__action {
display: none;
@include media-breakpoint-up(lg) {
display: block;
margin-top: map-deep-get($token-spacer-stack-max-map, "xl");
}
}
/* modifiers */
// pictureLinkBox -isVertical
&.-isVertical {
// follows same logic as base element
@include media-breakpoint-up(lg) {
flex-direction: column;
}
#{$self}__img {
@include media-breakpoint-up(lg) {
border-bottom-left-radius: 0;
border-top-right-radius: inherit;
@include make-col(12);
width: 100%;
flex: 0 1 auto;
}
}
}
&.-isBig {
#{$self}__title,
#{$self}__description {
@include media-breakpoint-up(lg) {
@include custom-prop-fallback("color","sys-color-text-primary-vivid");
@include fluid-type($min_width, $max_width, $h2-font-size-min, $h2-font-size, true);
}
}
#{$self}__description {
@include media-breakpoint-up(lg) {
font-weight: map-deep-get($token-font-weight-map, "regular")
}
}
}
&.-searchItem {
#{$self}__img {
@include media-breakpoint-between("xs","md") {
margin-top: map-deep-get($token-spacer-inset-map, "sm");
margin-left: map-deep-get($token-spacer-inset-map, "sm");
width: map-deep-get($token-sizes-unit-map, "64");
height: map-deep-get($token-sizes-unit-map, "64");
border-radius: map-deep-get($token-radius-map, "16");
}
@include media-breakpoint-up("lg") {
aspect-ratio: 16 / 9;
}
}
#{$self}__title {
@include media-breakpoint-between("xs","md") {
@include lineClampBase();
@include lineClamp(2)
}
}
#{$self}__description {
@include media-breakpoint-between("xs","md") {
@include lineClamp(1)
}
}
}
&.-product {
#{$self}__img {
display: flex;
justify-content: flex-end;
align-items: center;
@include custom-prop-fallback("background-color","comp-media-background-color");
IMG {
aspect-ratio: auto;
object-fit: contain;
object-position: right;
width: auto;
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}