Text Components

Three embedded components – accordions, callouts and cards are available out of the box.

We can embed non-standard features into our markdown with the power of MDX.

Using Embedded Components

You can see and add an Embed from the rich-text editor toolbar.

Figure: Access the embed tab of the toolbar.

Cards

Cards can be used to showcase information or as links.

They highlight on hover based on the theme.

Accordions

Collapsible content areas.

This is ideal for FAQs, advanced explanations, or progressive disclosure UI patterns.

Multi-accordion

You can block all of your accordions with the option to have them as full-width or half-width.

Click to expand

Default Text. Edit me!

---

Click to expand

Default Text. Edit me!

Individual Accordion

Accordions can also exist standalone.

Click to expand

Default Text. Edit me!

Callouts

Callouts are similar to block-quotes, to add a note or indication outside the normal content flow.

Multiple variants exist to convey different messaging.

Some callouts indicate potential issues to users.

Some callouts indicate existing issues, or negative examples.

Some are just for a note or tip.

Security related callouts exist too 👮.

…or some other specific options!