Make the use-case chooser a horizontal icon-tile grid#9
Merged
Conversation
The home-page chooser was a numbered vertical list of title + summary. Replace it with icon + title tiles spread horizontally, matching the icon treatment on the interior pages. The grid uses auto-fit with a min tile width, so added use cases wrap to new rows with no markup or CSS change. Each vertical names its representative icon via a chooserIcon front-matter field, resolved against flowIcons; tiles fall back gracefully when no icon is set. The chooser is sorted by the vertical's order field for a stable sequence. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Cloudflare Pages previewDeployed this PR to a live preview: https://feature-icon-use-case-choose.learnvcorg.pages.dev This deploy: https://09417968.learnvcorg.pages.dev Updated for commit faec6ac. |
Make the use-case tiles separate rounded cards with gaps and a postcard shadow instead of a seamless hairline-divided block, and grow the icons to fill them. Shorten the supply-chain tile label to "Supply Chain". Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Enlarge the chooser icons and titles, tighten the spacing above the chooser and between each icon and its title, and fix the icon viewBox whitespace. Give the icon area a fixed height so the titles share a baseline across tiles regardless of icon height. Redraw the education icon as a landscape diploma and the student-ID icon as an ID card. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Update the "Adding a vertical" steps to include the shortName tile label and the chooserIcon field that the home-page icon-tile chooser requires, so a new vertical gets a tile icon. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Replaces the home-page use-case chooser — previously a numbered vertical list of title + summary — with icon + title tiles spread horizontally, matching the icon treatment on the interior pages.
Expandable by design
The grid uses
repeat(auto-fit, minmax(...)), so adding a use case wraps to a new row with no markup or CSS change. Each vertical declares its representative icon via achooserIconfront-matter field (resolved againstflowIcons), and tiles fall back gracefully when none is set. The chooser is sorted by each vertical'sorderfield for a stable sequence.Files
src/index.njk— chooser markup → icon-tile grid, sorted byorder.src/assets/styles.css—.vertical-gridrestyled as an auto-fit icon-tile grid.src/verticals/*/index.njk— addedchooserIconto each of the three verticals.🤖 Generated with Claude Code