Pour les webmasters - Aide typographique et composants DSFR

Typographie Markdown

Titres

### Titre 3
#### Titre 4
##### Titre 5

Titre 3

Titre 4

Titre 5

A noter : les titre sont repris dans le menu gauche, et il ne peut y avoir qu'un seul H1

Mettre des mots en **gras** et en *italique* voir ~~barrés~~

Mettre des mots en gras et en italique voir ~~barrés~~

Listes

* point 1
* point 2
    * point 2.1
    * point 2.2

1. d'abord
2. ensuite
3. enfin
  • point 1

  • point 2

    • point 2.1
    • point 2.2

  • d'abord

  • ensuite
  • enfin

les liste de taches clicables

- [ ] Tache 1
- [ ] Tache 2
- [ ] Tache 3
  • [ ] Tache 1
  • [ ] Tache 2
  • [ ] Tache 3

Les liens

insérer des liens vers [une url externe](https://www.ecologie.gouv.fr/)

insérer des liens vers une url externe

insérer des liens vers [une url interne](bienvenue)
insérer des liens vers une url interne

les images

![Alternative textuelle de mon image importée](uploads/101ad79afc119554e298f32cfb7fdb49/3ca2e11d-e184-4f40-9f75-41c370be4f8c.png.md)

Alternative textuelle de mon image importée

Les tableaux

| ID   | nom       | prénom | taille |
| ---- | --------- | ------ | ------ |
| 1    | braudel | fernand   | 165     |
| 2    | bertin    | jacques | 183    |
ID nom prénom taille
1 braudel fernand 165
2 bertin jacques 183

A noter : il est possible de faire des copier coller directement depuis un tableur excel ou libre office.

Un tableau copie collé a partir de libre office qui donne du markdown

N° Produit url spote Notes
1 BNUM https://spote.developpement-durable.gouv.fr/offre/bnum
2 Parapheur https://spote.developpement-durable.gouv.fr/offre/bnum note dans le bnum
3 Hébergement
4 Audience-sites https://spote.developpement-durable.gouv.fr/offre/audience-sites-mesure-d-audience-des-sites-et-applications-du-pole-ministeriel Matomo
5 PIX https://spote.developpement-durable.gouv.fr/offre/professionnalisation-numerique-via-l-outil-pix?debut_lesOffres=12 pix
6 Enquêteur en ligne https://spote.developpement-durable.gouv.fr/offre/enqueteur-en-ligne-du-pole-ministeriel-ecologie Limesurvey
7 Spote https://spote.developpement-durable.gouv.fr/ spip
8 MEL Thunderbird
9 La numthéque https://spote.developpement-durable.gouv.fr/offre/la-numtheque-MTE
10 Infolettres https://spote.developpement-durable.gouv.fr/offre/infolettres-produire-publier-et-diffuser-des-e-lettres-et-e-magazines spip
11 SharePoint https://spote.developpement-durable.gouv.fr/offre/sharepoint microsoft
12 Valise du cadre de permanence électronique du pôle ministériel Ecologie https://spote.developpement-durable.gouv.fr/offre/valise-du-cadre-de-permanence-electronique-du-pole-ministeriel-ecologie Giseh - SPIP
13 Bnum Drive https://spote.developpement-durable.gouv.fr/offre/drive espaces documentaires du Bnum - nextcloud
14 Giseh https://spote.developpement-durable.gouv.fr/offre/giseh-l-offre-de-publication-web-pour-les-services-du-pole-ministeriel-ecologie spip
15 Klaxoon https://spote.developpement-durable.gouv.fr/offre/klaxoon-des-outils-visuels-pour-un-travail-en-equipe-facilite Licence Klaxoon
16 Url Courte https://spote.developpement-durable.gouv.fr/offre/url-courtes spip
17 Gestion de la demande https://spote.developpement-durable.gouv.fr/offre/gestion-de-la-demande Accompagnement DRC
18 Conseil et accompagnement en stratégie numérique https://spote.developpement-durable.gouv.fr/offre/conseil-et-accompagnement-en-strategie-numerique?debut_lesOffres=12 Accompagnement DRC
19 Plume https://spote.developpement-durable.gouv.fr/offre/plume-metadonnees-d-un-patrimoine-postgresql?debut_lesOffres=12 Plume est un plugin QGIS -  PostgreSQL.
20 Asgard https://spote.developpement-durable.gouv.fr/offre/asgard?debut_lesOffres=12 gestion des droits pour PostgreSQL
21 Incubateur Fabnum https://spote.developpement-durable.gouv.fr/offre/explorer-l-idee-d-un-nouveau-produit-numerique-et-developpez-le-au-sein-de-l?debut_lesOffres=12 Fabrique numérique
22 ODAIM https://spote.developpement-durable.gouv.fr/offre/odaim-outil-de-diffusion-des-applications-informatiques-des-ministeres?debut_lesOffres=12 Outil de Diffusion des Applications Informatiques des Ministères
23 Fortigate https://spote.developpement-durable.gouv.fr/offre/les-pare-feux-fortigate-pour-proteger-vos-reseaux-locaux?debut_lesOffres=12 L’offre de service "Pare-feux"
24 EOLE https://spote.developpement-durable.gouv.fr/offre/la-distribution-linux-eole-pour-vos-serveurs-locaux?debut_lesOffres=12 La distribution Linux EOLE pour vos serveurs locaux
25 RIE https://spote.developpement-durable.gouv.fr/offre/rie-reseau-interministeriel-de-l-etat?debut_lesOffres=12 Réseau Interministériel de l’état
26 PFAI https://spote.developpement-durable.gouv.fr/offre/pfai-plateforme-d-acces-a-internet?debut_lesOffres=12 Plateforme d’Accès à Internet
27 PFS https://spote.developpement-durable.gouv.fr/offre/pfs-plateforme-securisee?debut_lesOffres=12 PFS : Plateforme Sécurisée

L'accordeon

Mettre des mots en gras et en italique 

<section class="fr-accordion">    
   <h3 class="fr-accordion__title">        
     <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-106">Intitulé accordéon</button>    
  </h3>    

    <div class="fr-collapse" id="accordion-106">        
    <p>Mettre des mots en <strong>gras</strong> et en <em>italique</em> </p>  
    </d iv>
</section>

Les citations

> Ma citation sur une seule ligne

Ma citation sur une seule ligne

Une citation sur plusieurs ligne

Ne fonctionne pas

Une note de bas de page

Ne fonctionne pas

A footnote reference tag looks like this: [^1]

This reference tag is a mix of letters and numbers. [^footnote-42]

[^1]: This text is inside a footnote.

[^footnote-42]: This text is another footnote.

Ajout d'un sommaire automatique

[TOC]

Ne fonctionne pas

Test des composants DSFR

Pour info le menu gauche ne semble pas fonctionner (et pourtant les lien vers les ancres sont bons ... )

Une alerte

ajout de la classe fr-m-0 sur le H3 (conflit avc la css theme.css)

Erreur : titre du message

Description

une alerte sans H3

Erreur : test d'alerte sans H3

Description

Un badge

Label badge

un bandeau d'avertissement

Titre du bandeau d'avertissement Texte de description lorem ipsum sit consectetur adipiscing. Lien de consultation 

<div class="fr-notice fr-notice--warning fr-my-2w">
    <div class="fr-container">
        <div class="fr-notice__body">
            <p>
                <span class="fr-notice__title">Titre du bandeau d'avertissement</span>
                <span class="fr-notice__desc">Texte de description lorem ipsum sit consectetur adipiscing.</span>
                <a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="#" class="fr-notice__link">Lien de consultation</a>
            </p>
            <button title="Masquer le message" onclick="const notice = this.parentNode.parentNode.parentNode; notice.parentNode.removeChild(notice)" id="button-1305" class="fr-btn--close fr-btn">Masquer le message</button>
        </div>
    </div>
</div>

et sans case de fermeture

Titre du bandeau assez long Texte de description plutot long lorem ipsum sit consectetur adipiscing elit. Sed Lien de consultation 

<div class="fr-notice fr-notice--info">
    <div class="fr-container">
        <div class="fr-notice__body">
            <p>
                <span class="fr-notice__title">Titre du bandeau assez long</span>
                <span class="fr-notice__desc">Texte de description plutot long lorem ipsum sit consectetur adipiscing elit. Sed</span>
                <a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="#" class="fr-notice__link">Lien de consultation</a>
            </p>
        </div>
    </div>
</div>

Une card

Qu'est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

[À MODIFIER - vide ou texte alternatif de l’image] 
<div class="fr-grid-row fr-mb-3w">
    <div class="fr-col fr-col-md-6">
        <div class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Qu'est-ce que le Pass Culture et comment l’obtenir ?</a>
                    </h3>
                    <p class="fr-card__desc">La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.</p>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-responsive-img" src="../images/bnum/vignettes/attente.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]">
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
</div>

