Intro

Overview

The VIntro component provides an introductory section with customizable content, such as titles, text, and lists. It supports various layouts, including single and two-column grids, as well as styling based on the provided color prop.

Location: ui-kit/src/components/VAds/VIntro.vue

Features

Dynamic Data Injection: The component accepts an array of objects with titles, text, and lists.
Responsive Layout: Support for one or two-column layouts based on screen size.
Customizable Colors: You can choose between dark or primary light background styles.
Custom Titles and Subtitles: Supports title and subtitle customization for each section.

Component Props

Prop Name	Type	Default	Required	Description
`data`	`Array` (PropType<IDigitalIntro[]>)	`undefined`	Yes	An array of objects containing `title`, `text`, and `list` for each item.
`short`	`Boolean`	`false`	No	If true, reduces the width of the section.
`twoCol`	`Boolean`	`false`	No	If true, displays the content in a two-column grid layout.
`title`	`String`	`undefined`	No	The main title for the section.
`subTitle`	`String`	`undefined`	No	The subtitle for the section.
`color`	`'dark' \| 'primary'`	`undefined`	No	The background color style for the section. Options are `'dark'` or `'primary'`.

Data Structure for `data` Prop

The data prop should be an array of objects with the following structure:

typescript

interface IDigitalIntro {
  title: string;
  text: string;
  list: string[];
}

Example

vue

<script setup lang="ts">
import VIntro from 'UiKit/components/VAds/VIntro.vue';

const data2 =[
    {
      text: 'Utilize designated communication channels and collaboration tools for organized topic-specific discussions to efficiently share key information without overwhelming team members.'
    },
    {
      text: 'Employ task management software for assigning duties and tracking project progress, ensuring tasks and milestones are kept transparent and up-to-date in real time.'
    },
  ];
</script>

<template>
  <VIntro 
    title="Strengthening Internal Team Communication"
    sub-title="Strategies for improving how our team connects and collaborates on projects."
    :data="data2"
    two-col
    color="dark"
  />
</template>