Card Features

Overview

The Card Features component in UiKit provides a flexible way to create feature cards with optional button interactions. It supports various element types through the tag prop and can include a customizable button with an icon.

Basic

To add the Card Features component, start by importing it into your Vue file:

import VCardFeatures from 'UiKit/components/Cards/VCardFeatures';

Example

Place the component in your template like this:

<VCardFeatures
    buttonText="Learn More"
    tag="a"
    href="https://example.com"
>
    <h3>Feature Title</h3>
    <p>Feature description goes here.</p>
</VCardFeatures>

Props

defineProps({
  tag: {
    type: String as PropType<'div' | 'a' | 'router-link'>,
    default: 'div',
  },
  buttonText: String,
  href: String,
  to: Object,
});

• tag: Defines the HTML element to render (div, a, or router-link). Default is div.
• buttonText: (Optional) The text for the button. If provided, a button will be displayed.
• href: (Optional) The URL string for external navigation. Used when the tag is a.
• to: (Optional) The Vue Router route object for internal navigation. Used when the tag is router-link.

Button Integration

If the buttonText prop is provided, a button will appear at the bottom of the card with the specified text and an icon. The button is styled as a link variant, making it suitable for various use cases.

<VCardFeatures
    buttonText="View Details"
    tag="router-link"
    :to="{ name: 'FeatureDetails' }"
>
    <h3>Feature Title</h3>
    <p>This feature allows you to...</p>
</VCardFeatures>

Complete Example

Here’s a complete example of a Card Features component that uses all available props:

<script setup lang="ts">
import VCardFeatures from 'UiKit/components/Cards/VCardFeatures';
</script>

<template>
  <VCardFeatures
      buttonText="Get Started"
      tag="a"
      href="https://example.com"
  >
      <h3>Feature Title</h3>
      <p>This is a brief description of the feature.</p>
  </VCardFeatures>
</template>

Examples