Section Top Highlight Dark

The VSectionTopHighlightDark component is a visually striking section designed to present featured content with dark mode styling, responsive images, and customizable text. It supports dynamic button actions and a list of checkmarked items for enhanced clarity.

Props

Name	Type	Required	Description
`data`	`IHighlightTop`	`true`	Contains the main content, images, and button links for the section.
`topic`	`String`	`false`	Query parameter appended to the "Get In Touch" button URL for topic-specific navigation.

`IHighlightTop` Interface

The data prop adheres to the IHighlightTop interface:

image (string, required): URL of the desktop image.
imageMobile (string, required): URL of the mobile image.
title (string, optional): Title text for the section.
subtitle (string, optional): Subtitle text for the section.
route (string, optional): Route for navigation (currently unused in the component).
isCaseStudy (boolean, optional): If true, displays a "Learn More in Use Cases" button.
checkedItems (ICheckmarkedItem[], optional): List of checkmarked items to display in the section.
topic (string, optional): Topic-specific identifier.
caseStudyLink (string, required if isCaseStudy): URL for the case study link.

Slots

content: Replaces or extends the default content (title, subtitle, buttons).
right: Replaces the default image with custom content.
default: Addes additional content in component under content information

Example Usage

vue

<script setup lang="ts">
import VSectionTopHighlightDark from 'UiKit/components/VSectionTop/VSectionTopHighlightDark.vue';
</script>
<template>
  <VSectionTopHighlightDark
    :data="{
      title: 'Innovative Solutions',
      subtitle: 'Explore how we help businesses grow.',
      image: '/images/cto/Rectangle-4-_8_.webp',
      imageMobile: '/images/cto/Rectangle-6-_1_.webp',
        checkedItems: [
        { title: 'Feature 1', description: 'Description of feature 1.' },
        { title: 'Feature 2', description: 'Description of feature 2.' }
      ]
    }"
    topic="technology"
  >
  </VSectionTopHighlightDark>
</template>

Innovative Solutions

Explore how we help businesses grow.

Get In Touch

Description of feature 1.

Description of feature 2.