Lists Left Border

Overview

VListsLeftBorder renders a list with a decorative left border for emphasis.

Props

Name	Type	Required	Description
`items`	`IListsLeftBorder[]`	true	Items to render within bordered block.

IListsLeftBorder

interface IListsLeftBorder {
  text: string;
  title: string;
  icon: string; // icon path/component for VSvgIcon
}

When to use

To visually group related items
When you need subtle emphasis without icons

Usage

vue

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

const items = [
  { title: 'Built for scale', text: 'Handles growth gracefully.' },
  { title: 'Modern tooling', text: 'Best practices by default.' },
];
</script>

<template>
  <VListsLeftBorder :items="items" />
  
</template>

Built for scale
Handles growth gracefully.
Modern tooling
Best practices by default.

Appearance

Thin accent border on the left of the list block
Items stacked vertically with comfortable spacing