Une card horizontale

Important : rajouter style="height: fit-content;" sinon la carte prend tout la hauteur.
Probleme avec le style DSFR : 

.fr-grid-row .fr-card {
    height: 100%;
}

Télécharger le/la [Typologie de document] « [Nom du document] »

Lorem [...] elit ut.

  • label badge

  • label badge

détail (optionnel)

PNG - 1,1 ko

[À MODIFIER - vide ou texte alternatif de l’image] 
<div id="card-1382" class="fr-card fr-enlarge-link fr-card--download" style="height: fit-content;">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#" download>Télécharger le/la [Typologie de document] « [Nom du document] »</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-badges-group">
                    <li>
                        <p class="fr-badge fr-badge--purple-glycine">label badge</p>
                    </li>
                    <li>
                        <p class="fr-badge fr-badge--purple-glycine">label badge</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="fr-card__end">
                <p class="fr-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img" src="../images/bnum/vignettes/attente.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
        </div>
    </div>
</div>

Plusieurs card verticale

Qu'est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

  • Infographie

Qu'est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

  • label badge

Qu'est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

  • label badge

Qu'est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

  • Infographie

Qu'est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

  • label badge

<div class="fr-grid-row fr-grid-row--gutters fr-mb-1w">


<div class="fr-col-md-4 fr-col-md">
    <div class="fr-card fr-enlarge-link ">
        <div class="fr-card__body">
            <div class="fr-card__content">
                <h3 class="fr-card__title"> <a href="#">Qu'est-ce que le Pass Culture et comment l’obtenir ?</a> </h3>
                <p class="fr-card__desc">La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.</p>
            </div>
        </div>
        <div class="fr-card__header">
            <div class="fr-card__img"> 
                <img class="fr-responsive-img" src="../images/bnum/tutoriels/07-bouton_email.png" alt="" data-fr-js-ratio="true"> 
            </div>
            <ul class="fr-badges-group">
                <li>
                    <p class="fr-badge fr-badge--green-emeraude">Infographie</p>
                </li>
            </ul>
        </div>
    </div>
