La modale volet se superpose au contenu de la page. Il prend la hauteur de la fenêtre et permet d’afficher un contenu riche.
Documentation : Figma | Développeur
Langage: HTML
<ft-modalside class="modal-readonly" id="exampleModal" label="Titre de la modale">
<div slot="header-left">
<nav aria-labelledby="pagination_341859589" class="has-pagination-mini" role="navigation">
<p id="pagination_341859589" class="sr-only">Pagination </p>
<p class="pagination-count">Page <strong>1</strong>/40</p>
<ul class="btn-group">
<li class="btn-group-item" aria-hidden="true">
<button aria-disabled="true" class="btn btn-tertiary light btn-ratio-square" id="button_629478316" type="button" data-ft-tooltip="Page précédente" data-ft-vocalize="false">
<span aria-hidden="true" class="icon icon-chevron-l"></span>
<span class="sr-only">Aller à l'élément précédent (0 sur 40)</span>
</button>
</li>
<li class="btn-group-item">
<button aria-disabled="false" class="btn btn-tertiary light btn-ratio-square" id="button_970023680" type="button" data-ft-tooltip="Page suivante" data-ft-vocalize="false">
<span aria-hidden="true" class="icon icon-chevron-r"></span>
<span class="sr-only">Aller à l'élément suivant (2 sur 40)</span>
</button>
</li>
</ul>
</nav>
</div>
<div slot="header-right">
<button class="btn btn-secondary btn-lg btn-ratio-square" id="button_82618727" type="button" data-ft-tooltip="Action #2" data-ft-vocalize="false">
<span aria-hidden="true" class="icon icon-edit"></span>
<span class="sr-only">Action #2</span>
</button>
<button class="btn btn-primary btn-lg" id="button_757549023" type="button">
<span class="btn-content">Action primaire</span>
</button>
</div>
<p>France Travail est un établissement public à caractère administratif, chargé de l'emploi en France. Créé le 20 décembre 2008, il est issu de la fusion entre l'Agence nationale pour l'emploi et l'Association pour l'emploi dans l'industrie et le commerce.</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
<div slot="footer">
<button class="btn btn-secondary btn-lg btn-ratio-square" id="button_423435772" type="button" data-ft-tooltip="Action #2" data-ft-vocalize="false">
<span aria-hidden="true" class="icon icon-edit"></span>
<span class="sr-only">Action #2</span>
</button>
<button class="btn btn-primary btn-lg" id="button_370955842" type="button">
<span class="btn-content">Action primaire</span>
</button>
</div>
</ft-modalside>
// L'aperçu n'est pas disponible pour les dépendances externes