Section Top Development
The VSectionTopDevelopment component is a specialized implementation of the VSectionTop component, tailored for development-related pages. It allows for a structured presentation of text, subtitles, and an optional background image.
Props
| Name | Type | Required | Description |
|---|---|---|---|
data | IDevelopmentTop | true | Object containing section content data. |
topic | String | false | A string for appending a query parameter to URLs. |
IDevelopmentTop Interface
The data prop must follow the IDevelopmentTop structure:
title(string): The title for the section.text(string): Descriptive text for the section.subtitle(string): A subtitle for the section.getInTouchUrl(string): URL for a "Get in Touch" link.image(string): URL of the background image.class(string): CSS class for customizing the background image styling.
Slots
right: Populates the right side of the section with the background image.
Example Usage
vue
<script setup lang="ts">
import VSectionTopDevelopment from 'UiKit/components/VSectionTop/VSectionTopDevelopment.vue';
</script>
<template>
<VSectionTopDevelopment
:data="{
title: 'Advanced Development Practices',
subtitle: 'Enhancing Project Efficiency',
text: 'Explore how we apply modern practices to streamline your project.',
getInTouchUrl: '/contact',
image: '/images/products/distributed-network-and-blockchain-development copy.svg',
class: 'is--process',
}"
topic="development"
/>
</template>