Skip to main content

InfoBlock

InfoBlock is used for structured factual content such as definitions, summaries, or reference information.

All Variants

<InfoBlock variant="info" title="What is this?">Explanation here.</InfoBlock>
<InfoBlock variant="success" title="Best Practice">Recommended approach.</InfoBlock>
<InfoBlock variant="warning" title="Caution">Important consideration.</InfoBlock>

What is this?

Explanation here.

Best Practice

Recommended approach.

Caution

Important consideration.

Props

PropTypeDefaultDescription
variantstringinfoLeft accent color
titlestringHeader title
iconReactNodeOptional icon in header
  • Callout — For tips and notes
  • Card — More general container