Components

• Creating Components
• Attributes
• Slots
• Security
• All Components
  • Hint
  • Accordion
  • Cards

#Creating Components

The Component Binding feature lets you bind markdown container blocks to Blade components, just by editing a config file.

This lets you create and render elements like cards, banners, and graphs, without writing a new CommonMark extension. It gives authors a consistent pattern to use, while you keep full control of the logic and markup.

Let's create a simple banner component:

'components' => [
    'banner' => [
        'template' => 'components.banner.banner',
        'slots' => [],
    ],
]

When the component has been mapped, you can create your blade file:

@props([
    'heading' => 'My banner block!',
])

<div class="banner">
    <h2>{{ $heading }}</h2>
    @if ($slot)
        {{ $slot }}
    @endif
</div>

Now you can use that component in your markdown!

:::banner heading="Heading text"
The quick red fox jumped over the lazy dog.
:::/banner

#Attributes

You can pass attributes to components.

You should use this 99% of the time.

:::banner size="large"

To pass a string with quotes, use single quotes instead. This is assumed HTML, so quotes are escaped.

:::banner heading='The dog said "Woof"'

Or pass in a single attribute:

:::banner outlined

#Slots

Slots make your components even more flexible. Add the slot name to the configuration, or it will be ignored.

'banner' => [
    'template' => 'components.banner.banner',
    'slots' => ['footer'],
],

You can now use the slot in your banner block:

:::banner

:::slot.footer
This is my footer slot! You can write markdown
here just like you would anywhere else.
:::/slot

:::/banner

The footer slot will now return the rendered markdown:

@if ($footer)
    {{ $footer }}
@endif

#Security

We have a whole section on security. You can read about component security there.

#All Components

Components are similar to some bundled extensions, but the key difference is they use one generic extension to bind them to Blade components. We call this Component Binding.

To dive deeper, check the configuration at config/statamic/markdown.php, and each component's Blade view for its available props.

#Hint

You can use hints - also known as callouts, admonitions or tips - in your markdown. Choose from note, tip, important, caution, warning.

:::note
Your note content
:::

You can add a title to a hint by adding the title attribute.

:::note title="My note title"
Note content
:::

#Accordion

You can use a collapsible accordion in your markdown.

:::accordion title="Your accordion title"
Your accordion content
:::

#Cards

:::cardgroup

:::card title="Card title"
The quick brown fox jumped over the lazy dog.
:::/card

:::card title="Card title"
The quick brown fox jumped over the lazy dog.
:::/card

:::/cardgroup