Components

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

#All Components

Components are very similar to some extensions that already come bundled, but key difference is they use a single generic extension to bind them to Blade components. We call this Component Binding.

To dive deeper check out the configuration at config/statamic/markdown.php, and the respective Blade view for each component to see what props are available to each component.

#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

#Creating Components

The Component Binding feature allows you to bind markdown container blocks to Blade components, just by changing a configuration file.

This enables you to create and render elements such as cards, banners, and graphs without needing to write a new CommonMark extension. It provides a consistent pattern for authors to use, whilst giving you full control of the logic and markup.

Lets 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([
    'title' => 'My banner block!',
])

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

Now you can use that component inside of 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"

If you want to pass in a string with quotes, you can use the single quote syntax instead. This is assumed HTMl so quotes are escaped.

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

Or pass in a single attribute:

:::banner outlined

#Slots

You can make your components even more flexible by using slots. You will need to add the slot name to the configuration, otherwise it will be ignored.

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

You can now use the slot inside of 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.