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 VCardFeatures from 'UiKit/components/VCard/VCardFeatures';
Example
Place the component in your template like this:
vue
<VCardFeatures
buttonText="Learn More"
href="https://example.com"
>
<h3>Feature Title</h3>
<p>Feature description goes here.</p>
</VCardFeatures>
Props
ts
defineProps({
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
<VCardFeatures
buttonText="View Details"
: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:
vue
<script setup lang="ts">
import VCardFeatures from 'UiKit/components/VCard/VCardFeatures';
</script>
<template>
<VCardFeatures
buttonText="Get Started"
href="https://example.com"
>
<h3>Feature Title</h3>
<p>This is a brief description of the feature.</p>
</VCardFeatures>
</template>
Examples
Additional usage
For creating a grid layout of feature cards, we provide a component named VSectionCardFeaturesGrid. This component serves as a wrapper for the VCardFeatures components, arranging them in a responsive grid layout. It is located at: ui-kit/src/components/VCard/VSectionCardFeaturesGrid.vue
Description
The VSectionCardFeaturesGrid
component combines a VSection container with a customizable grid layout for VCardFeatures items. It includes support for section titles, subtitles, a call-to-action button, and additional slot-based content.
Props
The VSectionCardFeaturesGrid
component accepts the following props:
Prop Name | Type | Default | Required | Description |
---|---|---|---|---|
title | String | undefined | No | Title of the section. |
subTitle | String | undefined | No | Subtitle of the section. |
items | IVCardFeatures[] | undefined | Yes | Array of feature card objects, each of which follows the IVCardFeatures interface. |
buttonHref | String | undefined | No | URL for the section's call-to-action button. |
buttonText | String | undefined | No | Text for the section's call-to-action button. |
Slots
The component supports the following slots:
infoShort
: Slot for inserting additional short-form information displayed above the grid.
Grid Structure
The feature cards are displayed in a three-column grid layout using the is--three-col-grid
class. The items prop is iterated to render each card as a VCardFeatures
component.
Example Usage
vue
<script setup lang="ts">
import VSectionCardFeaturesGrid from 'UiKit/components/VCard/VSectionCardFeaturesGrid.vue';
const featureItems = [
{ title: 'Feature One', url: '#' },
{ title: 'Feature Two', url: '#' },
{ title: 'Feature Three', url: '#' },
];
</script>
<template>
<VSectionCardFeaturesGrid
title="Our Features"
sub-title="Explore the benefits of using our platform"
:items="featureItems"
button-text="See All Features"
button-href="/all-features"
>
<template #infoShort>
<p>Quick overview of the features we offer.</p>
</template>
</VSectionCardFeaturesGrid>
</template>