When using an outline variant, be sure to change the rendered icon btn's classes. Full background is icon btn cta secondary, outlined is icon btn base.
<!-- Default -->
<div class="sds-contentBox">
<div class="sds-contentBox__text sds-stackSm">
<div class="h3">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<!-- Info -->
<div class="sds-contentBox -info">
<div class="sds-contentBox__text sds-stackSm">
<div class="h3">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<!-- Important -->
<div class="sds-contentBox -important">
<div class="sds-contentBox__text sds-stackSm">
<div class="h3">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<!-- Success -->
<div class="sds-contentBox -success">
<div class="sds-contentBox__text sds-stackSm">
<div class="h3">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<!-- Warning -->
<div class="sds-contentBox -warning">
<div class="sds-contentBox__text sds-stackSm">
<div class="h3">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<!-- Link -->
<a href="" class="sds-contentBox">
<span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
<div class="sds-contentBox__text sds-stackSm">
<div class="h4">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>
</div>
</a>
<!-- Modal -->
<button type="button" class="sds-contentBox" data-toggle="modal" data-target="##modalID">
<span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall">
<span class="sds-icon sds-icon-infocircleborder"></span>
</span>
<div class="sds-contentBox__text sds-stackSm">
<div class="h4">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>
</div>
</button>
<!-- Info Outline -->
<a href="" class="sds-contentBox -info -outline">
<span class="sds-btn -iconBtn -btnSecondary -btnSmall">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
<div class="sds-contentBox__text sds-stackSm">
<div class="h4">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>
</div>
</a>
<!-- Important Outline -->
<a href="" class="sds-contentBox -important -outline">
<span class="sds-btn -iconBtn -btnSecondary -btnSmall">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
<div class="sds-contentBox__text sds-stackSm">
<div class="h4">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>
</div>
</a>
<!-- Success Outline -->
<a href="" class="sds-contentBox -success -outline">
<span class="sds-btn -iconBtn -btnSecondary -btnSmall">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
<div class="sds-contentBox__text sds-stackSm">
<div class="h4">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>
</div>
</a>
<!-- Warning Outline -->
<a href="" class="sds-contentBox -warning -outline">
<span class="sds-btn -iconBtn -btnSecondary -btnSmall">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
<div class="sds-contentBox__text sds-stackSm">
<div class="h4">Pour ce type de rendez-vous, seule votre d’agence d’affectation est disponible.</div>
</div>
</a>
<{{ eltType}} {% if eltType === "a" %} href="{{ href }}"{% elseif eltType === "button" %} type="button"{%- endif -%} class="{{ namespace }}contentBox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if modal %} data-toggle="modal" data-target="#{{ modal }}"{% endif %}>
{% if eltType === "a" or eltType === "button" %}
{% if outline %}
{% render "@icon-btn-secondary--small",{eltType: "span", icon: icon},true %}
{% else %}
{% render "@icon-btn-secondary-inverse--small",{eltType: "span", icon: icon},true %}
{% endif %}
{% endif %}
<div class="{{ namespace }}contentBox__text {{ namespace }}stackSm">
<div class="{% if titleSmall %}h4{% else %}h3{% endif %}">{{ title }}</div>
{% if text %}
<p>
{{ text }}
</p>
{% endif %}
</div>
{% if haslinkBtn %}
<div class="align-self-center flex-shrink-0">
{% render "@btn-secondary-inverse",{
text: btnText
},true %}
</div>
{% endif %}
</{{ eltType}}>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}contentBox {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
display: flex;
align-items: stretch;
@include custom-prop-fallback("background-color", "comp-alert-banner-primary-background-color");
@include custom-prop-fallback-override("comp-heading-text-color", "comp-alert-banner-primary-heading-text-color");
width: 100%; // for button elements
text-align: left;
gap: map-deep-get($token-spacer-inline-map, "md");
padding: map-deep-get($token-spacer-inset-map, "md");
border-radius: map-deep-get($token-radius-map, "16");
@include media-breakpoint-up(lg) {
padding: map-deep-get($token-spacer-inset-map, "lg");
}
/* 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 */
// contentBox__text
&__text {
// follows same logic as parent
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
@include custom-prop-fallback("color", "comp-heading-text-color");
flex-grow: 1;
flex-shrink: 1;
}
/* modifiers */
// contentBox -inverted
&.-info {
// follows same logic as base element
@include custom-prop-fallback("background-color", "comp-alert-banner-info-background-color");
@include custom-prop-fallback-override("comp-heading-text-color", "comp-alert-banner-info-heading-text-color");
&.-outline {
@include custom-prop-fallback("border-color", "sys-color-border-status-info-strong");
}
}
&.-important {
// follows same logic as base element
@include custom-prop-fallback("background-color", "comp-alert-banner-danger-background-color");
@include custom-prop-fallback-override("comp-heading-text-color", "comp-alert-banner-danger-heading-text-color");
&.-outline {
@include custom-prop-fallback("border-color", "sys-color-border-status-danger-strong");
}
}
&.-success {
// follows same logic as base element
@include custom-prop-fallback("background-color", "comp-alert-banner-success-background-color");
@include custom-prop-fallback-override("comp-heading-text-color", "comp-alert-banner-success-heading-text-color");
&.-outline {
@include custom-prop-fallback("border-color", "sys-color-border-status-success-strong");
}
}
&.-warning {
// follows same logic as base element
@include custom-prop-fallback("background-color", "comp-alert-banner-warning-background-color");
@include custom-prop-fallback-override("comp-heading-text-color", "comp-alert-banner-warning-heading-text-color");
&.-outline {
@include custom-prop-fallback("border-color", "sys-color-border-status-warning-strong");
}
}
&.-outline {
border: $border-width*2 solid;
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
@include custom-prop-fallback-override("comp-heading-text-color", "comp-alert-banner-primary-heading-text-color");
}
&.-hasLinkBtn {
flex-wrap: wrap;
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}