List Two Column Grid

Overview

VListTwoColGrid displays items in a responsive two-column list layout.

Props

Name	Type	Required	Description
`items`	`any[]`	true	Array of items passed to slot as `item`. Optional `item.class` controls content layout.

When to use

Dense lists where single-column scrolling is too long
Features/specs that benefit from a compact grid

Usage

vue

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

const items = [
  { title: 'Block A', text: 'Left to right layout.' },
  { title: 'Block B', text: 'Reversed on desktop.', class: 'is--reverse' },
];
</script>

<template>
  <VListTwoColGrid :items="items">
    <template #default="{ item }">
      <div style="display:flex; gap: 20px; align-items:center; width: 100%;">
        <div style="flex:1;">
          <h3 class="is--h4__title">{{ item.title }}</h3>
          <p class="is--color-gray-80">{{ item.text }}</p>
        </div>
        <div style="flex:1; background:#f7f7f7; height:120px; border-radius:8px;" />
      </div>
    </template>
  </VListTwoColGrid>
  
</template>

Block A
Left to right layout.
Block B
Left to right layout.

Appearance

Two equal-width columns on larger screens; stacks on small screens
Balanced spacing to maintain readability