</div>



<div class="fr-col-md-4 fr-col-md">
    <div class="fr-card fr-enlarge-link">
        <div class="fr-card__body">
            <div class="fr-card__content">
                <h3 class="fr-card__title"> <a href="#">Qu'est-ce que le Pass Culture et comment l’obtenir ?</a> </h3>
                <p class="fr-card__desc">La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.</p>
            </div>
        </div>
        <div class="fr-card__header">
            <div class="fr-card__img"> 
                <img class="fr-responsive-img" src="../images/bnum/tutoriels/07-bouton_email.png" alt="" data-fr-js-ratio="true"> 
            </div>
            <ul class="fr-badges-group">
                <li>
                    <p class="fr-badge fr-badge--green-emeraude">label badge</p>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="fr-col-md-4 fr-col-md">
    <div class="fr-card fr-enlarge-link">
        <div class="fr-card__body">
            <div class="fr-card__content">
                <h3 class="fr-card__title"> <a href="#">Qu'est-ce que le Pass Culture et comment l’obtenir ?</a> </h3>
                <p class="fr-card__desc">La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.</p>
            </div>
        </div>
        <div class="fr-card__header">
            <div class="fr-card__img"> 
                <img class="fr-responsive-img" src="../images/bnum/tutoriels/07-bouton_email.png" alt="" data-fr-js-ratio="true"> 
            </div>
            <ul class="fr-badges-group">
                <li>
                    <p class="fr-badge fr-badge--green-emeraude">label badge</p>
                </li>
            </ul>
        </div>
    </div>
