Updated 14 days ago

Components#

Every component available in SpringBoard content pages. Use these when writing MDX content — they render consistently across the site.

Admonition#

Callout boxes for highlighting important information. Six types available.

Info

Use for general information that adds context.

Tip

Use for helpful suggestions and best practices.

Warning

Use for important cautions the reader should be aware of.

Danger

Use for critical warnings about actions that could cause harm.

Note

Use for supplementary information.

Success

Use for confirmation of completed actions.

MDX syntax#

<Admonition type="info" title="Your title">
  Content goes here.
</Admonition>

Available types: info, tip, warning, danger, note, success

Collapsible#

Expandable sections. Six variants with different colors.

Content hidden until the reader clicks. Good for supplementary detail.

Explains the reasoning behind a rule or recommendation.

Step-by-step instructions for verifying a requirement.

Shows a concrete example of a concept.

Cautionary detail that expands on a warning.

Helpful suggestion with more detail.

MDX syntax#

<Collapsible variant="why" title="WHY">
  Your content here.
</Collapsible>

Variants: info (default), why, how, example, warning, tip

Card and CardGrid#

Cards for organising related content. Use CardGrid for responsive layouts.

Simple card

Basic card with a title and description text.

Card with link

Cards can link to other pages. Click to navigate.

MDX syntax#

<CardGrid columns={2}>
  <Card title="Card title" href="/optional-link">
    Card content goes here.
  </Card>
</CardGrid>

ChecklistItem#

Interactive checkboxes that persist state in localStorage.

This is an unchecked item

Click any checkbox to toggle it

MDX syntax#

<ChecklistItem id="unique-id" label="Requirement text" />

The id must be unique across the entire site.

DecisionFlow#

Decision trees for guiding readers through choices.

Is this a quick prototype with no sensitive data?

YES→Use a No-Code tool

NO↓ Continue

Does it handle personal or protected data?

YES→Use a Pro Tool (Cursor, Claude Code)

MDX syntax#

<DecisionFlow>
  <DecisionStep
    question="Your question here?"
    yes="Answer if yes"
    no="Continue"
  />
  <DecisionStep
    question="Next question?"
    yes="Final answer"
    isLast
  />
</DecisionFlow>

StepCard#

Numbered steps for sequential instructions. Each card shows a step number, title, and description with an optional link.

Define the problem

Write a one-sentence description of what your tool should do and who it is for.

Choose your build path

Use the Intake classifier to determine whether this is a Green, Yellow, Orange, or Red build.

MDX syntax#

<StepCard number={1} title="Step title">
  Step description here.
</StepCard>
<StepCard number={2} title="Final step" href="/next-page" cta="Continue" isLast>
  Description with an optional call-to-action link.
</StepCard>

Props: number, title, children, href (optional), cta (optional), isLast (optional)

Code blocks#

Fenced code blocks with syntax highlighting powered by Shiki.

// Code blocks are syntax highlighted automatically
function greet(name) {
  return `Hello, ${name}!`;
}

# Python is supported too
def greet(name):
    return f"Hello, {name}!"

Tables#

Standard markdown tables render with Springpod styling.

Feature	Green	Yellow	Orange	Red
Security review	No	Basic	Full	Full + pen test
Data team sign-off	No	Maybe	Yes	Yes
Safeguarding check	No	No	If student-facing	Always

Blockquotes#

Blockquotes are styled with a teal left border and subtle background. Use them for callouts or attributions.

When to use what#

Need	Component
Highlight important info	Admonition
Hide supplementary detail	Collapsible
Organize related items	CardGrid + Card
Track requirements	ChecklistItem
Guide a decision	DecisionFlow
Show sequential steps	StepCard
Display data	Table

Composability

These components can be nested and combined. For example, put a ChecklistItem inside a Collapsible, or a DecisionFlow inside a Card. Experiment to find what works best for your content.

Was this page helpful?