Write your First Fluid Component

create a ComponentCollection

create a Class in your extension eg. Classes/ComponentCollection.php:

Classes/ComponentCollection.php

<?php

declare(strict_types=1);

namespace Andersundsehr\DummyExtension;

use Symfony\Component\DependencyInjection\Attribute\Autoconfigure;
use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
use TYPO3Fluid\Fluid\Core\Component\AbstractComponentCollection;
use TYPO3Fluid\Fluid\View\TemplatePaths;

#[Autoconfigure(public: true)]
final class ComponentCollection extends AbstractComponentCollection
{
    public function getTemplatePaths(): TemplatePaths
    {
        $templatePaths = new TemplatePaths();
        $templatePaths->setTemplateRootPaths([
            ExtensionManagementUtility::extPath('dummy_extension', 'Components'),
        ]);
        return $templatePaths;
    }
}

create the Fluid Component

create a Fluid component in your extension eg. Components/Card/Card.html:

Components/Card/Card.html

<f:argument name="title" type="string" description="The title of the card" />
<f:argument name="text" type="string" description="The main text of the card" />
<f:argument name="link" type="string" description="Typolink parameter" />

<a href="{f:uri.typolink(parameter: link)}" class="card">
  <h1 class="card__title">{title}</h1>
  <p class="card__text">{text}</p>
  <span class="card__moreButton">more</span>
</a>

<f:asset.css identifier="card">
  .card {
    display: block;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
  }
  .card__title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
  .card__text {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .card__moreButton {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    text-decoration: none;
  }
</f:asset.css>

you now have created your first Fluid component

you can use this component in any Fluid template like this:

<html
  xmlns:de="http://typo3.org/ns/Andersundsehr/DummyExtension/ComponentCollection"
  data-namespace-typo3-fluid="true"
>

<de:card
  title="Yar Pirate Ipsum"
  text="Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters."
  link="https://www.andersundsehr.com"
/>

register the ComponentCollection as global Fluid namespace

in your ext_localconf.php file, register the ComponentCollection as global Fluid namespace:

Attention

this is optional for nomral usage. But required for EXT:storybook

ext_localconf.php
```
<?php

use Andersundsehr\DummyExtension\ComponentCollection;

# This is required so EXT:storybook can find the component collection
$GLOBALS['TYPO3_CONF_VARS']['SYS']['fluid']['namespaces']['de'][] = ComponentCollection::class;
```
Copied!