[Sistent] Add Card component to the sistent components page

[rishiraj38]

Current Behavior

Layer5 and it's projects use Sistent library to enable easy component reusability among our various projects.
One such component is Card.

(https://playground.meshery.io/user/preferences)

Ideally, all sistent components are represented on https://layer5.io/projects/sistent/components, so a centralized usage and example documentation can be maintained. This will aid new developers to more quickly jump into contributing to the various projects.

The Card component currently needs this representation.

Desired Behavior

Proper documentation for Card component similar to Button component on https://layer5.io/projects/sistent/components.

The documentation should follow the new Sistent MDX documentation structure. This requires creating a new folder at src/collections/sistent/components/card/ with three distinct files:

• index.mdx : Explanation of the function that the component serves in context of its usage (Overview). This should also include usage and information for accompanying utility components:
  • CardActions
  • CardContent
  • CardHeader
  • CardMedia
• guidance.mdx : Stylistic guidelines and best practices to be followed while using the component in code.
• code.mdx : Code examples showing various usages using <ThemeWrapper> and <CodeBlock>.

Additionally, the component needs to be added to the Sistent side navigation by creating entries for all three tabs in src/components/SistentNavigation/content.js.

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 🎨 See Sistent Repository.
• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[Mani7527]

can i work on this??

[abhay1999]

Hi, I'd like to work on this! Could you please assign it to me?

Proposal

Scope: Add full MDX documentation for the Card component to layer5.io/projects/sistent/components, following the same three-file structure used by existing components like Button.

Files to create

src/collections/sistent/components/card/index.mdx — Overview

• What the Card component is and when to use it
• Props table for Card and all sub-components: CardActions, CardContent, CardHeader, CardMedia
• Accessibility notes (keyboard navigation, ARIA roles)
• Live usage example using <ThemeWrapper>

src/collections/sistent/components/card/guidance.mdx — Design guidelines

• When to use Card vs other container components
• Layout best practices (spacing, elevation, media placement)
• Do's and Don'ts with visual examples
• Responsive behaviour guidance

src/collections/sistent/components/card/code.mdx — Code examples

• Basic card (title + content)
• Card with header, media, actions
• Horizontal card layout
• Interactive/clickable card
• All examples using <ThemeWrapper> and <CodeBlock> consistent with existing components

Navigation entry

• Update src/components/SistentNavigation/content.js to add entries for all three tabs (Overview, Guidance, Code) under the Card component section

Reference

Will model the structure closely after the existing Button component docs to maintain consistency.

Let me know if there's anything specific you'd like me to prioritise or any style guide I should follow beyond what's in CONTRIBUTING.md.

[rishiraj38]

Thanks!