Section Two Col

The VSectionTwoCol component is a layout component designed to create a two-column structure with customizable slots for left and right content. It also supports optional mobile reverse ordering.

Props

ISectionTwoColRight Interface

interface ISectionTwoColRight {
  title: string; // Title for the right column
  text: string;  // Text for the right column
}

Slots

• default: Default slot for the main content, typically used to structure both left and right columns.
• infoShort: Slot for additional short information displayed at the top of the section.
• left: Slot specifically for the left column content.
• right: Slot specifically for the right column content. Overrides the default right prop content.

Example

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

const rightData = {
  title: "Right Column Title",
  text: "This is some text content for the right column.",
};
</script>

<template>
  <VSectionTwoCol
    title="Two Column Layout"
    :right="rightData"
    :mobileReverse="true"
  >
    <template #left>
      <div>
        <h3>Left Column Content</h3>
        <p>This is the left column.</p>
      </div>
    </template>
  </VSectionTwoCol>
</template>