[READ-ONLY] Mirror of https://github.com/hacknug/romi-project.
romi-project.vercel.app
Use `BaseCard` component for partner cards
Nestor Vera
(Jul 20, 2022, 10:54 AM +0200)
929f1131
4f675b2b
+16
-12
+16
-12
components/content/SitePartners.vue
+16
-12
components/content/SitePartners.vue
···
1
1
<template>
2
2
<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
3
3
<ContentList path="/partners" v-slot="{ list }" >
4
-
<li v-for="article in list" :key="article._path" :class="['grid gap-4 content-start', 'bg-white rounded-lg p-8']">
5
-
<div class="flex">
6
-
<NuxtLink class="flex" :to="article.url" target="_blank">
7
-
<img class="w-auto h-16 object-contain object-left-bottom grayscale" :src="article.logo" :alt="`${article.title} logo`">
8
-
</NuxtLink>
9
-
</div>
10
-
<div class="grid gap-2">
11
-
<h2 class="flex !text-xl md:!text-2xl">
12
-
<NuxtLink class="flex" :to="article.url" target="_blank">{{ article.title }}</NuxtLink>
13
-
</h2>
14
-
<p>{{ article.description }}</p>
15
-
</div>
4
+
<li v-for="article in list" :key="article._path">
5
+
<BaseCard v-bind="article" class="h-full">
6
+
<template #media>
7
+
<NuxtLink class="flex pt-8 px-8" :to="article.url" target="_blank">
8
+
<img class="w-auto h-16 object-contain object-left-bottom grayscale" :src="article.logo" :alt="`${article.title} logo`">
9
+
</NuxtLink>
10
+
</template>
11
+
<template #title>
12
+
<h2 class="flex !text-xl md:!text-2xl">
13
+
<NuxtLink class="flex" :to="article.url" target="_blank">{{ article.title }}</NuxtLink>
14
+
</h2>
15
+
</template>
16
+
<template #default>
17
+
<p>{{ article.description }}</p>
18
+
</template>
19
+
</BaseCard>
16
20
</li>
17
21
</ContentList>
18
22
</ul>