Block · C-044 · storefront

RankedList

An ordered ranking with position, optional thumbnail, link, price and category. The top three are highlighted without relying on colour alone.

Install

Blocks compose Koten primitives; install koten-theme first.

npx shadcn@latest add https://koten.codehive.com.co/r/ranked-list.json

Anatomy

This block composes Koten primitives. Read the source files before changing it.

@/components/patterns/ranked-list.tsx
@/lib/koten/cn.ts
@/lib/koten/format.ts
@/lib/koten/intl.ts
@/lib/koten/labels.ts
@/lib/koten/provider.tsx

Accessibility

The real order lives in the <ol>; the painted number is aria-hidden and repeated inside the link with sr-only text.
Thumbnails are optional and always carry descriptive alt text; when they add nothing, leave them out.
Price and category are text, not an image or a background colour.

Read the whole page