Section Top

The VSectionTop component is designed to create a structured and visually appealing top section of a page. It leverages the VSection and VTopInfo components to provide flexibility in displaying content with optional slots for customization. Location: ui-kit/src/components/VSectionTop/VSectionTop.vue

Props

Name	Type	Description
`title`	`String`	The main title of the section.
`subtitle`	`String`	An optional subtitle to provide additional context.
`text`	`String`	The main content or description for the section.
`getInTouchUrl`	`String`	URL for the "Get in Touch" button.
`tagText`	`String`	Text to be displayed in the associated tag or badge.
`useCaseUrl`	`String`	URL for the "Learn More in Use Cases" button.

Slots

Default: Use this slot to insert custom content or override the default VTopInfo content.
right: Place additional content, such as images or supplementary information, to the right of the main content.

Example Usage

vue

<script setup lang="ts">
import VSectionTop from 'UiKit/components/VSectionTop/VSectionTop.vue';
</script>
<template>
  <VSectionTop
    title="Welcome to Our Platform"
    subtitle="Discover the features and benefits of using our service."
    text="We provide cutting-edge solutions tailored to your needs."
    getInTouchUrl="/contact"
    tagText="New"
    useCaseUrl="/use-cases"
  >
    <template #right>
      <img src="/assets/images/example.jpg" alt="Example Image" />
    </template>
  </VSectionTop>
</template>

New

Welcome to Our Platform

Discover the features and benefits of using our service.

We provide cutting-edge solutions tailored to your needs.

Get In Touch Learn More in Use Cases