Badge

VCardBadge Component

Description

The VCardBadge component is a card-based layout with a badge header. It is designed for displaying a badge along with a description or any associated text. The component is flexible and allows custom styling for the badge. Location: ui-kit/src/components/VCard/VCardBadge.vue

Props

Name	Type	Default	Description
`tagText`	`String`	`''`	Text displayed inside the badge.
`text`	`String`	`''`	Description or content text displayed inside the card body.
`classes`	`String`	`''`	Additional CSS classes for custom styling of the badge.

Please, take note, that in classes we use class to set background color and font color mostly.

Example Usage

vue

<script setup lang="ts">
import VCardBadge from 'UiKit/components/VCard/VCardBadge.vue';
</script>
<template>
  <VCardBadge
    tagText="New"
    text="This is a new feature that has been added to our system."
    classes="is--background-primary-light"
  />
</template>

Result:

New

This is a new feature that has been added to our system.

VCardBadgeList Component

Description

The VCardBadgeList component renders a list of VCardBadge components, providing a structured way to display multiple badge cards. It accepts an array of badge data and maps each item to an individual card.

Props

Name	Type	Default	Required	Description
`items`	`ICardBadge[]` (Object)	`[]`	`true`	An array of badge data objects to render.

`ICardBadge` Interface

The items prop expects objects that follow the ICardBadge interface:

Property	Type	Description
`tagText`	`String`	Text to display inside the badge.
`text`	`String`	Text to display in the body of the card.
`classes`	`String`	Additional CSS classes for custom styling of the badge.

Example Usage

vue

<script setup lang="ts">
import VCardBadgeList from 'UiKit/components/VCard/VCardBadgeList.vue';
</script>
<template>
  <VCardBadgeList
    :items="[
      { tagText: 'New', text: 'New feature available!', classes: 'is--background-primary-light' },
      { tagText: 'Update', text: 'Latest system update.', classes: 'is--background-secondary-light' },
      { tagText: 'Important', text: 'Critical bug fix applied.' },
    ]"
  />
</template>

Result:

New

New feature available!

Update

Latest system update.

Important

Critical bug fix applied.

VSectionCardBadgeList Component

Description

The VSectionCardBadgeList component combines a two-column layout with a list of badge cards. It uses the VSectionTwoCol layout component and integrates VCardBadgeList to display badge cards on the left side. The right column can display a title and text or accept a custom slot for additional content.

Props

Name	Type	Default	Required	Description
`items`	`ICardBadge[]` (Array)	`[]`	`false`	An array of badge data objects to render in the left column.
`rightTitle`	`String`	`''`	`false`	The title to display in the right column.
`rightText`	`String`	`''`	`false`	The text to display in the right column.
`mobileReverse`	`Boolean`	`true`	`false`	Determines if the layout should reverse columns on mobile devices.

`ICardBadge` Interface

The items prop accepts objects that adhere to the ICardBadge interface:

Property	Type	Description
`tagText`	`String`	Text to display inside the badge.
`text`	`String`	Text to display in the body of the card.
`classes`	`String`	Additional CSS classes for custom styling of the badge.

Slots

Name	Description
`infoShort`	Slot for providing short information at the top of the left column.
`left`	Slot for customizing the left column content. Default renders badge list.
`right`	Slot for customizing the right column content.

Slot Props

The left and right slots receive an object with the following property:

Property	Type	Description
`class`	`String`	Classes applied for styling the column.

Example Usage

vue

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

<template>
  <VSectionCardBadgeList
    :items="[
      { tagText: 'New', text: 'Exciting feature added!' },
      { tagText: 'Alert', text: 'Maintenance scheduled.' },
    ]"
    right-title="Learn More"
    right-text="Discover additional details about our features."
  >
    <template #infoShort>
      <p>Quick summary of the badges listed below:</p>
    </template>
  </VSectionCardBadgeList>
</template>

Result:

Quick summary of the badges listed below:

New

Exciting feature added!

Alert

Maintenance scheduled.

Learn More

Discover additional details about our features.

With not default right content:

vue

<template>
  <VSectionCardBadgeList
    :items="[
      { tagText: 'New', text: 'Exciting feature added!' },
      { tagText: 'Alert', text: 'Maintenance scheduled.' },
    ]"
  >
    <template #infoShort>
      <p>Quick summary of the badges listed below:</p>
    </template>
    <template #right>
      <div>
        <h2>Learn More</h2>
        <p>Contact us for more information!</p>
        <p>Contact us for more information!</p>
        <p>Contact us for more information!</p>
        <VButton>Text</VButton>
      </div>
    </template>
  </VSectionCardBadgeList>
</template>

Result:

Quick summary of the badges listed below:

New

Exciting feature added!

Alert

Maintenance scheduled.

Alert

Maintenance scheduled.

Learn More

VSectionCardBadgeListNumbered Component

Description

The VSectionCardBadgeListNumbered component combines a two-column layout with a numbered list of badge items. It utilizes the VSectionTwoCol layout component to create a responsive section and integrates VCardBadgeListNumbered to render a numbered list on the left side. The right column can display a title and text or custom content via a slot.

Props

Name	Type	Default	Required	Description
`items`	`string[]`	`[]`	`false`	An array of strings to display as a numbered list in the left column.
`rightTitle`	`String`	`''`	`false`	The title to display in the right column.
`rightText`	`String`	`''`	`false`	The text to display in the right column.
`mobileReverse`	`Boolean`	`true`	`false`	Determines if the layout should reverse columns on mobile devices.

Slots

Name	Description
`infoShort`	Slot for providing short information at the top of the left column.
`left`	Slot for customizing the left column content. Default renders the numbered list.
`right`	Slot for customizing the right column content.

Slot Props

The left and right slots receive an object with the following property:

Property	Type	Description
`class`	`String`	Classes applied for styling the column.

Example Usage

vue


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

<template>
  <VSectionCardBadgeListNumbered
    :items="['First item', 'Second item', 'Third item']"
    right-title="Learn More"
    right-text="Discover additional details about our features."
  />
</template>

Result:

First item

Second item

Third item

Learn More

Discover additional details about our features.