generated from gitea_admin/default
39 lines
1.0 KiB
Vue
39 lines
1.0 KiB
Vue
<template>
|
|
<article class="ds-card">
|
|
<div v-if="$slots.media" class="ds-card__media">
|
|
<slot name="media" />
|
|
</div>
|
|
<div class="ds-card__content">
|
|
<header v-if="$slots.header" class="ds-card__header">
|
|
<slot name="header" />
|
|
</header>
|
|
<div class="ds-card__body">
|
|
<slot />
|
|
</div>
|
|
<footer v-if="$slots.footer" class="ds-card__footer">
|
|
<slot name="footer" />
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.ds-card {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
border-radius: var(--r-lg);
|
|
background: var(--c-surface);
|
|
overflow: hidden;
|
|
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
|
|
|
|
&__media { aspect-ratio: 16/9; background: var(--c-surface-muted); }
|
|
&__content { display: grid; gap: var(--sp-3); }
|
|
|
|
&__header { display: grid; gap: var(--sp-2); }
|
|
&__footer { display: flex; gap: var(--sp-2); align-items: center; }
|
|
}
|
|
</style> |