Primary

Overview

The VCardPrimary component displays a primary card with a customizable header, body, and footer. It supports a variety of props and slots to manage its content, making it flexible for different use cases, such as displaying case studies or articles.

Props

Prop	Type	Description	Default
`data`	`ICardPrimary` (Object)	Contains the card's data including `type`, `imageType`, `bodyImg`, `title`, `subtitle`, `text`, and `url`.	Required
`descriptionWithHtml`	`Boolean`	If set to `true`, the `text` content will be rendered as HTML. If `false`, HTML tags will be stripped.	`false`
`ellipsis`	`Boolean`	If set to `true`, the text content will be truncated with an ellipsis if it's too long.	`false`

`ICardPrimary` Interface

The ICardPrimary interface defines the structure of the data prop.

Field	Type	Description	Default
`type`	`string`	The type of card (e.g., "Fintech", "Blockchain", etc.). Used for setting the icon and style.	`null`
`imageType`	`string`	The URL for a custom icon to be displayed next to the `type`.	`null`
`bodyImg`	`string`	The URL of an image to be displayed in the card's footer.	`null`
`title`	`string`	The title of the card.	`null`
`subtitle`	`string`	The subtitle of the card.	`null`
`text`	`string`	The body text of the card.	Required
`url`	`string`	The URL the card links to. If provided, the card becomes a link.	`null`

Slots

buttonText: Allows customization of the button text inside the footer.

Example

vue

<VCardPrimary
  :data="{
    type: 'Fintech',
    title: 'Exploring Fintech Innovations',
    subtitle: 'How new technologies are reshaping finance',
    text: 'Fintech has been disrupting traditional banking models. In this article, we explore key innovations...',
    url: '/use-cases/fintech'
  }"
/>

Fintech

Exploring Fintech Innovations

How new technologies are reshaping finance

Fintech has been disrupting traditional banking models. In this article, we explore key innovations...