Move GridCard icon to an opaque 32px stamp on the tag row - #5159
Draft
Duncanma wants to merge 1 commit into
Draft
Conversation
Grows the SDK/language icon from 22px to 32px and relocates it out of the card header (where it competed with title wrapping) down next to the tags, so it reads as a stamp rather than a header ornament. Applies uniformly to every GridCard consumer (AI Cookbook, IntegrationsGrid, GuidesGrid, GridCardList) rather than a cookbook-only variant, per design review of the four icon-treatment options in the mockup.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📖 Docs PR preview linksThis PR does not change any pages in /docs. If you make updates, links to the modified pages will appear here. |
Contributor
There was a problem hiding this comment.
Pull request overview
Moves shared GridCard SDK icons into a footer beside tags, improving title space across all card consumers.
Changes:
- Relocates icons from the header to a conditional card footer.
- Enlarges icons from 22px to 32px.
- Preserves wrapping tags while pinning icons to the right.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
src/components/elements/GridCard/GridCard.tsx |
Adds footer markup for tags and icons. |
src/components/elements/GridCard/GridCard.module.css |
Styles the footer layout and larger icon. |
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
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
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.
Summary
Implements "Option D" from the AI Cookbook card icon review: the SDK/language icon grows from 22px to 32px, loses its header spot next to the title, and moves down to sit opaque on the same row as the tag pills — reading like a stamp rather than a header ornament.
GridCardlevel (not a cookbook-only variant), so every consumer stays visually consistent: AI Cookbook (/ai,/ai/cookbook),IntegrationsGrid(/integrations+ the 5 per-SDK/develop/*/integrationspages),GuidesGrid(/guides), andGridCardList(Code Exchange block on/ai)..cardFooterwraps the tag pills (which can still wrap to multiple lines) and the icon (flex-shrink: 0, pinned to the right), so layout holds up with zero tags, many tags, or no icon.Test plan
/ai,/ai/cookbook,/integrations,/guidesyarn buildpasses (also ran automatically via pre-commit hook)🤖 Generated with Claude Code