jio-list

Props

Prop name	Description	Type	Values	Default
listItems	The items to display in the list of items	Array	-

View on Gitlab

General

This is the standard list component.

View design in Figma

Code examples

A simple list.

<template>
  <div class="jio-core">
    <jio-list :listItems="items" />
  </div>
</template>

<script setup lang="ts">
const items: ListItem[] = [
  {
    title: "Titel van een list item zonder thumbnail",
    subTitle: "sub title zonder thumnail",
    icon: "deuren-sluiten",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. ",
    link: "/without-thumbnail",
  },
  {
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. ",
    link: "/without-thumbnail",
  },
  {
    title: "Title with thumnail",
    subTitle: "sub title with thumnail",
    icon: "deuren-sluiten",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. ",
    link: "/without-thumbnail",
    thumbnail:
      "https://asset.brandfetch.io/ideYZt2RLh/idpmM6YKr0.svg?updated=1713732730052",
  },
  {
    title: "Title with thumnail without link",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. ",
    thumbnail:
      "https://asset.brandfetch.io/ideYZt2RLh/idpmM6YKr0.svg?updated=1713732730052",
  },
];
</script>

jio-list ​

Props ​

General ​

Code examples ​

jio-list

Props

General

Code examples