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

Data Structure for data Prop

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

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

Example

<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>

Color

color="dark"

color="primary"

Two Columns

with two-col prop

without two-col prop