</div>

</div>


<div class="fr-grid-row fr-grid-row--gutters fr-mb-1w">


<div class="fr-col-md-6 fr-col-md">
    <div class="fr-card fr-enlarge-link ">
        <div class="fr-card__body">
            <div class="fr-card__content">
                <h3 class="fr-card__title"> <a href="#">Qu'est-ce que le Pass Culture et comment l’obtenir ?</a> </h3>
                <p class="fr-card__desc">La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.</p>
            </div>
        </div>
        <div class="fr-card__header">
            <div class="fr-card__img"> 
                <img class="fr-responsive-img" src="../images/bnum/tutoriels/07-bouton_email.png" alt="" data-fr-js-ratio="true"> 
            </div>
            <ul class="fr-badges-group">
                <li>
                    <p class="fr-badge fr-badge--green-emeraude">Infographie</p>
                </li>
            </ul>
        </div>
    </div>
</div>



<div class="fr-col-md-6 fr-col-md">
    <div class="fr-card fr-enlarge-link">
        <div class="fr-card__body">
            <div class="fr-card__content">
                <h3 class="fr-card__title"> <a href="#">Qu'est-ce que le Pass Culture et comment l’obtenir ?</a> </h3>
                <p class="fr-card__desc">La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.</p>
            </div>
        </div>
        <div class="fr-card__header">
            <div class="fr-card__img"> 
                <img class="fr-responsive-img" src="../images/bnum/tutoriels/07-bouton_email.png" alt="" data-fr-js-ratio="true"> 
            </div>
            <ul class="fr-badges-group">
                <li>
                    <p class="fr-badge fr-badge--green-emeraude">label badge</p>
                </li>
            </ul>
        </div>
    </div>
</div>

</div>

Une citation

« Lorem [...] elit ut. »

Auteur

  • Ouvrage
  • Détail 1
  • Détail 2
  • Détail 3
  • Détail 4
<figure class="fr-quote fr-quote--column">
<blockquote cite="[À MODIFIER | https://lien-vers-la-source.fr || supprimer l'attribut si pas d'url pour la source']">        <p>« Lorem [...] elit ut. »</p>
</blockquote>
<figcaption><p class="fr-quote__author">Auteur</p>
<ul class="fr-quote__source">
<li><cite>Ouvrage</cite></li>
<li>Détail 1</li>
<li>Détail 2</li>
<li>Détail 3</li>
<li><a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="#[À MODIFIER | Lien vers la sources ou des infos complémentaires]">Détail 4</a></li>
</ul>      
<div class="fr-quote__image">
<img src="/uploads/3f656c2b0dc43dc5d735d440bd1b905d/Dsfrdocs.png" class="fr-responsive-img" alt="" />
<!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
</div>
</figcaption>
</figure>

Une vidéo

Le bouton agrandir ne semble pas fonctionner

Description / Source Label lien

Titre de la vidéo

Titre en h2

Il y a un h1 de cache pour l'accessibilité

Test de texte en H3

Juste pour voir si le h3 interfere avec le menu automatique

 
<figure role="group" class="fr-content-media">
    <iframe title="Titre de l'iframe" class="fr-responsive-vid" src="https://www.youtube.com/embed/HyirpmPL43I"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <figcaption class="fr-content-media__caption">
        Description / Source
        <a class="fr-link" href="#[url%20-%20%C3%A0%20modifier]">Label lien</a>
    </figcaption>
