Help us ensure access to essential medical services in remote areas.
Healthcare Support
Saving lives
Section Card Primary Different Height
The VSectionCardsPrimaryDifferentHeight component displays a section with a title, subtitle, and a list of primary cards with varying heights. It supports slots for customization and a responsive layout.
Props
| Prop Name | Type | Required | Description |
|---|---|---|---|
data | ISectionCardsPrimaryDifferentHeight | true | Object containing section details, including title, subtitle, and card items. |
ISectionCardsPrimaryDifferentHeight Interface
The data prop must follow this structure:
typescript
interface ISectionCardsPrimaryDifferentHeight {
title: string; // Section title
subtitle: string; // Section subtitle, supports HTML content
items: {
title: string; // Card title
subtitle: string; // Card subtitle
text: string; // Card text content
url: string; // URL for the card's action button
}[];
}Slots
infoShort: Slot for additional content displayed above the items list.
Example
vue
<script setup lang="ts">
import VSectionCardsPrimaryDifferentHeight from 'UiKit/components/VSection/VSectionCardsPrimaryDifferentHeight.vue';
const sectionData = {
title: 'Support Our Causes',
subtitle: 'Explore our projects and contribute to the initiatives you believe in.',
items: [
{
title: 'Healthcare Support',
subtitle: 'Saving lives',
text: 'Help us ensure access to essential medical services in remote areas.',
url: '/donate/healthcare',
},
{
title: 'Clean Water Initiative',
subtitle: 'A basic right for everyone.',
text: 'Join us in our mission to provide clean and safe drinking water worldwide.',
url: '/donate/water',
},
{
title: 'Education for All',
subtitle: 'Empowering future generations.',
text: 'Your support helps us provide quality education to underprivileged children.',
url: '/donate/education',
},
],
};
</script>
<template>
<VSectionCardsPrimaryDifferentHeight :data="sectionData" />
</template>Support Our Causes
Explore our projects and contribute to the initiatives you believe in.