Skip to content

[Sistent] Add Card component documentation to Sistent components page #7450

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shteypandey28-hue wants to merge 4 commits into
base: master
Choose a base branch
from
Open

[Sistent] Add Card component documentation to Sistent components page #7450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
52c24be
[Sistent] Add Card component documentation
shteypandey28-hue Mar 4, 2026
af2971a
[Sistent] Fix Card guidance page alignment
shteypandey28-hue Mar 4, 2026
1b2d639
[Sistent] Fix Card navigation order in SistentNavigation
shteypandey28-hue Mar 6, 2026
2339ccf
[Sistent] Fix Card nav: clean formatting, correct order
shteypandey28-hue Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/components/SistentNavigation/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@ export const content = [
{ id: 35, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
{ id: 36, link: "/projects/sistent/components/button-group/code", text: "Button Group" },

{ id: 121, link: "/projects/sistent/components/card", text: "Card" },
{ id: 122, link: "/projects/sistent/components/card/guidance", text: "Card" },
{ id: 123, link: "/projects/sistent/components/card/code", text: "Card" },
Copy link
Contributor

@rishiraj38 rishiraj38 Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please update the IDs and, as @saurabhraghuvanshii suggested, only add relevant changes.

Copy link
Author

@shteypandey28-hue shteypandey28-hue Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done!

Copy link
Contributor

@rishiraj38 rishiraj38 Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please present at the upcoming website meeting on Monday.


{ id: 37, link: "/projects/sistent/components/chip", text: "Chip" },
{ id: 38, link: "/projects/sistent/components/chip/guidance", text: "Chip" },
{ id: 39, link: "/projects/sistent/components/chip/code", text: "Chip" },
Expand Down
241 changes: 241 additions & 0 deletions src/sections/Projects/Sistent/components/card/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
import React from "react";
import { navigate } from "gatsby";
import { useLocation } from "@reach/router";

import {
SistentThemeProvider,
Card,
CardHeader,
CardContent,
CardActions,
Button,
Typography,
} from "@sistent/sistent";
import { CodeBlock } from "../button/code-block";
import { SistentLayout } from "../../sistent-layout";

import TabButton from "../../../../../reusecore/Button";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";

const codes = [
`<SistentThemeProvider>
<Card sx={{ maxWidth: 345 }}>
<CardContent>
<Typography variant="h5" component="div">
Basic Card
</Typography>
<Typography variant="body2" color="text.secondary">
This is a simple card with only content inside it.
</Typography>
</CardContent>
</Card>
</SistentThemeProvider>`,
`<SistentThemeProvider>
<Card sx={{ maxWidth: 345 }}>
<CardHeader
title="Card Title"
subheader="Card Subheader"
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
This card includes a header with a title and subheader,
followed by descriptive body content.
</Typography>
</CardContent>
</Card>
</SistentThemeProvider>`,
`<SistentThemeProvider>
<Card sx={{ maxWidth: 345 }}>
<CardMedia
component="img"
height="140"
image="https://source.unsplash.com/random/345x140"
alt="Card media"
/>
<CardContent>
<Typography variant="h5" component="div">
Card with Media
</Typography>
<Typography variant="body2" color="text.secondary">
This card uses CardMedia to display an image at the top.
</Typography>
</CardContent>
</Card>
</SistentThemeProvider>`,
`<SistentThemeProvider>
<Card sx={{ maxWidth: 345 }}>
<CardContent>
<Typography variant="h5" component="div">
Card with Actions
</Typography>
<Typography variant="body2" color="text.secondary">
Cards can include action buttons at the bottom for user interaction.
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
<Button size="small">Share</Button>
</CardActions>
</Card>
</SistentThemeProvider>`,
];

const CardCode = () => {
const location = useLocation();
const { isDark } = useStyledDarkMode();

return (
<SistentLayout title="Card">
<div className="content">
<a id="Identity">
<h2>Card</h2>
</a>
<p>
The <code>Card</code> component is a surface that displays content and
actions on a single topic. Cards are composed of sub-components such
as <code>CardHeader</code>, <code>CardContent</code>,{" "}
<code>CardActions</code>, and <code>CardMedia</code>, which can be
combined to create a variety of layouts.
</p>
<div className="filterBtns">
<TabButton
className={
location.pathname === "/projects/sistent/components/card"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/card")}
title="Overview"
/>
<TabButton
className={
location.pathname === "/projects/sistent/components/card/guidance"
? "active"
: ""
}
onClick={() =>
navigate("/projects/sistent/components/card/guidance")
}
title="Guidance"
/>
<TabButton
className={
location.pathname === "/projects/sistent/components/card/code"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/card/code")}
title="Code"
/>
</div>
<div className="main-content">
<p>
The following examples demonstrate the different ways to use the{" "}
<code>Card</code> component and its sub-components.
</p>
<a id="Basic Card">
<h2>Basic Card</h2>
</a>
<p>
A minimal card with only <code>CardContent</code> displaying a title
and description.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Card sx={{ maxWidth: 345 }}>
<CardContent>
<Typography variant="h5" component="div">
Basic Card
</Typography>
<Typography variant="body2" color="text.secondary">
This is a simple card with only content inside it.
</Typography>
</CardContent>
</Card>
</SistentThemeProvider>
</div>
<CodeBlock name="card-basic" code={codes[0]} />
</div>
<a id="Card with Header and Content">
<h2>Card with Header and Content</h2>
</a>
<p>
Combining <code>CardHeader</code> and <code>CardContent</code> to
present a titled card with body text.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Card sx={{ maxWidth: 345 }}>
<CardHeader title="Card Title" subheader="Card Subheader" />
<CardContent>
<Typography variant="body2" color="text.secondary">
This card includes a header with a title and subheader,
followed by descriptive body content.
</Typography>
</CardContent>
</Card>
</SistentThemeProvider>
</div>
<CodeBlock name="card-header-content" code={codes[1]} />
</div>
<a id="Card with Media">
<h2>Card with Media</h2>
</a>
<p>
Use <code>CardMedia</code> to embed an image within the card.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Card sx={{ maxWidth: 345 }}>
<CardContent>
<Typography variant="h5" component="div">
Card with Media
</Typography>
<Typography variant="body2" color="text.secondary">
This card uses CardMedia to display an image at the top.
</Typography>
</CardContent>
</Card>
</SistentThemeProvider>
</div>
<CodeBlock name="card-media" code={codes[2]} />
</div>
<a id="Card with Actions">
<h2>Card with Actions</h2>
</a>
<p>
Use <code>CardActions</code> to place interactive buttons at the
bottom of the card.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Card sx={{ maxWidth: 345 }}>
<CardContent>
<Typography variant="h5" component="div">
Card with Actions
</Typography>
<Typography variant="body2" color="text.secondary">
Cards can include action buttons at the bottom for user
interaction.
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
<Button size="small">Share</Button>
</CardActions>
</Card>
</SistentThemeProvider>
</div>
<CodeBlock name="card-actions" code={codes[3]} />
</div>
</div>
</div>
</SistentLayout>
);
};

export default CardCode;
Loading