</figure>
<div class="fr-transcription">
    <button class="fr-transcription__btn" aria-expanded="false"
        aria-controls="fr-transcription__collapse-transcription-462">Transcription</button>
    <div class="fr-collapse" id="fr-transcription__collapse-transcription-462">
        <dialog id="fr-transcription__modal-transcription-462" class="fr-modal" role="dialog"
            aria-labelledby="fr-transcription__modal-transcription-462-title">
            <div class="fr-container fr-container--fluid fr-container-md">
                <div class="fr-grid-row fr-grid-row--center">
                    <div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
                        <div class="fr-modal__body">
                            <div class="fr-modal__header">
                                <button class="fr-btn--close fr-btn"
                                    aria-controls="fr-transcription__modal-transcription-462"
                                    title="Fermer">Fermer</button>
                            </div>
                            <div class="fr-modal__content">
                                <h1 id="fr-transcription__modal-transcription-462-title" class="fr-modal__title">
                                    Titre de la vidéo
                                </h1>
                                <h2>Titre en h2 </h2>
                                <p>Il y a un h1 de cache pour l'accessibilité</p>
                                <h3>Test de texte en H3</h3>
                                <p>Juste pour voir si le h3 interfere avec le menu automatique</p>

                            </div>
                            <div class="fr-transcription__footer">
                                <div class="fr-transcription__actions-group">
                                    <button class="fr-btn fr-btn--fullscreen"
                                        aria-controls="fr-transcription__modal-transcription-462" data-fr-opened="false"
                                        title="">Agrandir</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </dialog>
    </div>
</div>

Une video simple en html5

Vidéo d'explication des visio-conférences / Dnum 2024 
<div class="container">
<figure role="group" class="fr-content-media">
    <video poster="../videos/video.png" class="fr-content-media fr-mb-0" controls>
        <source src='https://aide.din.developpement-durable.gouv.fr/fichiers/Dnum.mp4' type='video/mp4' />
        <track kind="captions" label="Francais" src="../videos/video.vtt" srclang="fr" default />
    </video>
    <figcaption class="fr-content-media__caption">
        Vidéo d'explication des visio-conférences / Dnum 2024
    </figcaption>
</figure>
</div>

un indicateur d'étapes - Stepper

Titre de la dernière étape en cours Étape 3 sur 4

Une mise en avant

Suppression de la classe pour l'icone qui s'affiche mal : fr-icon-information-line

Titre mise en avant

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.

Une mise en avant simple et en couleur

<div class="fr-callout fr-callout--blue-ecume"> 
<p class="fr-alert__title">Mon titre de cadre</p>
<p>
Mon texte
</p>
</div>

Mon titre de cadre

Mon texte

Une mise en avant en couleur avec des icones

Titre mise en avant

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions. 

<div class="fr-callout fr-icon-information-line fr-callout--yellow-tournesol">
    <h3 class="fr-callout__title">Titre mise en avant</h3>
    <p class="fr-callout__text">
        Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.
    </p>
</div>

Les couleurs disponibles

  • jaune : 'fr-callout--yellow-moutarde'
  • jaune-clair : 'fr-callout--yellow-tournesol'
  • bleu : 'fr-callout--blue-cumulus'
  • bleu-clair : 'fr-callout--blue-ecume'
  • bleu-canard : 'fr-callout--green-archipel'
  • rouge : 'fr-callout--purple-glycine'
  • violet : 'fr-callout--purple-glycine'
  • beige : 'fr-callout--pink-macaron'
  • rouge : 'fr-callout--pink-tuile'
  • rose : 'fr-callout--pink-tuile'
  • vert : 'fr-callout--green-emeraude'
  • vert-clair : 'fr-callout--green-menthe'
  • vert-tilleul : 'fr-callout--green-tilleul-verveine'
  • vert-fluo : 'fr-callout--green-bourgeon'
  • orange : 'fr-callout--orange-terre-battue'
  • cafe : 'fr-callout--brown-cafe-creme'
  • marron-clair : 'fr-callout--brown-caramel'
  • marron : 'fr-callout--brown-opera'
  • gris-clair : 'fr-callout--beige-gris-galet'

