generated from gitea_admin/default
74 lines
1.8 KiB
Vue
74 lines
1.8 KiB
Vue
<template>
|
|
<DsCard class="textleft-card">
|
|
<div class="textleft-card__grid">
|
|
<!-- Content -->
|
|
<div class="textleft-card__content">
|
|
<DsHeading as="h5" tone="default" class="textleft-card__title">
|
|
{{ title }}
|
|
</DsHeading>
|
|
<!-- Description -->
|
|
<DsText as="p" tone="default" :clamp="3" class="textleft-card__description">
|
|
{{ description }}
|
|
</DsText>
|
|
|
|
<!-- Actions -->
|
|
<div class="concert-card__actions">
|
|
<DsButtonArrow :to="`/concerts/${id}`" variant="secondary">
|
|
Découvrir
|
|
</DsButtonArrow>
|
|
</div>
|
|
|
|
</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: '' },
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.textleft-card__grid {
|
|
display: grid;
|
|
align-items: start;
|
|
}
|
|
|
|
.textleft-card__content {
|
|
display: grid;
|
|
gap: var(--sp-6);
|
|
max-width: 518px;
|
|
padding-left: 10px;
|
|
padding-right: 20px;
|
|
padding-top: 3px;
|
|
background: white;
|
|
border-left: 2px solid;
|
|
&:hover {
|
|
border-left-color: var(--c-brand_rouge);
|
|
}
|
|
}
|
|
|
|
.textleft-card__meta {
|
|
margin-top: calc(var(--sp-4) * -1);
|
|
}
|
|
.textleft-card__description {
|
|
margin-top: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.textleft-card__actions {
|
|
margin-top: auto;
|
|
}
|
|
|
|
</style> |