[Sistent] Add Card component to the sistent components page

[abhay1999]

Description

This PR adds the MDX documentation pages for the Card component 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 examples
• guidance.mdx — When to use cards, content structure best practices, visual hierarchy guidance, interactivity rules, and accessibility notes
• code.mdx — Runnable code examples: basic card, outlined variant, elevation, square corners, clickable card, and a card with header + action buttons

The structure and formatting follows the existing pattern used by Button and Paper.

Checklist

• Follows the existing 3-file MDX structure (index, guidance, code)
• Frontmatter includes name, title, published, component, and description
• DCO sign-off included in commit
• Live component examples use ThemeWrapper and CodeBlock as in other components

Signed-off-by: Abhay Chaurasiya abhaychaurasiya19@gmail.com

[l5io]

🚀 Preview for commit 4748878 at: https://69cf6c7405c70d5f108130dc--layer5.netlify.app

[rishiraj38]

Add them to the this file for navigation.

[abhay1999]

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!

[l5io]

🚀 Preview for commit 2281c7f at: https://69cfc62ce4c16a61ffaa7a35--layer5.netlify.app

[rishiraj38]

No! Please place it above the chip component, not in the correct navigation location.

[saurabhraghuvanshii]

@abhay1999 Please address @rishiraj38 suggestion.

[saurabhraghuvanshii]

@abhay1999 wrong Place.

[Rajesh-Nagarajan-11]

What? We’re still using static URLs, @rishiraj38? The main goal of the MDX migration is to eliminate static URLs.

[Rajesh-Nagarajan-11]

This is my mistake i missed to review your PR carefully, disappointing @rishiraj38 😕

[arjunmehta-git]

Nice addition, @abhay1999. The three-file MDX structure (overview / guidance / code) following the same pattern as Button and Paper is exactly right, and the code examples using ThemeWrapper and CodeBlock are consistent with the rest of the Sistent docs.

One coordination note: #7587 is simultaneously refactoring the Sistent pagination to remove content.js entirely in favor of dynamic GraphQL routing. If #7587 merges first, the content.js entries added in this PR become irrelevant (and vice versa — if this merges first, those entries may need to be removed to keep the file clean). Please coordinate with @rishiraj38 to sequence these two PRs correctly, or confirm that the Card MDX pages will be automatically discovered by the new dynamic routing without any content.js entry.

Once that coordination is sorted and the changes-requested items from the earlier review cycle are confirmed resolved, this is ready to go.

[abhay1999]

Thanks @arjunmehta-git for the detailed review!

Regarding the coordination with #7587 — I checked the PR and the Card MDX files should work fine with the new dynamic GraphQL routing. The index.mdx already has published: true in its frontmatter, so it will be auto-discovered and alphabetically sorted by componentSlug without any content.js entry needed.

So either way works:

• If feat(sistent): refactor pagination to use dynamic GraphQL routing and remove content.js #7587 merges first, the Card pages get picked up automatically — no action needed on my end
• If this PR merges first, the content.js entries can be cleaned up when feat(sistent): refactor pagination to use dynamic GraphQL routing and remove content.js #7587 lands

Happy to remove the content.js entries from this PR now if that makes sequencing cleaner. Just let me know @rishiraj38!