jio-card

Props

Prop name	Description	Type	Values	Default
card	Card component	CardInterface	-
View on Gitlab
General

This component is based on the Bootstrap card.
View design in Figma
Code examples

A simple card.
<template>
  <div class="jio-core">
    <jio-card :card="cardImageTop" />
    <br />
    <jio-card :card="cardImageLeft" />
    <br />
    <jio-card :card="cardFull" />
    <br />
    <jio-card :card="cardFullButtonRound" />
    <br />
    <jio-card :card="cardFullButtonOutline" />
    <br />
    <jio-card :card="cardFullButtonHighContrast" />
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

const cardImageTop: CardInterface = reactive({
  selected: false,
  selectable: true,
  orientation: "vertical",
  title: "Kaart met image boven",
  description: "Donec id elit non mi porta gravida at eget metus.",
  image:
    "https://asset.brandfetch.io/ideYZt2RLh/idpmM6YKr0.svg?updated=1713732730052",
  button: {
    text: "Button",
    iconLeft: "delta-rechts-24px",
    iconRight: "delta-links-24px",
    rounded: false,
    outline: false,
    highContrast: false,
  },
});

const cardImageLeft: CardInterface = reactive({
  selected: false,
  selectable: false,
  orientation: "horizontal",
  title: "Kaart met image rechts",
  description: "Donec id elit non mi porta gravida at eget metus.",
  image:
    "https://asset.brandfetch.io/ideYZt2RLh/idpmM6YKr0.svg?updated=1713732730052",
  button: {
    text: "Button",
    iconLeft: "delta-rechts-24px",
    iconRight: "delta-links-24px",
    rounded: false,
    outline: false,
    highContrast: false,
    path: "/other-page",
  },
});

const cardFull: CardInterface = reactive({
  selected: false,
  selectable: true,
  orientation: "horizontal",
  title: "Kaart zonder image",
  description: "Donec id elit non mi porta gravida at eget metus.",
  button: {
    text: "Button",
    iconLeft: "delta-rechts-24px",
    iconRight: "delta-links-24px",
    rounded: false,
    outline: false,
    highContrast: false,
  },
});

const cardFullButtonRound: CardInterface = reactive({
  selected: false,
  selectable: true,
  orientation: "horizontal",
  title: "Kaart zonder image",
  description: "Donec id elit non mi porta gravida at eget metus.",
  button: {
    text: "Button",
    iconLeft: "delta-rechts-24px",
    iconRight: "delta-links-24px",
    rounded: true,
    outline: false,
    highContrast: false,
  },
});

const cardFullButtonOutline: CardInterface = reactive({
  selected: false,
  selectable: true,
  orientation: "horizontal",
  title: "Kaart zonder image",
  description: "Donec id elit non mi porta gravida at eget metus.",
  button: {
    text: "Button",
    iconLeft: "delta-rechts-24px",
    iconRight: "delta-links-24px",
    rounded: false,
    outline: true,
    highContrast: false,
  },
});

const cardFullButtonHighContrast: CardInterface = reactive({
  selected: false,
  selectable: true,
  orientation: "horizontal",
  title: "Kaart zonder image",
  description: "Donec id elit non mi porta gravida at eget metus.",
  button: {
    text: "Button",
    iconLeft: "delta-rechts-24px",
    iconRight: "delta-links-24px",
    rounded: false,
    outline: false,
    highContrast: true,
  },
});
</script>
jio-card ​

Props ​

General ​

Code examples ​

jio-card

Props

General

Code examples
