Component structure

Component file structure

A component in Webhaven can consist of multiple files. Some are required and others are optional.

Let's get to know each file so you have a deeper understanding on how components work.

/[my-component]
|
|- README.md
|- [my-component].twig
|- [my-component].component.yml
|- [my-component].scss
|- _[my-component].js

Component specific files

README.md Documents what the component does, its props, slots, and any usage notes.

[my-component].twig The markup template for your component. This file is included in Drupal's .html.twig templates to render the component.

[my-component].component.yml Defines the component configuration: its name, description, props, slots, and other metadata.

[my-component].scss The Sass file for your component. Running npm run watch or npm run build will compile it to CSS automatically.

_[my-component].js The JavaScript file for your component. Running npm run watch or npm run build will bundle and minify it automatically. The leading underscore is required, the output file will not have it.

Webhaven components

Webhaven comes with a lot of components out of the box. When you create your own custom theme they are automatically copied over.