fidzu : web

1. Define your component schema

Every component needs a YAML file. This is the contract your backend must follow. Keep your properties simple and predictable.

name: Article Card
description: A strict component for displaying article summaries.
props:
  type: object
  required:
    - title
    - url
  properties:
    title:
      type: string
      title: Article Title
    url:
      type: string
      title: Target Link
    summary:
      type: string
      title: Teaser Text

2. Format the render array

Backend engineers usually try to pass the entire node object. Do not do that. Extract the exact strings your schema demands. Set the render array type to component so Drupal knows how to route it.

$build['article_card'] = [
  '#type' => 'component',
  '#component' => 'my_theme:article_card',
  '#props' => [
    'title' => $node->getTitle(),
    'url' => $node->toUrl()->toString(),
    'summary' => $node->get('field_summary')->value,
  ],
];

3. Render the component

Your Twig file is now incredibly clean. It only prints exactly what the backend provided. No complex logic. No processing overhead.

<div class="article-card">
  <h2><a href="{{ url }}">{{ title }}</a></h2>
  <p>{{ summary }}</p>
</div>

Notice how we completely avoid preprocess functions here. The template simply accepts the data contract and renders the output.