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>