Top

The VInfoTop component is a flexible and visually styled block designed to showcase important information such as titles, subtitles, descriptions, and action buttons. This component is highly customizable and can include badges, buttons, and additional content using slots. Location: ui-kit/src/components/VInfo/VInfoTop.vue

Props

Prop Name	Type	Default	Description
`title`	`String`	`null`	The primary title displayed prominently at the top of the info section.
`subtitle`	`String`	`null`	A subtitle to provide additional context beneath the title.
`text`	`String`	`null`	The main description text, rendered as HTML content.
`tagText`	`String`	`null`	The text displayed within a badge at the top of the info section.
`getInTouchUrl`	`String`	`null`	URL for the "Get In Touch" button.
`useCaseUrl`	`String`	`null`	URL for the "Learn More in Use Cases" button, including an arrow icon.

Slots

default - Use this slot to customize the content displayed in the main section of the component.
buttons - Customize the buttons displayed at the bottom of the info section. By default, the buttons include:

Get In Touch: A primary button linked to the getInTouchUrl prop.
Learn More in Use Cases: A secondary link-style button linked to the useCaseUrl prop.

Example

vue

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

const title = "Welcome to Our Platform";
const subtitle = "Explore our features and offerings.";
const text = "Discover how we can help transform your business through innovative solutions.";
const tagText = "New";
const getInTouchUrl = "/contact";
const useCaseUrl = "/use-cases";
</script>

<template>
  <VInfoTop
    :title="title"
    :subtitle="subtitle"
    :text="text"
    :tagText="tagText"
    :getInTouchUrl="getInTouchUrl"
    :useCaseUrl="useCaseUrl"
  />
</template>

Result:

New

Welcome to Our Platform

Explore our features and offerings.

Discover how we can help transform your business through innovative solutions.

Get In Touch Learn More in Use Cases