Centered Category Tile Grid CTA Block for React

Edit CATEGORIES at the top of the file: each category has a name, a count, an href and the shapes of its wireframe. The total in the sentence is TOTAL, the sum of the counts, so it stays true when you edit them, and each tile's count is read from the same list. Keep the number of categories a multiple of eight, four or two so the last row of the band is full. Point each href at that category's page.

Each thumbnail is a small SVG in a drawing 80 wide and 60 high, filled from a list of rectangles (x, y, w, h and a tone). The tones are all foreground at three strengths (soft, mid and accent), so they follow every preset and both colour modes and leave the primary colour to the one button. The accent shape strengthens when you hover or focus the tile. To add a category, sketch it on that grid and list its rectangles; no image files are needed.

Each tile is one link, named by its category and count (such as "Dashboards 42 templates"). The thumbnail is decoration and is hidden from screen readers. The tiles are a list, so a screen reader announces how many there are. They take the keyboard in order and show the theme's focus ring inside the cell, and the cell tints on hover.

The tiles sit in two columns below the sm breakpoint, so eight tiles make four rows under the headline, and every thumbnail keeps its 4 to 3 shape through our AspectRatio. The Shine Button is above the band, so it is on the first screen. Names and counts wrap inside their tile, so nothing scrolls sideways down to 320 px.

Yes. The grid fills from the end side, and the labels and counts follow the reading direction. The wireframes are drawings of finished pages and are not mirrored, and the counts keep their digits together.

It's a link (href="#") that goes to the full gallery. The button renders the link it's given with render, with nativeButton={false}.