Hex card, Conduction Design System

Hex card · the shared shell

Tinted academy panel with a top-left hex badge holding an icon. The shell behind <ContactCta />, <Outcomes />, and <Prerequisites />. Use directly when the three preset wrappers don't fit.

Default · icon + title + body

With actions · right-side CTA slot

Mount in MDX as <HexCard/>

The shared shell behind <ContactCta/>, <Outcomes/>, and <Prerequisites/>. Use those wrappers first; reach for <HexCard/> directly when you need the same surface for a one-off academy panel.

Import & example

import {HexCard} from '@conduction/docusaurus-preset/components'; <HexCard title="Wat je leert" icon="lightbulb"> <ul> <li>Hoe je het canonieke Woo-register importeert</li> <li>Welke API-aanroepen horen bij elke stap</li> </ul> </HexCard> <HexCard title="Wil je meer weten?" icon="mail" decoration actions={<a className="...">Mail ons →</a>} > <p>Mail ons. We helpen je in een halve dag op weg.</p> </HexCard>

Props

title string

icon "mail" | "lightbulb" | "clipboard"

iconNode custom SVG (overrides icon)

decoration boolean — right-edge hex motif

actions ReactNode — right-side slot

children ReactNode — body

as tag override (default aside)

className string