Речкина Елена Валерьевна
58 lines
1.3 KiB
Vue
58 lines
1.3 KiB
Vue
<template>
|
|
<div :class="$style.SectionLinkList">
|
|
<div v-for="link in links" :key="link.title" :class="$style.SectionLinkListItem">
|
|
<div :class="$style.SectionLinkListLink">
|
|
<VPLink :href="link.link">{{ link.title }}</VPLink>
|
|
</div>
|
|
<div :class="$style.SectionLinkListDescription">
|
|
{{ link.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
|
|
import { SectionLinkListProps } from './SectionLinkList.types'
|
|
|
|
defineProps<SectionLinkListProps>()
|
|
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
@use "@beeline/design-tokens/scss/tokens/themes";
|
|
@use "@beeline/design-tokens/scss/tokens/globals/sizes";
|
|
@use "@beeline/design-tokens/scss/mixin";
|
|
|
|
.SectionLinkList {
|
|
$el: &;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: sizes.$size-spacing-x6 sizes.$size-spacing-x6;
|
|
margin-top: sizes.$size-spacing-x10;
|
|
|
|
&Item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: sizes.$size-spacing-x2;
|
|
// max-width: 315px;
|
|
}
|
|
|
|
&Link {
|
|
|
|
a,
|
|
a:hover,
|
|
a:visited,
|
|
a:active {
|
|
color: themes.$color-text-link;
|
|
text-decoration: none;
|
|
@include mixin.subtitle3;
|
|
}
|
|
}
|
|
|
|
&Description {
|
|
color: themes.$color-text-inactive;
|
|
@include mixin.body3;
|
|
}
|
|
}
|
|
</style> |