Section Image

A component to display an image section with a title and text on the right side. It supports layout adjustments for mobile responsiveness. Location: ui-kit/src/components/VSection/VSectionImage.vue

Props

Prop Name	Type	Default	Required	Description
`image`	`String`	`undefined`	Yes	The source path of the image to display.
`alt`	`String`	`undefined`	No	The alternative text for the image.
`rightTitle`	`String`	`undefined`	No	The title to display on the right side of the section.
`rightText`	`String`	`undefined`	No	The text to display below the title on the right side.
`mobileReverse`	`Boolean`	`true`	No	If `true`, the layout on mobile will have the image below the text (reverse order). Default is `true`.

Slots

infoShort: A slot to provide a short information block. It will be rendered in the right side area of the section.
left: A slot for rendering content on the left side of the section, which contains the image.
right: A slot for rendering content on the right side of the section. This is typically for rendering text or additional components.

Example

vue

<script setup lang="ts">
import VSectionImage from 'UiKit/components/VSection/VSectionImage.vue';
import FeaturesMigration from '/images/products/illustration-management.svg?url';
</script>
<template>
<VSectionImage
  right-title="Systematic Migration Assurance"
  right-text="Each migration within our service is assigned a unique revision, ensuring a meticulous and organized execution in ascending order. This systematic approach not only simplifies the process but also guarantees the integrity and consistency of your data throughout the migration journey."
  :image="FeaturesMigration"
/>
</template>

Systematic Migration Assurance

Each migration within our service is assigned a unique revision, ensuring a meticulous and organized execution in ascending order. This systematic approach not only simplifies the process but also guarantees the integrity and consistency of your data throughout the migration journey.