Checkmarked

VCardCheckmarked Component

Description

The VCardCheckmarked component displays a card or list-style layout with a checkmark icon, title, description, and an optional tooltip. It supports light and dark themes, customizable icons, and can optionally act as a card or a simple list item.

Props

Name	Type	Default	Required	Description
`title`	`String`	`''`	`true`	The title text displayed in the component.
`description`	`String`	`''`	`false`	A brief description displayed under the title.
`darkMode`	`Boolean`	`false`	`false`	Enables dark mode styling.
`icon`	`'hollow' \| 'darkbg'`	`null`	`false`	Determines the icon style: hollow or dark background.
`card`	`Boolean`	`false`	`false`	Enables card styling with borders and background.
`tooltip`	`String`	`''`	`false`	Optional tooltip text displayed when hovering over the title section.

Slots

Used for the content inside the VTooltip component when the tooltip prop is enabled.

Slot Name	Description
`content`	Slot for rendering custom HTML content inside the tooltip.

Example Usage

Basic

vue


<script setup lang="ts">
import VCardCheckmarked from 'UiKit/components/VCard/VCardCheckmarked.vue';
</script>
<template>
  <VCardCheckmarked
    title="Task Completed"
    description="This task was successfully completed."
    icon="hollow"
    card
  />
</template>

Result

This task was successfully completed.

Not card

vue


<script setup lang="ts">
import VCardCheckmarked from 'UiKit/components/VCard/VCardCheckmarked.vue';
</script>
<template>
  <VCardCheckmarked
    title="Task Completed"
    description="This task was successfully completed."
    icon="hollow"
  />
</template>

Result

This task was successfully completed.

Icon darkbg

vue


<script setup lang="ts">
import VCardCheckmarked from 'UiKit/components/VCard/VCardCheckmarked.vue';
</script>
<template>
  <VCardCheckmarked
    title="Task Completed"
    description="This task was successfully completed."
    icon="darkbg"
  />
</template>

Result

This task was successfully completed.

Darkmode

vue


<script setup lang="ts">
import VCardCheckmarked from 'UiKit/components/VCard/VCardCheckmarked.vue';
</script>
<template>
<div style="padding: 40px; background-color: black;">
  <VCardCheckmarked
    title="Task Completed"
    description="This task was successfully completed."
    dark-mode
  />
</div>
</template>

Result

This task was successfully completed.

vue


<script setup lang="ts">
import VCardCheckmarked from 'UiKit/components/VCard/VCardCheckmarked.vue';
</script>
<template>
<div style="padding: 40px; background-color: black;">
  <VCardCheckmarked
    title="Task Completed"
    description="This task was successfully completed."
    tooltip="Some tooltip text"
  />
</div>
</template>

Result

This task was successfully completed.

VSectionCardCheckmarkedGrid

Overview

The VSectionCardCheckmarkedGrid component is a versatile grid layout component designed for presenting content in two, three, or five-column layouts. It is customizable and works seamlessly with the VCardCheckmarked and VSection components to display structured data.

Features

Dynamic Layouts: Supports two, three, or five-column layouts based on the number of items in the data prop.
Integrated Design: Combines the VSection component for consistent section styling.
Customizable Slots: Includes slots for additional content like infoShort.

Props

The component accepts the following props:

Prop Name	Type	Default	Required	Description
`data`	`Array`	`undefined`	Yes	Array of objects containing the title and description for each card.
`title`	`String`	`undefined`	No	Title of the section.
`subtitle`	`String`	`undefined`	No	Subtitle of the section.
`linkHref`	`String`	`undefined`	No	URL for the section's call-to-action link.
`linkText`	`String`	`undefined`	No	Text for the call-to-action link.

data Object Structure

The data array should follow this structure:

interface ICardCheckmarkedGrid {
  title: string;      // The title of the card
  description: string; // The description of the card
}

Slots

infoShort: Slot for adding additional short information to the section header.

Example Usage

Two-Column Layout

vue

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

const data = [
  { title: 'Feature 1', description: 'Description for feature 1' },
  { title: 'Feature 2', description: 'Description for feature 2' }
];
</script>

