wondif_vue/app/pages/orchestre/actus copie.vue

<template>
  <div class="actus--page">
      <!-- ================== -->
      <!-- FILS D'ARIANE -->
      <!-- ================== -->
      <PageSection tone="" content-size="default" class="breadcrum_wp">
        <Breadcrumb/>
      </PageSection>

      <!-- ================== -->
      <!-- EN-TêTE -->
      <!-- ================== -->
      <PageSection padded_size="md" position="relative" overflow="hidden" class="">
        <SectionContent>
            <SectionTitle tone="" pad="xs">
              ACTUALITÉS
            </SectionTitle>
        </SectionContent>
      </PageSection>

      <!-- ================== -->
      <!-- LISTE DES ACTUS -->
      <!-- ================== -->
      <PageSection padded_size="md" position="relative" overflow="hidden" class="">
        <SectionContent>
            <div class="grid_3">
              <article class="card">
                <div class="card--img">
                  <DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
                </div>
                <div class="card--content">
                  <h2>Titre</h2>
                  <p>Description</p>
                </div>
              </article>
              <article class="card">
                <div class="card--img">
                  <DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
                </div>
                <div class="card--content">
                  <h2>Titre</h2>
                  <p>Description</p>
                </div>
              </article>
              <article class="card">
                <div class="card--img">
                  <DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
                </div>
                <div class="card--content">
                  <h2>Titre</h2>
                  <p>Description</p>
                </div>
              </article>
              <article class="card">
                <div class="card--img">
                  <DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
                </div>
                <div class="card--content">
                  <h2>Titre</h2>
                  <p>Description</p>
                </div>
              </article>
              <article class="card">
                <div class="card--img">
                  <DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
                </div>
                <div class="card--content">
                  <h2>Titre</h2>
                  <p>Description</p>
                </div>
              </article>
              <article class="card">
                <div class="card--img">
                  <DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
                </div>
                <div class="card--content">
                  <h2>Titre</h2>
                  <p>Description</p>
                </div>
              </article>
              <article class="card">
                <div class="card--img">
                  <DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
                </div>
                <div class="card--content">
                  <h2>Titre</h2>
                  <p>Description</p>
                </div>
              </article>
              <article class="card">
                <div class="card--img">
                  <DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
                </div>
                <div class="card--content">
                  <h2>Titre</h2>
                  <p>Description</p>
                </div>
              </article>
              <article class="card">
                <div class="card--img">
                  <DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
                </div>
                <div class="card--content">
                  <h2>Titre</h2>
                  <p>Description</p>
                </div>
              </article>
            </div>
        </SectionContent>
      </PageSection>

  </div>
</template>

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


  // ======================================
  // RÉCUPÉRATION DES DONNÉES DANS STRAPI
  // ======================================


  // ======================================
  // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
  // ======================================
  const imgSrc= '/contenus/pablo_gonzalez.jpg'
</script>

<style lang="scss">
  // =======================
  // SPÉCIFIQUE À CETTE PAGE
  // =======================
  .actus--page {
    .grid_3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto;
      gap: 4%;
    }
    .card {
      display: flex;
      background: white;


      &--content {

        background: #e5e5e5;
      }
    }




    .fiche_description {
      display: flex;
      justify-content: center;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      > * {
        max-width: 640px;
        display: flex;
        flex-direction: column;
      }
    }
    .strapi-blocks {
      h2 {
        color: var(--c-bleu);
      }
    }
  }

  /* ============================ */
  /* GALERIES */
  /* ============================ */

</style>