SGUI / Development
Surface
Shared surface elevation, tone and spacing.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Shared surface elevation, tone and spacing.
Loading examples…
Loading examples…
Loading examples…
Course summary
Build a learning plan with clear next steps.
Shared surface elevation, tone and spacing.
Course summary
Build a learning plan with clear next steps.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Surface, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function SurfacePlaygroundExample() {
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">
<Surface variant={"outlined"} tone={"default"} padding={4}><Stack gap={2}><Typography variant="h5">{"Course summary"}</Typography><Typography>Build a learning plan with clear next steps.</Typography><Button>Explore course</Button></Stack></Surface>
</ThemeScope>
</>
);
}
The same props in independent density scopes.
Course summary
Build a learning plan with clear next steps.
Course summary
Build a learning plan with clear next steps.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Surface, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function SurfacePlaygroundDensitiesExample() {
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"><Surface variant={"outlined"} tone={"default"} padding={4}><Stack gap={2}><Typography variant="h5">{"Course summary"}</Typography><Typography>Build a learning plan with clear next steps.</Typography><Button>Explore course</Button></Stack></Surface></ThemeScope>
<ThemeScope density="comfortable"><Surface variant={"outlined"} tone={"default"} padding={4}><Stack gap={2}><Typography variant="h5">{"Course summary"}</Typography><Typography>Build a learning plan with clear next steps.</Typography><Button>Explore course</Button></Stack></Surface></ThemeScope>
</Stack>
</>
);
}
Flat
Outlined
Raised
'use client';
import { useState } from 'react';
import { Surface, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function SurfacePlaygroundCompositionExample() {
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 direction="row" responsive gap={3}><Surface variant="flat" padding={4}><Typography>Flat</Typography></Surface><Surface variant="outlined" padding={4}><Typography>Outlined</Typography></Surface><Surface variant="raised" padding={4}><Typography>Raised</Typography></Surface></Stack>
</>
);
}