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

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

Feature Title

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>