jio-footer

Props

Prop name	Description	Type	Values	Default
columns	Data describing each column	Array	-
links	Separate links that are not in columns	Array	-
variant	The desired theme `@values` "dark", "light"	string	-	"light"

Slots

Name	Description	Bindings
default
brand

View on Gitlab

General

This is the footer component.

View design in Figma

Code examples

The dark variant of the footer.

<template>
  <div class="jio-core">
    <jio-footer
      id="footer-example-0"
      :columns="footerData.columns"
      :links="footerData.links"
      variant="dark"
    >
      <template #brand>
        <jio-image src="/gk-i logo.svg" alt="GK-I logo" />
      </template>
    </jio-footer>
  </div>
</template>

<script setup lang="ts">
const footerData = {
  columns: [
    {
      label: "kolom een",
      links: [
        { label: "een", to: "/#" },
        { label: "twee", to: "/#" },
        { label: "drie", to: "/#", isExternal: true },
      ],
    },
    {
      label: "kolom twee",
      links: [
        { label: "vier", to: "/#" },
        { label: "vijf", to: "/#" },
        { label: "zes", to: "/#" },
      ],
    },
    {
      label: "kolom drie",
      links: [
        { label: "zeven", to: "/#" },
        { label: "acht", to: "/#" },
        { label: "negen", to: "/#" },
      ],
    },
  ],
  links: [
    { label: "Privacy", to: "/#" },
    { label: "Cookies", to: "/#" },
    { label: "Toegankelijkheid", to: "/#" },
    { label: "Hoog contrast", to: "/#" },
  ],
};
</script>

The light variant of the footer.

<template>
  <div class="jio-core">
    <jio-footer
      id="footer-example-0"
      :columns="footerData.columns"
      :links="footerData.links"
      variant="light"
    >
      <template #brand>
        <jio-image src="/gk-i logo.svg" alt="GK-I logo" />
      </template>
    </jio-footer>
  </div>
</template>

<script setup lang="ts">
const footerData = {
  columns: [
    {
      label: "kolom een",
      links: [
        { label: "een", to: "/#" },
        { label: "twee", to: "/#" },
        { label: "drie", to: "/#", isExternal: true },
      ],
    },
    {
      label: "kolom twee",
      links: [
        { label: "vier", to: "/#" },
        { label: "vijf", to: "/#" },
        { label: "zes", to: "/#" },
      ],
    },
    {
      label: "kolom drie",
      links: [
        { label: "zeven", to: "/#" },
        { label: "acht", to: "/#" },
        { label: "negen", to: "/#" },
      ],
    },
  ],
  links: [
    { label: "Privacy", to: "/#" },
    { label: "Cookies", to: "/#" },
    { label: "Toegankelijkheid", to: "/#" },
    { label: "Hoog contrast", to: "/#" },
  ],
};
</script>

jio-footer ​

Props ​

Slots ​

General ​

Code examples ​

Props

Slots

General

Code examples