wondif_vue/app/pages/design-system.vue

<template>
  <div class="ds-preview">
    <DsHeading class="titre" as="h1" size="">Design du site internet de l'Orchestre National d'Île-de-France</DsHeading>
    <DsHeading class="centrer" as="h1" tone="brand_rouge" size="">TYPOGRAPHIE</DsHeading>

    <div class="category">  
      <DsHeading class="centrer rempli" as="h3" size="">Les titres avec la police Roboto Flex (police par défaut des titres)</DsHeading>
      <DsHeading as="h1" size="">Titres niveau 1 (h1) Roboto extrabold Taille 2xl/40px</DsHeading>
      <DsHeading as="h2" size="">Titres niveau 2 (h2) Roboto bold Taille xl/32px</DsHeading>
      <DsHeading as="h3" size="">Titres niveau 3 (h3) Roboto semibold Taille lg/24px</DsHeading>
      <br>
      <hr>
      <br>
      <DsHeading as="h4" size="">Titre de carte niveau 4 (h4) Roboto black Taille lg2/30px</DsHeading>
      <DsHeading as="h5" size="">Titres de carte niveau 5 (h5) Roboto medium Taille md2/23px</DsHeading>
      <DsHeading as="h6" size="">Titres de carte niveau 6 (h6) Roboto extralight Taille xs2/17px</DsHeading>
    </div>

    <div class="category">  
      <DsHeading class="centrer rempli" as="h3" size="">Les titres avec la police Brandon</DsHeading>
      <DsHeading as="h1" font="brandon" size="">Titres niveau 1 (h1) Brandon extrabold Taille 2xl/40px</DsHeading>
      <DsHeading as="h2" font="brandon" size="">Titres niveau 2 (h2) Brandon bold Taille xl/32px</DsHeading>
      <DsHeading as="h3" font="brandon" size="">Titres niveau 3 (h3) Brandon semibold Taille lg/24px</DsHeading>
      <br>
      <hr>
      <br>
      <DsHeading as="h4" font="brandon" size="">Titres de carte niveau 4 (h4) Brandon black Taille lg2/30px</DsHeading>
      <DsHeading as="h5" font="brandon" size="">Titres de carte niveau 5 (h5) Brandon medium Taille md2/23px</DsHeading>
      <DsHeading as="h6" font="brandon" size="">Titres de carte niveau 6 (h6) Brandon extralight Taille xs2/17px</DsHeading>
    </div>
    

    <div class="category">
      <DsHeading class="centrer rempli" as="h3" font="barlow" size="">Les titres avec la police Barlow</DsHeading>
      <DsHeading as="h1" font="barlow" size="">Titres niveau 1 (h1) Barlow extrabold Taille 2xl/40px</DsHeading>
      <DsHeading as="h2" font="barlow" size="">Titres niveau 2 (h2) Barlow bold Taille xl/32px</DsHeading>
      <DsHeading as="h3" font="barlow" size="">Titres niveau 3 (h3) Barlow semibold Taille lg/24px</DsHeading>
      <br>
      <hr>
      <br>
      <DsHeading as="h4" font="barlow" size="">Titres de carte niveau 4 (h4) Barlow black Taille lg2/30px</DsHeading>
      <DsHeading as="h5" font="barlow" size="">Titres de carte niveau 5 (h5) Barlow medium Taille md2/23px</DsHeading>
      <DsHeading as="h6" font="barlow" size="">Titres de carte niveau 6 (h6) Barlow extralight Taille xs2/17px</DsHeading>
    </div>

    <div class="category">
      <DsHeading class="centrer rempli" as="h3">Les textes</DsHeading>
      <DsText as="p" tone="brand_rouge">
        Texte standard police Roboto Flex / Taille 16px / couleur rouge ONDIF: info éditoriale, description, contenu d’article.
      </DsText>
      <br>
      <hr>
      <br>
      <DsText as="p" font="brandon">
        Texte police Brandon / Taille 16px : info éditoriale, description, contenu d’article.
      </DsText>
      <br>
      <hr>
      <br>
      <DsText as="p" font="barlow">
        Texte police Barlow / Taille 16px : info éditoriale, description, contenu d’article.
      </DsText>
      <br>
      <hr>
      <br>
      <DsText as="p" :clamp="2">
        Texte police Roboto Flex / Taille 16px / clampé sur 2 lignes pour les cartes (résumé, programme, etc.).
        Si ça dépasse, ça coupe proprement. Pour du texte de description qui doit tenir dans un cadre, mais qui a été écrit trop long, pour ne pas casser le design du site, on va limiter l'affichage à 2 lignes. c'est pour des espace réduit. Pour ne pas casser le design de la page. J'ai presque écrit 2 lignes, je vais bientôt être censurée.
      </DsText>
    </div>


    <div class="category">
      <DsHeading class="centrer rempli" as="h3">Carte concert</DsHeading>
      <DsText as="p" tone="brand_rouge">
        Pour les endroits où il y a une liste de concert page d'accueil, page agenda, page saison...
      </DsText>
      <br>
      <hr>
      <br>
      <ConcertCard
        id="1"
        title="TITRE DU CONCERT EN MAJUSCULE"
        venue="Nom du lieu, éventuellement de la salle"
        dateISO="2026-01-15T20:30:00+01:00"
        dateLabel="Jeudi 15 janvier 2026 — 20h30"
        description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
        imageUrl="https://picsum.photos/id/56/500/700"
        imageAlt="Orchestre sur scène"
        ctaHref="/concert[id]"
        detailsHref="/concerts/concert_template"
      />
    </div>

  </div>
</template>

<script setup>
    import DsHeading from '@root/design-system/primitives/DsHeading.vue'
    import DsText from '@root/design-system/primitives/DsText.vue'
</script>


<style lang="scss">
    
    .ds-preview {
      display: grid;
      //gap: var(--sp-4);
      padding: var(--sp-48);
      justify-content: center;
    }
    .titre {
      justify-self: center;
      margin-bottom: 50px;
    }
    .category {
      max-width: 1000px;
      justify-self: flex-start;
      margin-bottom: 30px;
      padding: 40px;
      border-radius: 14px;
    }
    .centrer {
      justify-self: center;
      margin-bottom: 30px;
    }
    .rempli {
      width: 100%;
      background-color: #ebebeb;

      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 10px;
      padding-right: 5px;
      border-radius: 5px;
    }
</style>