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:

vue
import BaseCardFeatures from 'UiKit/components/BaseCardFeatures/BaseCardFeatures.vue';
Example

Place the component in your template like this:

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

Props

ts
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.

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

Complete Example

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

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

<template>
  <BaseCardFeatures
      buttonText="Get Started"
      tag="a"
      href="https://example.com"
  >
      <h3>Feature Title</h3>
      <p>This is a brief description of the feature.</p>
  </BaseCardFeatures>
</template>
Help Ukraine to stop russian aggression