Exemples

Mon titre de cadre

En encadré en yellow-tournesol

Mon titre de cadre

En encadré en green-menthe

Mon titre de cadre

En encadré en pink-macaron

Une modale

Titre de la modale

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.

Un système d'onglet

Suppression des classes d'icones qui ne passent pas fr-icon-checkbox-line fr-tabs__tab--icon-left
le texte dans les onglet doit etre en html

Contenu 1

Contenu 2

test de titre< en markdown

Le texte en markdown ne marhce pas il faut du html dans les onglets

test de sous-titre

texte normal

<div class="fr-tabs">
    <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
        <li role="presentation">
            <button id="tabpanel-404" class="fr-tabs__tab " tabindex="0" role="tab" aria-selected="true"
                aria-controls="tabpanel-404-panel">Label Tab 1</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-405" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false"
                aria-controls="tabpanel-405-panel">Label Tab 2</button>
        </li>
        <li role="presentation">
            <button id="tabpanel-406" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false"
                aria-controls="tabpanel-406-panel">Label Tab 2</button>
        </li>
    </ul>
    <div id="tabpanel-404-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel"
        aria-labelledby="tabpanel-404" tabindex="0">
        <!-- données de test -->
        <p>
            Contenu 1
        </p>
    </div>
    <div id="tabpanel-405-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-405" tabindex="0">
        <!-- données de test -->
        <p>
            Contenu 2
        </p>
    </div>
    <div id="tabpanel-406-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-406" tabindex="0">
        <h3>test de titre< en markdown<h3>
                <p>Le texte en markdown ne marhce pas il faut du html dans les onglets</p>
                <h2>test de sous-titre</h2>
                <p>texte normal</p>
    </div>
</div>

Un tableau DSFR

