shadcn.io is not affiliated with official shadcn/ui
Globe Pins Awards Block for React
A drawn orthographic globe with six numbered pins beside an ordered list of awards by country; choosing a row marks its pin and names it under the globe.
Installation
Overview
A globe of awards for React with Base UI. A split behind a solid divider: at the start a title, a sentence, a tally counted from the list ("6 awards in 6 countries since 2022") and an ordered list of six awards, one per country, each row a number, the award and its programme, country and year. At the end a framed figure with a drawn orthographic globe: a disc with meridians and parallels as hairlines, computed from latitude and longitude, and six numbered pins. Focusing or choosing a row marks its pin with a solid fill and a ring and tints the row, and a caption under the globe names the country in words. The globe does not spin and there is no map library. On a phone the globe sits under the header at 220 px, above the list. The programmes and awards are made up for the example: replace AWARDS and its latitudes and longitudes with your own.
FAQ
How do I add or move a pin?
Edit AWARDS: each entry has a country, a lat and a lon in degrees, a programme, a title and a fixed year. The pin's place on the globe, its number and the header tally are all derived from that list. A place on the far side of the globe is not drawn, so move CENTRE if a pin disappears.
How is the globe drawn?
As inline SVG: a disc, meridians and parallels every 30 degrees traced point by point through an orthographic projection at the top of the file, and pins as plain elements placed by percentage. There are no images, tiles or libraries.
How do the rows work from the keyboard?
Each row title is a real button, so Tab walks the list; focusing a row marks its pin, and Enter or Space (or a tap) does the same. The pressed row is announced with its pin number and country.
Is the globe the only way to read the awards?
No. The globe is a drawing hidden from assistive technology; every award, country and year is in the list, and the caption under the globe repeats which pin is marked.
Related
- Pro
Tile Map Awards
Filters and searchA tile map of fifteen countries as two-letter squares; the nine with awards are one toggle group, and choosing one fills a panel with its awards.
- Pro
Regional Tabs Awards
Filters and searchUnderline tabs by region with a count on each, a local office line and two columns of local awards with a drawn mark, the programme, the country code and the year.
- Pro
Industry Coverage Matrix Awards
Lists and tablesA centred header and a table of six industries by four kinds of award, each cell a solid dot with its year or a hollow one, with counts per row and per column.
- 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
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
Raised Card Showcase Awards
Cards and gridsThree awards on one raised card for a storefront platform, each row a drawn mark, the award, its programme, a one-line reason and the year, with a centred header and a Shine Button to all awards.