shadcn.io is not affiliated with official shadcn/ui
Two Column About Block for Vue
A freight forwarder's story in two columns on a solid divider: prose at the start, and six figures at the end as a description list with numbers that roll up once on view, one ruled row each.
Installation
Overview
A company description for Vue with Ark UI, written for Wharfline, a fictional freight forwarder. A split on a solid divider: at the start, a heading and three paragraphs of prose with a bold opening line; at the end, six figures as a description list (ports served, containers a week, customs cleared on first filing, carriers, offices, median time to a quote), each in a row of its own with a label, a detail line and a large number, ruled from the divider to the rail with + marks. The numbers are Sliding Number: they roll up from zero once the list scrolls into view, and with reduced motion they are simply there. On a wide screen the six rows share the column's height; on a phone the figures follow the prose under a rule. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides and Sliding Number, with a CSS entrance and your theme's tokens for every colour. For about pages that pair a short story with the numbers behind it. The figures are example data.
FAQ
How do I change the figures?
Edit METRICS at the top of the file: each has a label, a detail, a value (a number, rolled by Sliding Number) and an optional suffix such as "%" or " min". The rows divide the column's height evenly on wide screens, so six rows fill a column of about that height; with fewer or more, change lg:grid-rows-6 to match.
How does the number roll, and is it read correctly?
Sliding Number shows zeros until it scrolls into view, then rolls each digit to its place once. It writes the final value as visually hidden text next to the rolling digits, so a screen reader hears "18,400" and never the zeros or the digits in between. A number with a suffix is wrapped in a bdi element, so a unit stays attached to it in a right-to-left layout.
How is the list read by a screen reader?
It is one description list: each label is a term with two descriptions, the number and the detail, so it reads "Ports served, 140, across 38 countries". The heading is the section's h2 and the prose are plain paragraphs. The rules between the rows are drawn by a decorative layer hidden from assistive technology.