Titre du tableau (caption)
Sélectionner th0 th1 th2 th3
Lorem [...] elit ut. Lorem [...] elit ut. Lorem [...] elit ut. Lorem [...] elit ut.
Lorem [...] elit ut. Lorem [...] elit ut. Lorem [...] elit ut. Lorem [...] elit ut.
Lorem [...] elit ut. Lorem [...] elit ut. Lorem [...] elit ut. Lorem [...] elit ut.
Lorem [...] elit ut. Lorem [...] elit ut. Lorem [...] elit ut. Lorem [...] elit ut. 
<div class="fr-table" id="table-selectable-component">
    <div class="fr-table__wrapper">
        <div class="fr-table__container">
            <div class="fr-table__content">
                <table id="table-selectable">
                    <caption> Titre du tableau (caption) </caption>
                    <thead>
                        <tr>
                            <th class="fr-cell--fixed" role="columnheader"> <span class="fr-sr-only">Sélectionner</span>
                            </th>
                            <th scope="col"> th0 </th>
                            <th scope="col"> th1 </th>
                            <th scope="col"> th2 </th>
                            <th scope="col"> th3 </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="table-selectable-row-key-1" data-row-key="1">
                            <th class="fr-cell--fixed" scope="row">
                                <div class="fr-checkbox-group fr-checkbox-group--sm"> <input name="row-select"
                                        id="table-select-checkbox-7748--0" type="checkbox"> <label class="fr-label"
                                        for="table-select-checkbox-7748--0"> Sélectionner la ligne 1 </label> </div>
                            </th>
                            <td> Lorem [...] elit ut. </td>
                            <td> Lorem [...] elit ut. </td>
                            <td> Lorem [...] elit ut. </td>
                            <td> Lorem [...] elit ut. </td>
                        </tr>
                        <tr id="table-selectable-row-key-2" data-row-key="2">
                            <th class="fr-cell--fixed" scope="row">
                                <div class="fr-checkbox-group fr-checkbox-group--sm"> <input name="row-select"
                                        id="table-select-checkbox-7750--1" type="checkbox"> <label class="fr-label"
                                        for="table-select-checkbox-7750--1"> Sélectionner la ligne 2 </label> </div>
                            </th>
                            <td> Lorem [...] elit ut. </td>
                            <td> Lorem [...] elit ut. </td>
                            <td> Lorem [...] elit ut. </td>
                            <td> Lorem [...] elit ut. </td>
                        </tr>
                        <tr id="table-selectable-row-key-3" data-row-key="3">
                            <th class="fr-cell--fixed" scope="row">
                                <div class="fr-checkbox-group fr-checkbox-group--sm"> <input name="row-select"
                                        id="table-select-checkbox-7752--2" type="checkbox"> <label class="fr-label"
                                        for="table-select-checkbox-7752--2"> Sélectionner la ligne 3 </label> </div>
                            </th>
                            <td> Lorem [...] elit ut. </td>
                            <td> Lorem [...] elit ut. </td>
                            <td> Lorem [...] elit ut. </td>
                            <td> Lorem [...] elit ut. </td>
                        </tr>
                        <tr id="table-selectable-row-key-4" data-row-key="4">
                            <th class="fr-cell--fixed" scope="row">
                                <div class="fr-checkbox-group fr-checkbox-group--sm"> <input name="row-select"
                                        id="table-select-checkbox-7754--3" type="checkbox"> <label class="fr-label"
                                        for="table-select-checkbox-7754--3"> Sélectionner la ligne 4 </label> </div>
                            </th>
                            <td> Lorem [...] elit ut. </td>
                            <td> Lorem [...] elit ut. </td>
                            <td> Lorem [...] elit ut. </td>
                            <td> Lorem [...] elit ut. </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Des tags

<ul class="fr-tags-group">
    <li> <a href="#" class="fr-tag" target="_self">Label tag</a> </li>
    <li> <a href="#" class="fr-tag" target="_self">Label tag</a> </li>
    <li> <a href="#" class="fr-tag" target="_self">Label tag</a> </li>
</ul>

Un téléchargement

Important : rajouter style="height: fit-content;" sinon la carte prend tout la hauteur.
Probleme avec le style DSFR : 

.fr-grid-row .fr-card {
    height: 100%;
}

Télécharger le document lorem ipsum sit dolores amet

Texte de description

JPG – 61,88 ko

<div class="fr-card fr-enlarge-link fr-card--download" style="height: fit-content;">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title"> <a download
                    href="https://gitlab-forge.din.developpement-durable.gouv.fr/pub/numeco/exemple-wiki-dsfr/-/wikis/uploads/3f656c2b0dc43dc5d735d440bd1b905d/Dsfrdocs.png">
                    Télécharger le document lorem ipsum sit dolores amet </a> </h3>
            <p class="fr-card__desc">Texte de description</p>
            <div class="fr-card__end">
                <p class="fr-card__detail">JPG – 61,88 ko</p>
            </div>
        </div>
    </div>
</div>

Une tuile

Important : rajouter style="height: fit-content;" sinon la carte prend tout la hauteur.
Probleme avec le style DSFR : 

.fr-grid-row .fr-card {
    height: 100%;
}

<div class="fr-tile fr-enlarge-link" id="tile-6609" style="height: fit-content;">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title"> <a href="#">Intitulé de la tuile</a> </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
            <p class="fr-tile__detail">Détail (optionel)</p>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px"
                height="80px"><use class="fr-artwork-decorative" href="/img/artwork/pictograms/city-hall.svg#artwork-decorative"></use><use class="fr-artwork-minor" href="/img/artwork/pictograms/city-hall.svg#artwork-minor"></use><use class="fr-artwork-major" href="/img/artwork/pictograms/city-hall.svg#artwork-major"></use></svg>
        </div>
    </div>
</div>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.