Highlight

The VInfoHighlight component displays a highlight block with a title and a description. It is designed to accept structured data through its props.

Props

Prop Name	Type	Required	Description
`data`	`IHighlightInfo`	`true`	An object containing `title` and `text` to display.

typescript

interface IHighlightInfo {
  title: string; // The title to display in the highlight block.
  text: string;  // The text content displayed below the title.
}

Example

vue

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

<template>
  <VInfoHighlight
    :data="{
      title: 'Important Highlight',
      text: 'This is a detailed description for the highlight block.'
    }"
  />
</template>

Result:

Important Highlight

This is a detailed description for the highlight block.