dev

app/components/RoundedCardBlocText.vue

@@ -0,0 +1,108 @@
+<template>
+  <DsCard class="rounded-card">
+    <div class="rounded-card__grid">
+      <!-- Image -->
+      <div class="rounded-card__media">
+        <DsMedia :src="imgSrc" :alt="imgAlt" :ratio="ratio" />
+      </div>
+
+      <!-- Content -->
+      <div class="rounded-card__content">
+        <NuxtLink v-if="url" :to="url" class="rounded-card__title-link">
+          <DsHeading as="h5" tone="default" class="rounded-card__title">
+            {{ title }}
+          </DsHeading>
+        </NuxtLink>
+        <DsHeading v-else as="h5" tone="default" class="rounded-card__title">
+            {{ title }}
+        </DsHeading>
+        <!-- Description -->
+        <DsText as="p" tone="default" :clamp="3" class="rounded-card__description">
+          {{ description }}
+        </DsText>
+
+      </div>
+    </div>
+  </DsCard>
+</template>
+
+<script setup>
+  import DsCard from '@root/design-system/components/DsCard.vue'
+  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
+  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+  import DsText from '@root/design-system/primitives/DsText.vue'
+  import DsButtonArrow from '@root/design-system/primitives/DsButtonArrow.vue'
+
+
+  defineProps({
+    id: { type: [String, Number], required: true },
+    title: { type: String, required: true },
+    url: { type: String, required: true },
+    description: { type: String, default: '' },
+    imgSrc: { type: String, default: '' },
+    imgAlt: { type: String, default: '' },
+    ratio: { type: String, default: 'square' },
+  })
+</script>
+
+<style lang="scss">
+  .rounded-card {
+    padding: 16px;
+    box-shadow: 0px -1px 20px rgba(0, 0, 0, 0.18);
+
+    .rounded-card__grid {
+      display: grid;
+      align-items: start;
+    }
+
+    .rounded-card__content {
+      display: grid;
+      gap: var(--sp-6);
+      max-width: 518px;
+      padding-left: 22px;
+      padding-right: 20px;
+      padding-top: 13px;
+      padding-bottom: 10px;
+      background: white;
+      max-width: 85%;
+      justify-self: center;
+      position: relative;
+      margin-top: -50px;
+      border-radius: 20px;
+    }
+
+    .rounded-card__meta {
+      margin-top: calc(var(--sp-4) * -1);
+    }
+
+    .rounded-card__title-link {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .rounded-card__title-link:hover,
+    .rounded-card__title-link:focus-visible {
+      color: var(--c-brand_rouge) !important;
+      .ds-heading--default {
+        color: var(--c-brand_rouge) !important;
+      }
+    }
+
+    .rounded-card__description {
+      margin-top: 10px;
+      margin-bottom: 20px;
+    }
+    .rounded-card__actions {
+      margin-top: auto;
+    }
+
+    .rounded-card__media {
+      .ds-media {
+        background: white !important;
+      }
+      img {
+        border-radius: 20px;
+      }
+    }
+  }
+</style>