Section Two Col Image
The VSectionTwoColImage component is a flexible section component designed for a two-column layout with a wide range of customization options. It supports titles, subtitles, images, cards, captions, and more, making it suitable for complex content structures.
Props
| Prop Name | Type | Default | Required | Description |
|---|---|---|---|---|
data | IShortTitleWithTwoColDataData[][] | undefined | Yes | Array of two-column layout data objects to render content dynamically. |
bordered | Boolean | false | No | If true, adds a border between rows of data. |
title | String | undefined | No | Title displayed at the top of the section. |
subTitle | String | undefined | No | Subtitle displayed below the title. |
linkHref | String | undefined | No | URL for the section link. |
linkText | String | undefined | No | Text for the section link. |
IShortTitleWithTwoColDataData Interface
ts
export interface IShortTitleWithTwoColDataData {
title?: string;
subtitle?: string;
isSubheading?: boolean;
isCentered?: boolean;
cardItems?: {
tagText: string;
text: string;
tagColor: string;
}[];
cardNumbered?: string[];
imageBody?: string;
imageSmallHeight?: boolean;
captions?: {
text: string;
url?: string;
}[];
mobileReverse?: boolean;
}Slots
infoShort: Slot for additional short information displayed at the top of the section.
Example
vue
<script setup lang="ts">
import VSectionTwoColImage from 'UiKit/components/VSection/VSectionTwoColImage.vue';
import bankBottom2 from '/images/digital-ecosystem/illustration-management_(4).svg?url';
const sectionData = [
[
{
title: 'Column 1 Title',
subtitle: 'This is a subtitle for the first column.',
isSubheading: true,
imageBody: bankBottom2,
mobileReverse: false,
},
{
title: 'Column 2 Title',
subtitle: 'This is a subtitle for the second column.',
isCentered: true,
captions: [{ text: 'Caption 2' }, { text: 'Caption 1', url: 'https://example.com' }],
},
],
];
</script>
<template>
<VSectionTwoColImage
:data="sectionData"
title="Section Title"
sub-title="Section Subtitle"
linkHref="https://example.com"
linkText="Learn More"
bordered
/>
</template>Column 1 Title
This is a subtitle for the first column.
.svg)