<template>
  <VSectionCardCheckmarkedGrid
    :data="data"
    title="Our Features"
    subtitle="Discover what we offer"
    linkHref="/features"
    linkText="Explore More"
  />
</template>

Result:

Our Features

Discover what we offer

Description for feature 1

Description for feature 2

Five-Column Layout

vue

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

const data = [
  { title: 'Feature 1', description: 'Description for feature 1' },
  { title: 'Feature 2', description: 'Description for feature 2' },
  { title: 'Feature 3', description: 'Description for feature 3' },
  { title: 'Feature 4', description: 'Description for feature 4' },
  { title: 'Feature 5', description: 'Description for feature 5' }
];
</script>

<template>
  <VSectionCardCheckmarkedGrid
    :data="data"
    title="Our Features"
    subtitle="Discover what we offer"
    linkHref="/features"
    linkText="Explore More"
  >
    <template #infoShort>
      Short introductory text about the features.
    </template>
  </VSectionCardCheckmarkedGrid>
</template>

Result:

Short introductory text about the features.

Description for feature 1

Description for feature 2

Description for feature 3

Description for feature 4

Description for feature 5

VSectionCardCheckmarkedGridSubtitle

The VSectionCardCheckmarkedGridSubtitle component is a sectioned layout designed to display two groups of checkmarked cards, one for investors and one for administrators. It utilizes the VSection component for the section layout and the VCardCheckmarked component to display each item with a title and description.

Props

Prop Name	Type	Required	Description
`functionsLeft`	`ICardCheckmarked[]`	Yes	An array of objects representing functions for investors. Each object contains `title` and `description`.
`functionsRight`	`ICardCheckmarked[]`	Yes	An array of objects representing functions for administrators. Each object contains `title` and `description`.
`title`	`String`	No	The title of the section.
`subtitleLeft`	`String`	No	The title of the left subtitle.
`subtitleRight`	`String`	No	The title of the right subtitle.

Slots

infoShort (optional) - A named slot that can be used to display additional information at the top of the section, just before the checkmarked cards.

Usage Example

vue

<VSectionCardCheckmarkedGridSubtitle
  :functionsLeft="investorFunctions"
  :functionsRight="administratorFunctions"
  title="Platform Features"
  subtitleLeft="Left title"
  subtitleRight="Right title"
/>

Result:

Platform Features

Left title

Access and view detailed financial reports.

Monitor the performance of your investments.

Right title

Add and remove platform users.

Create custom reports for your business.

VSectionCardCheckmarkedList

The VSectionCardCheckmarkedList component displays a two-column layout, where the left side can include a title, subtitle, text, and a link, while the right side renders a list of checkmarked cards (VCardCheckmarked). It uses the VSectionTwoCol component for layout management.

Props

Prop Name	Type	Required	Description
`title`	`String`	No	The title of the section.
`subtitle`	`String`	No	The subtitle of the section. Can include HTML content.
`text`	`String`	No	Additional text content for the section. Can include HTML content.
`linkText`	`String`	No	The text for the link, displayed if `linkUrl` is provided.
`linkUrl`	`String`	No	The URL for the link, displayed if `linkText` is provided.
`items`	`Array<string[]>`	No	An array of strings to be used as titles for the checkmarked cards (`VCardCheckmarked`).

Slots

left - This slot allows you to customize the content in the left column. If the default structure for the left column does not meet your needs, you can provide custom content for this section.
right - This slot allows you to customize the content in the right column. If the default checkmarked card structure does not meet your needs, you can use this slot to provide custom content for the right column.

Example

vue

<VSectionCardCheckmarkedList
  :title="'Features of the Platform'"
  :subtitle="'Explore the benefits available to all users'"
  :text="'The platform offers a variety of tools and resources to help users achieve their goals.'"
  :linkText="'Learn More'"
  :linkUrl="'/features'"
  :items="['Feature 1', 'Feature 2', 'Feature 3']"
/>

Result:

Features of the Platform

Explore the benefits available to all users

The platform offers a variety of tools and resources to help users achieve their goals.