Leadership foundations
Six modules · Self-paced
SGUI / Development
Card
Semantic cards with shared surfaces and padded content.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Semantic cards with shared surfaces and padded content.
Loading examples…
Loading examples…
Loading examples…
Leadership foundations
Six modules · Self-paced
Semantic cards with shared surfaces and padded content.
Leadership foundations
Six modules · Self-paced
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Card, CardContent, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function CardPlaygroundExample() {
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<ThemeScope density="comfortable">
<Card variant={"outlined"} tone={"default"}><CardContent><Stack gap={3}><Typography variant="h5">{"Leadership foundations"}</Typography><Typography>Six modules · Self-paced</Typography><Button>View course</Button></Stack></CardContent></Card>
</ThemeScope>
</>
);
}
The same props in independent density scopes.
Leadership foundations
Six modules · Self-paced
Leadership foundations
Six modules · Self-paced
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Card, CardContent, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function CardPlaygroundDensitiesExample() {
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<Stack gap={3}>
<ThemeScope density="compact"><Card variant={"outlined"} tone={"default"}><CardContent><Stack gap={3}><Typography variant="h5">{"Leadership foundations"}</Typography><Typography>Six modules · Self-paced</Typography><Button>View course</Button></Stack></CardContent></Card></ThemeScope>
<ThemeScope density="comfortable"><Card variant={"outlined"} tone={"default"}><CardContent><Stack gap={3}><Typography variant="h5">{"Leadership foundations"}</Typography><Typography>Six modules · Self-paced</Typography><Button>View course</Button></Stack></CardContent></Card></ThemeScope>
</Stack>
</>
);
}