[Sistent] Add Card component to the sistent components page#7582
Open
abhay1999 wants to merge 3 commits intolayer5io:masterfrom
Open
[Sistent] Add Card component to the sistent components page#7582abhay1999 wants to merge 3 commits intolayer5io:masterfrom
abhay1999 wants to merge 3 commits intolayer5io:masterfrom
Conversation
Adds the three-file MDX documentation structure for the Card component under src/collections/sistent/components/card/, following the same pattern used by existing components like Button and Paper. - index.mdx: overview of card types (elevated, outlined), elevation levels, interactivity, and corner options - guidance.mdx: when to use cards, content structure best practices, hierarchy guidance, interactivity rules, and accessibility notes - code.mdx: runnable examples for basic card, outlined variant, elevation, square corners, clickable card, and card with header and actions Fixes layer5io#7543 Signed-off-by: Abhay Chaurasiya <abhaychaurasiya19@gmail.com> Signed-off-by: abhay1999 <abhaychaurasiya19@gmail.com>
The Card component was being used in the MDX examples without being imported, causing the Gatsby build to fail with "Expected component Card to be defined". Added the import from @sistent/sistent to all three files. Signed-off-by: Abhay Chaurasiya <abhaychaurasiya19@gmail.com> Signed-off-by: abhay1999 <abhaychaurasiya19@gmail.com>
Member
|
🚀 Preview for commit 4748878 at: https://69cf6c7405c70d5f108130dc--layer5.netlify.app |
rishiraj38
suggested changes
Apr 3, 2026
Member
rishiraj38
left a comment
rishiraj38
left a comment
There was a problem hiding this comment.
Add them to the this file for navigation.
Adds the three navigation entries for the Card component (overview, guidance, code) to content.js, addressing the review feedback on layer5io#7582. Signed-off-by: Abhay Chaurasiya <abhaychaurasiya19@gmail.com> Signed-off-by: abhay1999 <abhaychaurasiya19@gmail.com>
abhay1999
commented
Apr 3, 2026
Author
abhay1999
left a comment
abhay1999
left a comment
There was a problem hiding this comment.
Hey @rishiraj38, added the Card entries to content.js — overview, guidance, and code links are all in there now, placed alphabetically between Box and Button. Let me know if anything else needs fixing!
Member
|
🚀 Preview for commit 2281c7f at: https://69cfc62ce4c16a61ffaa7a35--layer5.netlify.app |
rishiraj38
reviewed
Apr 3, 2026
Member
rishiraj38
left a comment
rishiraj38
left a comment
There was a problem hiding this comment.
No! Please place it above the chip component, not in the correct navigation location.
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
3 participants
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.
Description
This PR adds the MDX documentation pages for the
Cardcomponent to the Sistent components section of layer5.io, closing #7543.The Card component is already part of the Sistent library (source) and is actively used across Meshery (e.g. user preferences page). These docs give it the same treatment as other components like Button and Paper.
Changes
Three files added under
src/collections/sistent/components/card/:index.mdx— Component overview: types (elevated vs outlined), elevation levels, interactivity, and corner options with live examplesguidance.mdx— When to use cards, content structure best practices, visual hierarchy guidance, interactivity rules, and accessibility notescode.mdx— Runnable code examples: basic card, outlined variant, elevation, square corners, clickable card, and a card with header + action buttonsThe structure and formatting follows the existing pattern used by Button and Paper.
Checklist
name,title,published,component, anddescriptionThemeWrapperandCodeBlockas in other componentsSigned-off-by: Abhay Chaurasiya abhaychaurasiya19@gmail.com