---
title: Text Components
last_edited: '2025-10-27T10:01:36.180Z'
auto_generated: false
---

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

<Callout
  body={<>
    We can embed non-standard features into our markdown with the power of [MDX](https://mdxjs.com/).
  </>}
  variant="idea"
/>

## Using Embedded Components

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

![](/img/docs-assets/embed-toolbar-access.png "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.

<cardGrid
  cards={[
    {
      title: "Pine",
      description: "Linked card.",
      link: "https://www.google.com",
      linkText: "Search now"
    },
    {
      title: "Indigo",
      description: "This card doesn't link anywhere.",
      link: "",
      linkText: ""
    },
    { title: "Blossom", description: "🌸", link: "", linkText: "" },
    { title: "Lake", description: "🏞️", link: "", linkText: "Search now" }
  ]}
/>

## 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.

<accordionBlock
  fullWidth={true}
  accordionItems={[
    {
      heading: "Click to expand",
      docText: "Default Text. Edit me!\n",
      image: "/img/rico-replacement.jpg"
    },
    {
      heading: "Click to expand",
      docText: "Default Text. Edit me!\n",
      image: "/img/rico-replacement.jpg"
    }
  ]}
/>

### Individual Accordion

Accordions can also exist standalone.

<accordion
  heading="Click to expand"
  docText={<>
    Default Text. Edit me!
  </>}
  image="/img/rico-replacement.jpg"
  fullWidth={true}
/>

## Callouts

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

<Callout
  body={<>
    Multiple variants exist to convey different messaging.
  </>}
  variant="success"
/>

<Callout
  body={<>
    Some callouts indicate potential issues to users.
  </>}
  variant="warning"
/>

<Callout
  body={<>
    Some callouts indicate existing issues, or negative examples.
  </>}
  variant="error"
/>

<Callout
  body={<>
    Some are just for a note or tip.
  </>}
  variant="idea"
/>

<Callout
  body={<>
    Security related callouts exist too 👮.
  </>}
  variant="lock"
/>

<Callout
  body={<>
    …or some other specific options!
  </>}
  variant="api"
/>