shadcn.io is not affiliated with official shadcn/ui
Large Figures About Block for Svelte
Four huge figures for a beekeeping marketplace in a two by two grid with one word under each and nothing else, split by a cross of two hairlines with plus marks.
Installation
Overview
A section of four large figures for Svelte with Ark UI, written for Hivecount, a fictional marketplace for small beekeepers. A centred header, then the figures two by two at display size (text-7xl on wide screens, text-5xl on a phone), each with one word under it and nothing else. Two hairlines cross between the cells: a rule from rail to rail and a line down the middle, with a + mark where they meet and on the rails, so the grid reads as a drafting cross. Each figure rolls up once on view and holds its final width, and the block ends on the figures. It's built from Guides and Sliding Number, with CSS transitions for the entrance and your theme's tokens for every colour. For about pages, launch posts and any page where four numbers are the whole message. The figures are example data.
FAQ
How do I change the figures?
They are FIGURES at the top of the file: a value, optional decimals and suffix (the "k" beside "9.8k") and one word. Keep four so the cross has a cell in each quarter. All the figures are example data: replace the arrays at the top of the file with your own.
Does the figure count up?
Each figure is a SlidingNumber with trigger="view": it holds its final width in zeros until the block scrolls into view, then rolls up once. With reduced motion the digits still arrive at their final values, without the roll, and the screen-reader text is always the final number.
How is the cross drawn?
The vertical line and the rule are absolute layers over the grid, and the plus marks come from Guides placed on zero-size boxes at the right spots, so they use the same marks as every other block. They are hidden from assistive technology.
How is it read by a screen reader?
A description list: the word is the term and the figure is its description, so it reads "Beekeepers, 3,120". The word is first in the DOM and drawn under the figure.