Toplist

Display ranked list of items

npm run add Toplist

Use the Toplist component to display ranked lists of items, such as best-performing products, top-rated services, or trending content.

---
const items = [
    {
        img: {
            src: '/img/property.png',
            alt: 'Property',
            width: 100,
            height: 125
        },
        title: 'Toplist Component',
        subTitle: 'Set subtitles',
        meta: 'Last booked 2 minutes ago',
        text: 'Add description with <b>HTML</b> support.'
    },
    { ... }
    { ... }
]
---

<Toplist items={items} />

The Toplist component expects an items prop that describes each toplist item in the form of an objects. Each object must have the following properties:

• img: Sets an image for the item.
• title: Sets a title.
• text: Sets a short description.

An item object can also have the following optional properties:

• href: Adds a link for the item. If href is not set, the element will be rendered as a div. This behavior can be changed inside the component here.
• target: Sets the target for the link when the href property is used.
• subTitle: Sets a sub-title under the title property.
• meta: Sets additional information under the subTitle property.

Connection and Position Numbers

The component supports two different variants; connected and numbered toplists. Both options are enabled by default and can be disabled using the connected and showPosition props:

Ribbons

The items can be highlighted using ribbons. To set a ribbon, specify a ribbon object on your item with a text property:

---
const items = [
    {
        ...,
        ribbon: {
            text: 'On sale',
            theme: 'alert'
        }
    }, { ... }, { ... }
]
---

<Toplist items={items} />

Card Types

Toplist items extend the Card component, meaning you can use card-specific props with your item to change its appearance, such as secondary, or compact:

---
const items = [
    {
        ...,
        secondary: true,
    }, { ... }, { ... }
]
---

<Toplist items={items} />

API

type ToplistProps = {
    items: ({
        href?: string
        target?: '_self'
            | '_blank'
            | '_parent'
            | '_top'
            | '_unfencedTop'
        img: {
            src: string
            alt: string
            width: number
            height: number
            lazy?: boolean
        }
        title: string
        subTitle?: string
        meta?: string
        text: string
        ribbon?: ({
            text: string
        } & RibbonProps)
    } & CardProps)[]
    showPosition?: boolean
    connected?: boolean
    className?: string
}