See "img upload" in sidebar snet/molecules for variants, or go to info panel and look for it in "references" (@snet-img-upload)
Refer to modal frame found in view tab for complete structure without content.
A modal's default size is 640px
Modifier classes for modals
A modal with a content loading component behaves as follows:
<div class="sds-modal modal fade" id="speedinvestStockModal" aria-hidden="true" tabindex="-1">
<div class="sds-modal__dialog modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="sds-modal__content modal-content">
<div class="sds-modal__header modal-header">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-modal__close" data-dismiss="modal" aria-label="Close">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
<div class="sds-modal__body modal-body">
<div class="sds-stackXl">
<div data-sds-gradient-overflow-h>
<div data-sds-gradient-overflow-h-wrapper>
<div data-sds-gradient-overflow-h-inner>
<div class="sds-table -verticalBorder">
<table class="table text-center">
<thead>
<tr>
<th></th>
<th>
<div class="sds-label">
MWR
</div>
</th>
<th>
<div class="sds-label">
TWR
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<div class="sds-label">
YTD
</div>
</th>
<td>
<div class="sds-badge badge -primary10 -stock">
<span class="sds-icon sds-icon-arrowlower"></span>
badge
</div>
</td>
<td>
<div class="sds-badge badge -primary10 -stock">
<span class="sds-icon sds-icon-arrowlower"></span>
badge
</div>
</td>
</tr>
<tr>
<th>
<div class="sds-label">
2018-21
</div>
</th>
<td>
<div class="sds-badge badge -success10 -stock">
<span class="sds-icon sds-icon-arrowhigher"></span>
badge
</div>
</td>
<td>
<div class="sds-badge badge -success10 -stock">
<span class="sds-icon sds-icon-arrowhigher"></span>
badge
</div>
</td>
</tr>
<tr>
<th>
<div class="sds-label">
2021
</div>
</th>
<td>
<div class="sds-badge badge -success10 -stock">
<span class="sds-icon sds-icon-arrowhigher"></span>
badge
</div>
</td>
<td>
<div class="sds-badge badge -success10 -stock">
<span class="sds-icon sds-icon-arrowhigher"></span>
badge
</div>
</td>
</tr>
<tr>
<th>
<div class="sds-label">
2020
</div>
</th>
<td>
<div class="sds-badge badge -primary10 -stock">
<span class="sds-icon sds-icon-arrowlower"></span>
badge
</div>
</td>
<td>
<div class="sds-badge badge -primary10 -stock">
<span class="sds-icon sds-icon-arrowlower"></span>
badge
</div>
</td>
</tr>
<tr>
<th>
<div class="sds-label">
2019
</div>
</th>
<td>
<div class="sds-badge badge -success10 -stock">
<span class="sds-icon sds-icon-arrowhigher"></span>
badge
</div>
</td>
<td>
<div class="sds-badge badge -success10 -stock">
<span class="sds-icon sds-icon-arrowhigher"></span>
badge
</div>
</td>
</tr>
<tr>
<th>
<div class="sds-label">
2018
</div>
</th>
<td>
<div class="sds-badge badge -primary10 -stock">
<span class="sds-icon sds-icon-arrowlower"></span>
badge
</div>
</td>
<td>
<div class="sds-badge badge -success10 -stock">
<span class="sds-icon sds-icon-arrowhigher"></span>
badge
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="sds-stackXs">
<div class="h3">Calculs Gains journaliers</div>
<p>La classification des produits financiers est celle opérée par la norme comptable IFRS 7.
Elle distingue trois types d’instruments financiers en fonction de la disponibilité et de la liquidité
des éléments de valorisation. Le premier niveau se caractérise par un prix disponible directement (prix
de marché) et une liquidité suffisante. La deuxième regroupe les produits qui peuvent être valorisés par
un modèle standard et des données cotées.</p>
</div>
<div class="sds-stackXs">
<div class="h3">Calculs Gains totaux</div>
<p>La classification des produits financiers est celle opérée par la norme comptable IFRS 7.
Elle distingue trois types d’instruments financiers en fonction de la disponibilité et de la liquidité
des
éléments de valorisation. Le premier niveau se caractérise par un prix disponible directement (prix de
marché) et une liquidité suffisante. La deuxième regroupe les produits qui peuvent être valorisés par un
modèle standard et des données cotées.</p>
</div>
</div>
</div>
</div>
</div>
</div>
{% extends "@snet-modal-base-frame" %}
{% block header %}
{% endblock %}
{% block body %}
<div class="{{ namespace }}stackXl">
{% render "@table--vertical-separator" %}
<div class="{{ namespace }}stackXs">
<div class="h3">Calculs Gains journaliers</div>
<p>La classification des produits financiers est celle opérée par la norme comptable IFRS 7.
Elle distingue trois types d’instruments financiers en fonction de la disponibilité et de la liquidité
des éléments de valorisation. Le premier niveau se caractérise par un prix disponible directement (prix
de marché) et une liquidité suffisante. La deuxième regroupe les produits qui peuvent être valorisés par
un modèle standard et des données cotées.</p>
</div>
<div class="{{ namespace }}stackXs">
<div class="h3">Calculs Gains totaux</div>
<p>La classification des produits financiers est celle opérée par la norme comptable IFRS 7.
Elle distingue trois types d’instruments financiers en fonction de la disponibilité et de la liquidité
des
éléments de valorisation. Le premier niveau se caractérise par un prix disponible directement (prix de
marché) et une liquidité suffisante. La deuxième regroupe les produits qui peuvent être valorisés par un
modèle standard et des données cotées.</p>
</div>
</div>
{% endblock %}