generated from gitea_admin/default
75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
<template>
|
|
<DsCard class="square-card">
|
|
<div class="square-card__grid">
|
|
<!-- Image -->
|
|
<div class="square-card__media">
|
|
<DsMedia :src="imgSrc" :alt="imgAlt" ratio="square" />
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="square-card__content">
|
|
<DsHeading as="h5" tone="default" class="square-card__title">
|
|
{{ title }}
|
|
</DsHeading>
|
|
<!-- Description -->
|
|
<DsText as="p" tone="default" :clamp="3" class="square-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: '' },
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.square-card__grid {
|
|
display: grid;
|
|
align-items: start;
|
|
}
|
|
|
|
.square-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;
|
|
}
|
|
|
|
.square-card__meta {
|
|
margin-top: calc(var(--sp-4) * -1);
|
|
}
|
|
.square-card__description {
|
|
margin-top: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.square-card__actions {
|
|
margin-top: auto;
|
|
}
|
|
|
|
</style> |