An example component

For this example we'll dive deeper into a pirate-boat component.

Component structure

/pirate-boat
|
|- pirate-boat.twig
|- pirate-boat.component.yml
|- pirate-boat.scss

pirate-boat.twig

{% if name %}
{% set attributes = create_attribute() %}
<div{{ attributes.addClass('pirate-boat', class|default('')) }}>
  <h3 class="pirate-boat__name">{{ name }}</h3>
  {% if crew %}
    <p class="pirate-boat__crew">Crew: {{ crew }}</p>
  {% endif %}
  {% if description %}
    <p class="pirate-boat__description">{{ description }}</p>
  {% endif %}
</div>
{% endif %}

The pirate-boat.twig file renders the DOM structure for the component. Only the name prop is required, crew and description are optional and only rendered when provided.

pirate-boat.component.yml

$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
name: Pirate Boat
group: Cards
props:
  type: object
  required:
    - name
  properties:
    name:
      type: string
      title: Boat name
      examples:
        - The Black Pearl
    crew:
      type: integer
      title: Crew size
      examples:
        - 42
    description:
      type: string
      title: Description
      examples:
        - A fearsome vessel sailing the seven seas.
    class:
      type: string
      title: Additional CSS class

We define our component configuration here. The name prop is required, everything else is optional.

A component can have props and/or slots. If you want to learn more on props & slots we recommend reading the Drupal SDC documentation.

pirate-boat.scss

.pirate-boat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);

  &__name {
    font-size: var(--font-2xl);
  }

  &__crew {
    color: var(--color-muted);
  }
}

This example uses --color-muted, which is defined in your theme's variables file at src/scss/base/_variables.scss.

All other files are automatically generated when you run npm run watch or npm run build. In this case that means pirate-boat.css and pirate-boat.css.map are generated automatically.