Partners

Overview

The VCardPartner component is designed to display a list of partner items within a card. Each partner item has a background color, an icon, and descriptive text. It uses the VCard and VCardContent components for layout and styling.

Props

Prop Name	Type	Required	Description
`items`	`Array<ICardPartner[]>`	Yes	An array of partner items. Each item should contain a `color`, `icon`, and `text` to display in the card.

Item Structure (ICardPartner)

Each item in the items array should be an object with the following properties:

interface ICardPartner {
  color: string;  // Background color for the item
  icon: string;   // Path or URL to the icon image
  text: string;   // Descriptive text for the item
}

Example

vue


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

<template>
  <VCardPartner
    :items="[
      {
        icon: '/images/stripe.webp',
        text: 'Robust online payment processing capabilities.',
        color: '#F8F5FF',
      },
      {
        icon: '/images/dwolla.webp',
        text: 'Specializing in innovative bank transfers.',
        color: '#FFF1F1',
      },
    ]"
  />
</template>

Robust online payment processing capabilities.

Specializing in innovative bank transfers.

VSectionCardPartner

The VSectionCardPartner component is designed to display a section with two columns: the left column renders a list of partner items (VCardPartner), and the right column displays customizable content like a title and text. The layout is managed using the VSectionTwoCol component. It also supports mobile responsiveness with an option to reverse the layout on mobile devices.

Props

Prop Name	Type	Required	Description
`items`	`Array<ICardPartner[]>`	Yes	An array of partner items to be displayed in the left column. Each item should contain a `color`, `icon`, and `text`.
`rightTitle`	`String`	No	The title for the right column.
`rightText`	`String`	No	The text content for the right column.
`mobileReverse`	`Boolean`	No	Whether to reverse the columns on mobile devices. Defaults to `true`.

Example

vue

<VSectionCardPartner
  :items="[
    {
      icon: '/images/stripe.webp',
      text: 'Robust online payment processing capabilities.',
      color: '#F8F5FF',
    },
    {
      icon: '/images/dwolla.webp',
      text: 'Specializing in innovative bank transfers.',
      color: '#FFF1F1',
    },
  ]"
  rightTitle="Additional Information"
  rightText="Learn more about our partners."
/>

Robust online payment processing capabilities.

Specializing in innovative bank transfers.

Additional Information

Learn more about our partners.