No notes defined.
<!-- Default -->
<div class="sds-obligationCard sds-box -insetLg sds-scaleInteraction">
<div class="sds-stackXxl">
<div class="sds-staticStackXs">
<h3 class="h3">JPMorgan Chase & Co (USD)</h3>
<p>US46625HKC33</p>
<p>Banques et autres institutions de crédit</p>
</div>
<div class="sds-stackXxl sds-box__outOfBoundsMd">
<div class="sds-obligationCard__recapArea">
<div class="sds-obligationCard__recapAreaRow row row-xs align-items-stretch-immediate no-bottom-gutter">
<div class="col-12 col-md-6">
<div class="sds-box -insetLg -boxSunken">
<table class="sds-infoTable table -noBorder">
<tbody>
<tr>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-label">
A l'achat
</div>
</div>
</td>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
<div class="sds-amount -amountXl">
<span class="sds-amount__value">106,85</span>
<span class="sds-amount__currency">%</span>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12 col-md-6">
<div class="sds-box -insetLg -boxSunken">
<table class="sds-infoTable table -noBorder">
<tbody>
<tr>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-label">
A la vente
</div>
</div>
</td>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
<div class="sds-amount -amountXl">
<span class="sds-amount__value">109,60</span>
<span class="sds-amount__currency">%</span>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="sds-obligationCard__tableWrapper sds-box -insetLg">
<table class="sds-obligationCard__table sds-infoTable table -noBorder">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td class=>
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Rendement à l'échéance achat (%)
</div>
</div>
</td>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
0.97
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td class=>
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Rendement à l'échéance vente (%)
</div>
</div>
</td>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
0.87
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td class=>
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Coupon
</div>
</div>
</td>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
3.125
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td class=>
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Marché
</div>
</div>
</td>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
Secondaire
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Maturité
</div>
</div>
</td>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
23.01.2025
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Nominal facial unitaire
</div>
</div>
</td>
<td>
<div class="sds-infoTable__cellContent">
<div class="sds-textBodyLg">
2.000,00
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<a href="" class="sds-obligationCard__action">
<div class="sds-obligationCard__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-obligationCard sds-box -insetLg sds-scaleInteraction">
<div class="sds-stackXxl">
<div class="sds-staticStackXs">
<span class="sds-skeletonUnit -skeletonUnitH2"></span>
<span class="sds-skeletonUnit -skeletonUnitH3 w-25"></span>
<span class="sds-skeletonUnit -skeletonUnitH3 w-50"></span>
</div>
<div class="sds-stackXxl sds-box__outOfBoundsMd">
<div class="sds-obligationCard__recapArea sds-contextLoadingBlock -floating">
<div class="sds-obligationCard__recapAreaRow row row-xs no-bottom-gutter">
<div class="col-12 col-md-6">
<span class="sds-skeletonUnit" style=" height: var(--obligation-card-recap-zone-card-height);"></span>
</div>
<div class="col-12 col-md-6">
<span class="sds-skeletonUnit" style=" height: var(--obligation-card-recap-zone-card-height);"></span>
</div>
</div>
</div>
<div class="sds-obligationCard__tableWrapper sds-box -insetLg">
<div class="sds-stackXl">
<span class="sds-skeletonUnit -skeletonUnitH2"></span>
<span class="sds-skeletonUnit -skeletonUnitH2"></span>
<span class="sds-skeletonUnit -skeletonUnitH2"></span>
</div>
</div>
</div>
</div>
</div>
<!-- Default -->
<div class="{{ namespace }}obligationCard {{ namespace }}box -insetLg {{ namespace }}scaleInteraction{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}stackXxl">
<div class="{{ namespace }}staticStackXs">
<h3 class="h3">JPMorgan Chase & Co (USD)</h3>
<p>US46625HKC33</p>
<p>Banques et autres institutions de crédit</p>
</div>
<div class="{{ namespace }}stackXxl {{ namespace }}box__outOfBoundsMd">
<div class="{{ namespace }}obligationCard__recapArea">
<div class="{{ namespace }}obligationCard__recapAreaRow row row-xs align-items-stretch-immediate no-bottom-gutter">
<div class="col-12 col-md-6">
<div class="{{ namespace }}box -insetLg -boxSunken">
<table class="{{ namespace }}infoTable table -noBorder">
<tbody>
<tr>
<td>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "A l'achat"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
{% render "@amount--xtra-large",{
text: "106,85",
currency: "%"
},true %}
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12 col-md-6">
<div class="{{ namespace }}box -insetLg -boxSunken">
<table class="{{ namespace }}infoTable table -noBorder">
<tbody>
<tr>
<td>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "A la vente"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
{% render "@amount--xtra-large",{
text: "109,60",
currency: "%"
},true %}
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}obligationCard__tableWrapper {{ namespace }}box -insetLg">
<table class="{{ namespace }}obligationCard__table {{ namespace }}infoTable table -noBorder">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td class=>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Rendement à l'échéance achat (%)"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
0.97
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td class=>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Rendement à l'échéance vente (%)"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
0.87
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td class=>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Coupon"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
3.125
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td class=>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Marché"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
Secondaire
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Maturité"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
23.01.2025
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<div class="{{ namespace }}infoTable__cellContent">
{% render "@label",{
eltType: "div",
text: "Nominal facial unitaire"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}infoTable__cellContent">
<div class="{{ namespace }}textBodyLg">
2.000,00
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<a href="" class="{{ namespace }}obligationCard__action">
<div class="{{ namespace }}obligationCard__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 }}obligationCard {{ namespace }}box -insetLg {{ namespace }}scaleInteraction{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}stackXxl">
<div class="{{ namespace }}staticStackXs">
{% render "@skeleton-unit--h2" %}
{% render "@skeleton-unit--h3",{
classes: ["w-25"]
},true %}
{% render "@skeleton-unit--h3",{
classes: ["w-50"]
},true %}
</div>
<div class="{{ namespace }}stackXxl {{ namespace }}box__outOfBoundsMd">
<div class="{{ namespace }}obligationCard__recapArea {{ namespace }}contextLoadingBlock -floating">
<div class="{{ namespace }}obligationCard__recapAreaRow row row-xs no-bottom-gutter">
<div class="col-12 col-md-6">
{% render "@skeleton-unit",{
inlineCSS: {
"height": "var(--obligation-card-recap-zone-card-height)"
}
},true %}
</div>
<div class="col-12 col-md-6">
{% render "@skeleton-unit",{
inlineCSS: {
"height": "var(--obligation-card-recap-zone-card-height)"
}
},true %}
</div>
</div>
</div>
<div class="{{ namespace }}obligationCard__tableWrapper {{ namespace }}box -insetLg">
<div class="{{ namespace }}stackXl">
{% render "@skeleton-unit--h2" %}
{% render "@skeleton-unit--h2" %}
{% render "@skeleton-unit--h2" %}
</div>
</div>
</div>
</div>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}obligationCard {
/* Save root element context for easy access if nesting is needed */
$self: &;
--obligation-card-recap-zone-card-height: 72px;
@include media-breakpoint-up("md") {
--obligation-card-recap-zone-card-height: 144px;
}
/* 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 */
// obligationCard__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;
}
}
}
&__tableWrapper {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
&__table {
> TBODY > TR > TD > TABLE {
@include media-breakpoint-between("xs","sm") {
width: 100%;
}
}
> TBODY > TR > TD {
@include media-breakpoint-between("xs","sm") {
display: block;
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
}
padding-top: 0 !important;
padding-bottom: 0 !important;
&:first-child > TABLE {
width: 100%;
> TBODY > TR > TD {
&:last-child {
@include media-breakpoint-up("md") {
padding-right: $box-lg-inset-spacing-desktop-global !important;
}
}
}
}
&:last-child > TABLE {
width: 100%;
> TBODY > TR > TD {
&:first-child {
> * {
justify-content: flex-start;
text-align: left;
}
@include media-breakpoint-up("md") {
padding-left: $box-lg-inset-spacing-mobile-global * 0.5 !important;
}
@include media-breakpoint-up("lg") {
padding-left: $box-lg-inset-spacing-desktop-global !important;
}
}
}
}
}
}
&__recapArea {
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");
border-radius: $box-border-radius-global;
@include media-breakpoint-up("md") {
background-color: transparent;
}
}
&__recapAreaRow {
[class*="col"] + [class*="col"] {
@include media-breakpoint-between("xs","sm") {
margin-top: -(map-deep-get($token-spacer-grid-map, "xs"));
}
}
}
/* modifiers */
// obligationCard -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 {
}
}