---
title: Code components - Slots
---

Slots allow you to place other code components, or any other Drupal Canvas
provided component, inside your component.

![A form showing the Slots tab of the Component Data pane in Drupal's Experience
Builder. The form has an example showing slots named "Header" and "Button
Footer" with Example HTML/JSX values of a simple div element containing text](../../../assets/images/slots-1.webp)

```jsx
const Jumbotron = ({ header, buttonFooter }) => {
  return (
    <section>
      <div>{header}</div>
      <div>
        <button>
          <a href="#">CTA Button</a>
        </button>
        {buttonFooter}
      </div>
    </section>
  );
};

export default Jumbotron;
```

Like props, the slot names are camelCased when passed as a parameter to the
component code.

Once a slot has been added to a component, saved, and then added to a page; a
slot will become visible in which other components can now be added.

![Drupal's Drupal Canvas showing a component named Jumbotron in the Layers
panel, with 2 slots visible named "Header" and "Button Footer". Both slots are
also visible as an outline in the central page preview](../../../assets/images/slots-2.webp)

Components can now be added to the slot by dragging them in from the Library.
When a component is added to the slot, you will be able to configure its props
in the Settings panel which will appear on the right hand side.

![Drupal's Drupal Canvas showing the Layers panel which contains a
Jumbotron component and Hello component below it. The preview shows the
rendering of both components, and the Settings section shows a form where a name
can be entered for the Hello component.](../../../assets/images/slots-3.webp)
