shadcn.io is not affiliated with official shadcn/ui
Zigzag Rows Awards Block for Vue
Three awards in alternating rows for a trail-map app: a large drawn emblem in a framed square on one side and, on the other, the year as a big numeral, the award, its programme and a two-sentence citation.
Installation
Overview
Alternating award rows for Vue with Ark UI. After a start-aligned header, three rows share hairlines, each with a centre divider that carries a + mark where it meets the row's rule. A large emblem (a scalloped seal with a star, a crest with a peak, a ring with a compass star) stands in a framed square; beside it are the year as a big numeral, the award as the heading, its programme and a two-sentence citation. The emblem is at the start in the first row, at the end in the second and at the start again in the third. There is no timeline rail: each row stands alone. The block ends on the last row. It is built from Guides, inline SVG and your theme's tokens, with a CSS transition for the entrance. The awards and citations are made up for the example: replace them with your own.
FAQ
How does the alternation work without reordering the page?
Every row has the text first in the document, then the emblem. From lg, grid placement puts the emblem in the first column of odd rows and the second column of even rows (group-odd/row and group-even/row), so reading and tab order always go heading, programme, citation. On a phone the emblem sits above the text of its row.
How are the emblems made?
Each is a small Emblem object: faintly filled parts, stroke-only lines and solid parts in a 64 by 64 box. The seal and the compass star are computed from a few numbers (lobes, radii, points), rounded so the server and the browser agree. They are hidden from assistive technology.
How many rows can it have?
Three is the design: the block is about 1,200 pixels tall on a desktop. Add a fourth and it passes one and a half screens; the timeline blocks suit longer histories.
Are the citations real quotes?
No. They are written for the example, as are Eglantine and the Micamere programmes. Quote a jury only with its permission.