Section About Us Midde
The VSectionAboutUsMiddle component is designed to display a section with a two-column layout that highlights information about a company. It includes a title, a list of items with optional action buttons, and an image.
Props
| Prop Name | Type | Required | Description |
|---|---|---|---|
data | IAboutUsMiddle | true | An object containing the section's data, including title, items, and background image. |
IAboutUsMiddle Interface
The data prop should conform to the following structure:
typescript
export interface IAboutUsMiddle {
title: string; // The main title of the section
background: string; // The URL of the background image
items: {
title: string; // Title for each item
text: string; // HTML content for the item description
showCareersButton: boolean; // Whether to show the "Careers" button
}[];
}Slots
infoShort: Slot for additional content displayed above the items list.
Features
- Two-Column Layout: Displays content on the left and an image on the right.
- Dynamic Content: Accepts a data prop to render dynamic items and an image.
Example
vue
<script setup lang="ts">
import VSectionAboutUsMiddle from 'UiKit/components/VSection/VSectionAboutUsMiddle.vue';
const sectionData = {
title: 'About Our Company',
background: '/images/about-us/middle.webp',
items: [
{
title: 'Our Mission',
text: 'We aim to provide the best services for our customers.',
showCareersButton: true,
},
{
title: 'Our Vision',
text: 'Innovating the future through cutting-edge solutions.',
showCareersButton: false,
},
],
};
</script>
<template>
<VSectionAboutUsMiddle :data="sectionData" />
</template>