With number

VCardWithNumber

The VCardWithNumber component is a simple card design that displays an index (number or string) and associated text. This card can be used for scenarios where you want to highlight an index or ranking number alongside descriptive text, such as in a list or dashboard-style layout.

Props

Prop	Type	Description	Default
`index`	`String	Number`	The index or number to be displayed in the card.
`text`	`String`	The text content to be displayed in the card.	`null`

Example

vue

<VCardWithNumber
  index="1"
  text="This is the first item"
/>

This is the first item

VSectionCardWithNumber

The VSectionCardWithNumber component displays a section with a title, subtitle, and a list of numbered items. The component is built with two main sections: a left or right-aligned content area and a list of VCardWithNumber components, which display the items with numbers. This component is perfect for showcasing numbered lists or ordered content in a flexible layout.

Props

Prop	Type	Default	Description
`items`	`Array<string>`		An array of strings representing the items to display in the numbered list.
`position`	`'left'	'right'`	`'right'`
`title`	`String`		The title of the section.
`subtitle`	`String`		The subtitle of the section.
`linkText`	`String`		The text to be displayed for the link.
`linkHref`	`String`		The URL for the link.
`mobileReverse`	`Boolean`		If true, reverses the layout on mobile screens (swapping left and right).

Example

vue

<VSectionCardWithNumber
  :items="['Item 1', 'Item 2', 'Item 3']"
  position="left"
  title="Section Title"
  subtitle="This is a subtitle"
  linkText="Learn More"
  linkHref="/link"
  :mobileReverse="true"
/>

Item 1

Item 2

Item 3

Section Title

This is a subtitle

Learn More