Course basics
Host supplied course details and learning objectives.
SGUI / Development
CourseCardFrame
Course-card slots, widths and long content.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Course-card slots, widths and long content.
Loading examples…
Loading examples…
Loading examples…
Host supplied course details and learning objectives.
Host supplied course details and learning objectives.
'use client';
import { CourseCardFrame } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';
export default function CardFrameExample() {
return (
<>
<CourseCardFrame width={420} header={<Typography as="h3" variant="h5">{"Course basics"}</Typography>} body={<Typography>Host supplied course details and learning objectives.</Typography>} footer={<Link href="#main-content">Open course</Link>} />
</>
);
}
Host supplied course details and learning objectives.
'use client';
import { CourseCardFrame } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';
export default function LongFrameExample() {
return (
<>
<CourseCardFrame width={420} header={<Typography as="h3" variant="h5">{"A much longer course title that demonstrates wrapping and readable content"}</Typography>} body={<Typography>Host supplied course details and learning objectives.</Typography>} />
</>
);
}