shadcn.io is not affiliated with official shadcn/ui
Zigzag Rows Awards Block for React
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 React with Base 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.
Related
- Pro
Year Rail Timeline Awards
TimelinesA vertical rail of awards by year for a planning tool, a node for each year on a solid hairline with its awards as rows, and the older years behind a View earlier years Collapsible.
- Pro
Featured Plaque Awards
One featured awardOne grand award for a payments platform: a large framed plaque with a laurel wreath and the year on a ribbon beside the heading, a description list of the facts and one sentence from the jury.
- Pro
Ceremony Scene Split Awards
One featured awardAn award told as a scene for a video-call app: a drawn ceremony stage with a lectern and an audience in a frame beside the award's name, a sentence and a description list ending with who accepted it.
- Pro
Details Awards
Cards and gridsThree award data sheets for a monitoring tool: a drawn mark and the award's name over a description list of result, programme, category, entries judged, announcement date and prize.
- Pro
Laurel Display Awards
Badges and sealsA band of five awards for a weather app, each a laurel wreath drawn in SVG around the award's title and year, with the programme, category and issuer in text and the lead award larger in the middle.
- Pro
Class Plaques Hall of Fame Awards
People and teamsA hall of fame of seven open-source contributors in three inducted classes, each an engraved plaque with an oval monogram medallion, a one-line contribution and its class year.