Section

The VSection component is a reusable, flexible section container designed for structured content with titles, subtitles, buttons, and optional slots. It ensures that the content is displayed dynamically based on the provided props and slot content.

Props

Prop Name	Type	Default	Description
`title`	`String`	`null`	The main title to display in the section.
`subTitle`	`String`	`null`	An optional subtitle to display below the title.
`noData`	`Boolean`	`false`	If `true`, hides the main content and displays the "no data" message.
`noContainer`	`Boolean`	`false`	If `true`, disables the default container styling.
`buttonHref`	`String`	`null`	The URL for the button. If provided, the button will be displayed.
`buttonText`	`String`	`null`	The text to display on the button.
`linkHref`	`String`	`null`	The URL for the link.
`linkText`	`String`	`null`	The text to display for the link.

Slots

default:The primary content of the section, displayed if noData is false.
infoShort: Optional slot to add custom content for the VInfoShort component. This slot is only rendered if the title, subTitle, linkHref, linkText, or meaningful slot content exists.
noData: Custom slot to display content when noData is true. If not provided, a default message is shown: "Sorry, there is no data yet."

Example Usage

vue

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

<template>
  <VSection
    title="Welcome to Our Website"
    subTitle="Learn more about our services"
    buttonHref="/contact"
    buttonText="Get in Touch"
    linkHref="/about"
    linkText="About Us"
  >
    <p>This is the main content of the section, visible when data is available.</p>
  </VSection>
</template>

Welcome to Our Website

Learn more about our services

About Us

This is the main content of the section, visible when data is available.

Get in Touch