🚧
Under Construction This component is a work-in-progress.
Card (Section)
Visually group related content. Intended to be used for sections within a page or form.
Current Status
- Has three main background styles: standard, transparent background, and color (predfined options + custom)
- Styling is rough
- Has an id so that it can be used for scroll navigation in future
Future
- Refactor for better dynamic styling options
- Test responsive design for all common device sizes
- Add darkmode support
- Standardize color design token
Examples
TBD
How to use
Create component
Copy the code from the sandbox above and paste it into a new file (e.g. Accordion.tsx)
Use it in your project
<CardSection id="exampleSection" style="standard">
// Child components go here
</CardSection>
Component API
| Required Prop | Type | Description |
|---|---|---|
| id | string | To allow for anchor links. Should be unique for each section. |
| Optional Prop | Type | Description |
|---|---|---|
| style? | | "standard" | "blank" | "colorBlue" | "colorRed" | "colorGreen" | "colorYellow" | "colorPurple" | "colorPink" | "colorBlack" | "colorCustom" | Sets the background style of the card. Default is "standard". |