---
title: "Twig Components Project"
description: "Derafu Twig Components"
type: "docs"
category: "doc"
tags: [php]
authors: [Anonymous]
date: "2026-10-20"
last_update: "2026-10-20"
time_minutes: 1
draft: false
unlisted: false
url: "https://www.derafu.dev/docs/ui/twig-components"
---

# Derafu Twig Components


---

## Introduction

37 UI components for Twig built with Bootstrap 5 and Font Awesome 6: headers, footers, cards, grids and more, for Symfony and for Derafu

# UI Components for Twig

[![GitHub](https://img.shields.io/badge/github-derafu%2Ftwig--components-blue?logo=github)](https://github.com/derafu/twig-components)
![GitHub last commit](https://img.shields.io/github/last-commit/derafu/twig-components/main)
![CI Workflow](https://github.com/derafu/twig-components/actions/workflows/ci.yml/badge.svg?branch=main&amp;event=push)
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/derafu/twig-components)
![GitHub Issues](https://img.shields.io/github/issues-raw/derafu/twig-components)
![Total Downloads](https://poser.pugx.org/derafu/twig-components/downloads)
![Monthly Downloads](https://poser.pugx.org/derafu/twig-components/d/monthly)

**Derafu Twig Components** is a collection of 37 UI components for Twig, for websites. They are [Symfony UX Twig Components](https://symfony.com/bundles/ux-twig-component/current/index.html), written with Bootstrap 5 and Font Awesome 6, and are used in a template with a tag:

{% verbatim %}
```twig
&lt;twig:block-alert type=&quot;info&quot; content=&quot;The components are tags of Twig.&quot; /&gt;
```
{% endverbatim %}

## Features

- 🧩 **37 block components**: headers, footers, cards, grids, features, tabs, timelines, galleries and more (see [Components](components)).
- 🅱️ **Bootstrap 5 and Font Awesome 6**: the components use the grid, the utilities and the JavaScript of Bootstrap, and the icons of Font Awesome (see [Styles](styles)).
- 🎛️ **Symfony 8 without a bundle**: three settings of your application register them (see [Symfony](symfony)).
- 🔌 **Derafu without Symfony**: [`derafu/twig`](https://www.derafu.dev/docs/ui/twig) registers them in a Twig environment of its own (see [Derafu](derafu)).
- 🛡️ **Strict mode of Twig**: the templates work with `strict_variables`; a key that an item does not have is not an error.
- 🌐 **Translated**: the texts of the components and their errors are written in English and have their Spanish translation (see [Translations](translations)).
- 🏷️ **MIT License**: open-source and free to use.

## Installation

```bash
composer require derafu/twig-components
```

It requires `symfony/ux-twig-component` and [`derafu/translation`](https://www.derafu.dev/docs/core/translation).

## Structure of a Component

Each component has three parts:

- **A PHP class** in `Derafu\TwigComponents\Component\Block`, with the options of the component as properties and its validations. It is marked with `#[AsTwigComponent(&#039;block-...&#039;)]`, and the name is the one of the tag.
- **A Twig template** in `resources/templates/components`, with the HTML.
- **A CSS file** in `resources/css/components`.

The options are the attributes of the tag. The ones that are not text (numbers, arrays) go with a colon before their name:

{% verbatim %}
```twig
&lt;twig:block-card-grid
    :cols=&quot;3&quot;
    :cards=&quot;[
        {title: &#039;First&#039;, content: &#039;Text of the first card.&#039;},
        {title: &#039;Second&#039;, content: &#039;Text of the second card.&#039;},
    ]&quot;
/&gt;
```
{% endverbatim %}

A value that is not valid for an option (a number of columns that does not exist, an item without its required text) is a translatable error that names the component and says what is wrong. See [Translations](translations).

## Where to Go Next

- [Components](components): every component, with examples.
- [Symfony](symfony): use them in a Symfony application.
- [Derafu](derafu): use them with `derafu/twig`.
- [Styles](styles): the CSS and what the page needs.
- [Translations](translations): the texts and the errors.
- [Development](development): see the components in a browser while you work on them.


---

## Components

Components

# Components

A collection of UI components for building easily web interfaces.


---

### Accordion

Collapsible content sections.

&lt;twig:block-accordion
    :items=&quot;[
        {
            title: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend. Fusce aliquet tempus gravida. Nam ullamcorper libero ac velit pharetra, in volutpat sem vulputate. Integer quis suscipit nibh, non tempor enim. Nulla ipsum leo, vulputate nec dolor nec, aliquet porttitor nibh. Donec maximus tellus vitae ornare dignissim. &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;Link&lt;/a&gt;&#039;,
        },
        {
            title: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend. Fusce aliquet tempus gravida. Nam ullamcorper libero ac velit pharetra, in volutpat sem vulputate. Integer quis suscipit nibh, non tempor enim. Nulla ipsum leo, vulputate nec dolor nec, aliquet porttitor nibh. Donec maximus tellus vitae ornare dignissim.&#039;,
        }
    ]&quot;
/&gt;

&lt;twig:block-accordion
    :items=&quot;[
        {
            title: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend. Fusce aliquet tempus gravida. Nam ullamcorper libero ac velit pharetra, in volutpat sem vulputate. Integer quis suscipit nibh, non tempor enim. Nulla ipsum leo, vulputate nec dolor nec, aliquet porttitor nibh. Donec maximus tellus vitae ornare dignissim.&#039;,
            active: true
        },
        {
            title: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend. Fusce aliquet tempus gravida. Nam ullamcorper libero ac velit pharetra, in volutpat sem vulputate. Integer quis suscipit nibh, non tempor enim. Nulla ipsum leo, vulputate nec dolor nec, aliquet porttitor nibh. Donec maximus tellus vitae ornare dignissim.&#039;,
        }
    ]&quot;
/&gt;


---

### Alert

Alert messages for user feedback.

{% set types = [&#039;primary&#039;, &#039;secondary&#039;, &#039;success&#039;, &#039;danger&#039;, &#039;warning&#039;, &#039;info&#039;, &#039;light&#039;, &#039;dark&#039;] %}
{% for type in types %}
    &lt;twig:block-alert
      class=&quot;my-4&quot;
      type=&quot;{{ type }}&quot;
      content=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore &lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;magna aliqua.&lt;/a&gt;&quot;
    /&gt;
{% endfor %}


---

### Box

Simple box container for content.

&lt;twig:block-box
    class=&quot;rounded&quot;
    title=&quot;Box with rounded corners&quot;
    content=&#039;Lorem ipsum dolor sit amet, consectetur adipiscing &lt;a href=&quot;https://www.example.com/&quot; target=&quot;_blank&quot;&gt;elit&lt;/a&gt;.&#039;
/&gt;

&lt;twig:block-box
    title=&quot;Box without rounded corners&quot;
    content=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&quot;
/&gt;

&lt;twig:block-box
    title=&quot;Box without content&quot;
/&gt;


---

### Boxes

Large box display for information.

&lt;twig:block-boxes
    class=&quot;my-4&quot;
    cols=&quot;1&quot;
    :boxes=&quot;[
        {
            icon: &#039;fa-solid fa-search&#039;,
            title: &#039;Lorem ipsum dolor sit amet&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;adipiscing elit.&lt;/a&gt;&#039;,
            buttonText: &#039;Lorem ipsum&#039;,
            buttonUrl: &#039;#&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-boxes
    class=&quot;my-4&quot;
    :boxes=&quot;[
        {
            icon: &#039;fa-solid fa-search&#039;,
            title: &#039;Lorem ipsum dolor sit amet&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            buttonText: &#039;Lorem ipsum&#039;,
            buttonUrl: &#039;#&#039;
        },
        {
            icon: &#039;fa-solid fa-file&#039;,
            title: &#039;Lorem ipsum dolor sit amet&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            buttonText: &#039;Lorem ipsum&#039;,
        }
    ]&quot;
/&gt;

&lt;twig:block-boxes
    class=&quot;my-4&quot;
    cols=&quot;3&quot;
    :boxes=&quot;[
        {
            icon: &#039;fa-solid fa-search&#039;,
            title: &#039;Lorem ipsum dolor sit amet&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
        },
        {
            icon: &#039;fa-solid fa-file&#039;,
            title: &#039;Lorem ipsum dolor sit amet&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            buttonText: &#039;Lorem ipsum&#039;,
            buttonUrl: &#039;#&#039;
        },
        {
            icon: &#039;fa-solid fa-file&#039;,
            title: &#039;Lorem ipsum dolor sit amet&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            buttonText: &#039;Lorem ipsum&#039;,
            buttonUrl: &#039;#&#039;
        }
    ]&quot;
/&gt;


---

### Card Grid

Grid layout for multiple cards.

&lt;twig:block-card-grid
    class=&quot;my-4&quot;
    :cols=&quot;3&quot;
    :cards=&quot;[
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            title: &#039;Twig&#039;,
            content: &#039;It is a twig. &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;Link&lt;/a&gt;&#039;,
            buttonText: &#039;Learn about Twig&#039;,
            buttonUrl: &#039;https://twig.symfony.com&#039;,
            buttonColor: &#039;primary&#039;
        },
        {
            title: &#039;Twig&#039;,
            content: &#039;It is a twig.&#039;,
            buttonText: &#039;Learn about Twig&#039;,
            buttonUrl: &#039;https://twig.symfony.com&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            content: &#039;Twig is a twig&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-card-grid
    class=&quot;my-4&quot;
    :cols=&quot;4&quot;
    :cards=&quot;[
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            title: &#039;Twig&#039;,
            content: &#039;It is a twig.&#039;,
            buttonText: &#039;Learn about Twig&#039;,
            buttonUrl: &#039;https://twig.symfony.com&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            title: &#039;Twig&#039;,
            content: &#039;It is a twig.&#039;,
            buttonText: &#039;Learn about Twig&#039;,
            buttonUrl: &#039;https://twig.symfony.com&#039;,
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            title: &#039;Twig&#039;,
            content: &#039;It is a twig.&#039;,
            buttonText: &#039;Learn about Twig&#039;,
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            title: &#039;Twig&#039;,
            content: &#039;It is a twig.&#039;,
            buttonText: &#039;Learn about Twig&#039;,
            buttonUrl: &#039;https://twig.symfony.com&#039;,
            buttonColor: &#039;success&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-card-grid
    class=&quot;my-4&quot;
    :cols=&quot;3&quot;
    :cards=&quot;[
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            title: &#039;Twig&#039;,
            content: &#039;It is a twig.&#039;,
            buttonText: &#039;Learn about Twig&#039;,
            buttonUrl: &#039;https://twig.symfony.com&#039;,
            offset: 4
        }
    ]&quot;
/&gt;


---

### Card

Card component for content display.

&lt;twig:block-card
    class=&quot;my-4&quot;
    image=&quot;/img/home/derafu-dev-programmer.png&quot;
    title=&quot;Card&quot;
    content=&quot;Lorem ipsum dolor sit amet, consectetur &lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;adipiscing elit.&lt;/a&gt;&quot;
    buttonText=&quot;More...&quot;
    buttonUrl=&quot;https://www.example.com/&quot;
/&gt;


---

### Comparison

Side-by-side comparison of features.

&lt;twig:block-comparison
    class=&quot;my-4&quot;
    :plans=&quot;[
        {
            title: &#039;Alpha Plan&#039;,
            price: &#039;$20&lt;small&gt;.000&lt;/small&gt;&#039;,
            period: &#039;/month&#039;,
            features: [
                {
                    text: &#039;Up to &lt;b&gt;500&lt;/b&gt; monthly receipts&#039;,
                    tooltip: &#039;Monthly limit for issuing or synchronizing electronic honorarium receipts (EHR).&#039;
                },
                {
                    text: &#039;Allows other users&#039;,
                    value: false
                },
                {
                    text: &#039;API issuance&#039;,
                    value: true
                }
            ],
            note: &#039;Recommended for accountants or doctors.&#039;,
            buttonText: &#039;Sign up&#039;,
            buttonUrl: &#039;https://www.example.com/&#039;
        },
        {
            title: &#039;Beta Plan&#039;,
            price: &#039;$40&lt;small&gt;.000&lt;/small&gt;&#039;,
            period: &#039;/month&#039;,
            features: [
                {
                    text: &#039;Up to &lt;b&gt;2,000&lt;/b&gt; monthly receipts&#039;
                },
                {
                    text: &#039;Up to &lt;b&gt;2 users&lt;/b&gt; can work with the issuer&#039;
                },
                {
                    text: &#039;API issuance&#039;,
                    value: true
                }
            ],
            note: &#039;Recommended for professional societies.&#039;,
            buttonText: &#039;Sign up&#039;,
            buttonUrl: &#039;https://www.example.com/&#039;,
            highlighted: true
        },
        {
            title: &#039;Gamma&#039;,
            price: &#039;$ 80&lt;small&gt;.000&lt;/small&gt;&#039;,
            period: &#039;/ month&#039;,
            features: [
                {
                    text: &#039;Up to &lt;b&gt;5,000&lt;/b&gt; monthly receipts&#039;
                },
                {
                    text: &#039;Up to &lt;b&gt;3 users&lt;/b&gt; can work with the issuer&#039;
                },
                {
                    text: &#039;API issuance&#039;,
                    value: true
                }
            ],
            note: &#039;Recommended for notaries.&#039;,
            buttonText: &#039;Sign up&#039;,
            buttonUrl: &#039;https://www.example.com/&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-comparison
    class=&quot;my-4&quot;
    :plans=&quot;[
        {
            title: &#039;Android&#039;,
            priceIcon: &#039;fa-brands fa-android fa-2x&#039;,
            features: [
                {
                    text: &#039;Use the application with multiple &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;companies&lt;/a&gt;&#039;
                },
                {
                    text: &#039;Issue receipts, invoices and shipping guides&#039;
                },
                {
                    text: &#039;Easy receipt and retail point of sale&#039;
                }
            ],
            note: &#039;Turn your Android device into a Point of Sale.&#039;,
            buttonText: &#039;Install from Google Play up to Android 9&#039;,
            buttonUrl: &#039;#&#039;
        },
        {
            title: &#039;iOS&#039;,
            priceIcon: &#039;fa-brands fa-apple fa-2x&#039;,
            features: [
                {
                    text: &#039;Use the application with multiple companies&#039;
                },
                {
                    text: &#039;Issue receipts, invoices and shipping guides&#039;
                },
                {
                    text: &#039;Easy receipt and retail point of sale&#039;
                }
            ],
            note: &#039;Check your company and issue tax documents easily.&#039;,
            buttonText: &#039;Install from App Store&#039;,
            buttonUrl: &#039;#&#039;,
            highlighted: true
        }
    ]&quot;
/&gt;


---

### CTA

Call-to-action component.

&lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt;: The CTA block can be used in full width or in a container. In full with the CTA should not have rounded corners. In this example we use a container, that is the reason why we have rounded corners.&lt;/p&gt;

&lt;twig:block-cta
    class=&quot;my-4 rounded p-4&quot;
    title=&quot;Lorem ipsum dolor sit amet&quot;
    content=&#039;Lorem ipsum dolor sit amet, consectetur &lt;a href=&quot;https://www.example.com/&quot; target=&quot;_blank&quot;&gt;adipiscing elit.&lt;/a&gt;&#039;
    buttonText=&quot;More information&quot;
    buttonUrl=&quot;https://www.example.com/&quot;
/&gt;

&lt;twig:block-cta
    class=&quot;my-4 rounded p-4&quot;
    title=&quot;Lorem ipsum dolor sit amet&quot;
    content=&#039;Lorem ipsum dolor sit amet, consectetur &lt;a href=&quot;https://www.example.com/&quot; target=&quot;_blank&quot;&gt;adipiscing elit.&lt;/a&gt;&#039;
    buttonText=&quot;Disabled button&quot;
/&gt;


---

### Features Grid

Grid layout for features.

&lt;twig:block-features-grid
    class=&quot;my-4&quot;
    :blocks=&quot;[
        {
            title: &#039;Lorem&#039;,
            subtitle: &#039;First block subtitle&#039;,
            features: [
                {
                    icon: &#039;fa-solid fa-cloud&#039;,
                    title: &#039;Feature 1&#039;,
                    content: &#039;Content of &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;feature 1.&lt;/a&gt;&#039;
                },
                {
                    icon: &#039;fa-solid fa-cog&#039;,
                    title: &#039;Feature 2&#039;,
                    content: &#039;Content of feature 2.&#039;
                },
                {
                    icon: &#039;fa-solid fa-users&#039;,
                    title: &#039;Feature 3&#039;,
                    content: &#039;Content of feature 3.&#039;
                }
            ]
        },
        {
            title: &#039;Ipsum&#039;,
            subtitle: &#039;Subtitle of the second &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;block&lt;/a&gt;.&#039;,
            features: [
                {
                    icon: &#039;fa-solid fa-star&#039;,
                    title: &#039;Feature 1&#039;,
                    content: &#039;Content of feature 1.&#039;
                },
                {
                    icon: &#039;fa-solid fa-heart&#039;,
                    title: &#039;Feature &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;2&lt;/a&gt;&#039;,
                    content: &#039;Content of feature 2.&#039;
                },
                {
                    icon: &#039;fa-solid fa-bell&#039;,
                    title: &#039;Feature 3&#039;,
                    content: &#039;Content of feature 3.&#039;
                }
            ]
        }
    ]&quot;
/&gt;


---

### Features Icon

Icon list for features.

{# Case 4 elements (one row of 4) #}
&lt;twig:block-features-icon
    class=&quot;my-4&quot;
    :features=&quot;[
        {
            icon: &#039;fa-solid fa-cloud&#039;,
            title: &#039;Software as a Service&#039;,
            content: &#039;We are a cloud software, you need Internet access to &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;use it.&lt;/a&gt;&#039;
        },
        {
            icon: &#039;fa-solid fa-money-bill&#039;,
            title: &#039;&lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;Price&lt;/a&gt; per company&#039;,
            content: &#039;The Plus Service price is per company. If you have 3 companies, you will need to pay for 3 Plus Services.&#039;
        },
        {
            icon: &#039;fa-solid fa-arrows-left-right&#039;,
            title: &#039;SII Synchronization&#039;,
            content: &#039;Your tax documents are immediately sent to SII and we monitor their status.&#039;
        },
        {
            icon: &#039;fa-solid fa-check&#039;,
            title: &#039;Feature 4&#039;,
            content: &#039;Content of feature 4.&#039;
        }
    ]&quot;
/&gt;

{# Case 5 elements (row of 3 + row of 2) #}
&lt;twig:block-features-icon
    class=&quot;my-4&quot;
    :features=&quot;[
        {
            icon: &#039;fa-solid fa-cloud&#039;,
            title: &#039;Feature 1&#039;,
            content: &#039;Content 1&#039;
        },
        {
            icon: &#039;fa-solid fa-money-bill&#039;,
            title: &#039;Feature 2&#039;,
            content: &#039;Content 2&#039;
        },
        {
            icon: &#039;fa-solid fa-arrows-left-right&#039;,
            title: &#039;Feature 3&#039;,
            content: &#039;Content 3&#039;
        },
        {
            icon: &#039;fa-solid fa-check&#039;,
            title: &#039;Feature 4&#039;,
            content: &#039;Content 4&#039;
        },
        {
            icon: &#039;fa-solid fa-star&#039;,
            title: &#039;Feature 5&#039;,
            content: &#039;Content 5&#039;
        }
    ]&quot;
/&gt;

{# Case 8 elements (two rows of 4) #}
&lt;twig:block-features-icon
    class=&quot;my-4&quot;
    :features=&quot;[
        {
            icon: &#039;fa-solid fa-cloud&#039;,
            title: &#039;Feature 1&#039;,
            content: &#039;Content 1&#039;
        },
        {
            icon: &#039;fa-solid fa-money-bill&#039;,
            title: &#039;Feature 2&#039;,
            content: &#039;Content 2&#039;
        },
        {
            icon: &#039;fa-solid fa-arrows-left-right&#039;,
            title: &#039;Feature 3&#039;,
            content: &#039;Content 3&#039;
        },
        {
            icon: &#039;fa-solid fa-check&#039;,
            title: &#039;Feature 4&#039;,
            content: &#039;Content 4&#039;
        },
        {
            icon: &#039;fa-solid fa-star&#039;,
            title: &#039;Feature 5&#039;,
            content: &#039;Content 5&#039;
        },
        {
            icon: &#039;fa-solid fa-heart&#039;,
            title: &#039;Feature 6&#039;,
            content: &#039;Content 6&#039;
        },
        {
            icon: &#039;fa-solid fa-bell&#039;,
            title: &#039;Feature 7&#039;,
            content: &#039;Content 7&#039;
        },
        {
            icon: &#039;fa-solid fa-user&#039;,
            title: &#039;Feature 8&#039;,
            content: &#039;Content 8&#039;
        }
    ]&quot;
/&gt;


---

### Features List

List of features with left and right alignment.

&lt;twig:block-features-list
    class=&quot;my-4&quot;
    :featuresLeft=&quot;[
        {
            icon: &#039;fa-solid fa-laptop fa-fw&#039;,
            title: &#039;Web &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;Application.&lt;/a&gt;&#039;,
            content: &#039;With individual and &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;bulk&lt;/a&gt; document issuance.&#039;
        },
        {
            icon: &#039;fa-solid fa-chart-line fa-fw&#039;,
            title: &#039;Reports&#039;,
            content: &#039;Charts and statistics to visualize your data in a simple way.&#039;
        },
        {
            icon: &#039;fa-solid fa-cogs fa-fw&#039;,
            title: &#039;Configuration&#039;,
            content: &#039;Customize the application according to your specific needs.&#039;
        }
    ]&quot;
    :featuresRight=&quot;[
        {
            icon: &#039;fa-solid fa-cubes fa-fw&#039;,
            title: &#039;Products and Services&#039;,
            content: &#039;Code your products and services to issue quickly.&#039;
        },
        {
            icon: &#039;fa-solid fa-cloud-download fa-fw&#039;,
            title: &#039;Backup&#039;,
            content: &#039;Download your data whenever you need it.&#039;
        },
        {
            icon: &#039;fa-solid fa-shield fa-fw&#039;,
            title: &#039;Security&#039;,
            content: &#039;Your data is protected with the highest security standards.&#039;
        }
    ]&quot;
/&gt;


---

### Features Table

Table of features with values.

&lt;twig:block-features-table
    class=&quot;my-4&quot;
    title=&quot;Features&quot;
    :features=&quot;[
        {
            icon: &#039;fa-solid fa-folder&#039;,
            title: &#039;Taxpayers API&#039;,
            content: &#039;Tax status of third parties and &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;economic activities&lt;/a&gt;&#039;,
            values: {
                &#039;SME Plan&#039;: true,
                &#039;Premium Plan&#039;: true,
                &#039;Pro Plan&#039;: true,
                &#039;Premier Plan&#039;: true,
                &#039;e600k Plan&#039;: true
            }
        },
        {
            icon: &#039;fa-solid fa-chart-line&#039;,
            title: &#039;SII API&#039;,
            content: &#039;Indicators: UF and complementary global tax.&#039;,
            values: {
                &#039;SME Plan&#039;: true,
                &#039;Premium Plan&#039;: true,
                &#039;Pro Plan&#039;: true,
                &#039;Premier Plan&#039;: true,
                &#039;e600k Plan&#039;: true
            }
        },
        {
            icon: &#039;fa-solid fa-file-lines&#039;,
            title: &#039;DTE API&#039;,
            content: &#039;Electronic tax documents.&#039;,
            values: {
                &#039;SME Plan&#039;: true,
                &#039;Premium Plan&#039;: true,
                &#039;Pro Plan&#039;: true,
                &#039;Premier Plan&#039;: true,
                &#039;e600k Plan&#039;: true
            }
        },
        {
            icon: &#039;fa-solid fa-file-invoice&#039;,
            title: &#039;BHE API&#039;,
            content: &#039;Issued and received fee receipts.&#039;,
            values: {
                &#039;SME Plan&#039;: false,
                &#039;Premium Plan&#039;: false,
                &#039;Pro Plan&#039;: true,
                &#039;Premier Plan&#039;: true,
                &#039;e600k Plan&#039;: true
            }
        },
        {
            icon: &#039;fa-solid fa-car&#039;,
            title: &#039;Vehicles API&#039;,
            content: &#039;Vehicle appraisal.&#039;,
            values: {
                &#039;SME Plan&#039;: false,
                &#039;Premium Plan&#039;: false,
                &#039;Pro Plan&#039;: false,
                &#039;Premier Plan&#039;: true,
                &#039;e600k Plan&#039;: true
            }
        },
        {
            icon: &#039;fa-solid fa-chart-bar&#039;,
            title: &#039;Queries every 24 hours&#039;,
            values: {
                &#039;SME Plan&#039;: &#039;&lt;span class=\&#039;lead\&#039;&gt;&lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;500&lt;/a&gt;&lt;/span&gt;&#039;,
                &#039;Premium Plan&#039;: &#039;&lt;span class=\&#039;lead\&#039;&gt;1.400&lt;/span&gt;&#039;,
                &#039;Pro Plan&#039;: &#039;&lt;span class=\&#039;lead\&#039;&gt;4.000&lt;/span&gt;&#039;,
                &#039;Premier Plan&#039;: &#039;&lt;span class=\&#039;lead\&#039;&gt;10.000&lt;/span&gt;&#039;,
                &#039;e600k Plan&#039;: &#039;&lt;span class=\&#039;lead\&#039;&gt;20.000&lt;/span&gt;&#039;
            }
        },
        {
            icon: &#039;fa-solid fa-dollar&#039;,
            title: &#039;&lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;Plan price&lt;/a&gt;&#039;,
            content: &#039;+ VAT / month&#039;,
            values: {
                &#039;SME Plan&#039;: &#039;&lt;span class=\&#039;lead\&#039;&gt;$40.000&lt;/span&gt;&#039;,
                &#039;Premium Plan&#039;: &#039;&lt;span class=\&#039;lead\&#039;&gt;$80.000&lt;/span&gt;&#039;,
                &#039;Pro Plan&#039;: &#039;&lt;span class=\&#039;lead\&#039;&gt;$150.000&lt;/span&gt;&#039;,
                &#039;Premier Plan&#039;: &#039;&lt;span class=\&#039;lead\&#039;&gt;$300.000&lt;/span&gt;&#039;,
                &#039;e600k Plan&#039;: &#039;&lt;span class=\&#039;lead\&#039;&gt;$600.000&lt;/span&gt;&#039;
            }
        }
    ]&quot;
/&gt;

&lt;twig:block-features-table
    class=&quot;my-4&quot;
    title=&quot;Plan Comparison&quot;
    :features=&quot;[
        {
            isHeader: true,
            title: &#039;API Access&#039;
        },
        {
            icon: &#039;fa-solid fa-folder&#039;,
            title: &#039;Taxpayers API&#039;,
            content: &#039;Tax data consultation&#039;,
            values: {
                &#039;Basic&#039;: true,
                &#039;Complete&#039;: true
            }
        },
        {
            icon: &#039;fa-solid fa-file-invoice&#039;,
            title: &#039;Documents API&#039;,
            content: &#039;Electronic invoices and receipts&#039;,
            values: {
                &#039;Basic&#039;: false,
                &#039;Complete&#039;: true
            }
        },
        {
            isHeader: true,
            title: &#039;Technical Support&#039;
        },
        {
            title: &#039;Email support&#039;,
            values: {
                &#039;Basic&#039;: true,
                &#039;Complete&#039;: true
            }
        },
        {
            isHeader: true,
            icon: &#039;fa-solid fa-dollar&#039;,
            title: &#039;Pricing&#039;
        },
        {
            icon: &#039;fa-solid fa-money-bill&#039;,
            title: &#039;Monthly cost&#039;,
            content: &#039;+ VAT&#039;,
            values: {
                &#039;Basic&#039;: &#039;&lt;span class=\&#039;lead\&#039;&gt;$35.000&lt;/span&gt;&#039;,
                &#039;Complete&#039;: &#039;&lt;span class=\&#039;lead\&#039;&gt;$90.000&lt;/span&gt;&#039;
            }
        }
    ]&quot;
/&gt;


---

### Footer

Footer component with multiple layouts.

{# Example 1: Complete Footer with 4 columns #}
&lt;twig:block-footer
    class=&quot;my-4&quot;
    col1Title=&quot;Useful Links&quot;
    :col1Links=&quot;[
        {
            text: &#039;Academy&#039;,
            url: &#039;http://www.example.com&#039;,
            icon: &#039;fa-solid fa-graduation-cap fa-fw&#039;
        },
        {
            text: &#039;Jobs&#039;,
            url: &#039;http://www.example.com&#039;,
            icon: &#039;fa-solid fa-briefcase fa-fw&#039;,
            targetBlank: true
        },
        {
            text: &#039;Store&#039;,
            url: &#039;#&#039;,
            icon: &#039;fa-solid fa-shopping-cart fa-fw&#039;
        },
        {
            text: &#039;Bank Transfer Payments&#039;,
            url: &#039;#&#039;,
            icon: &#039;fa-solid fa-money-bill fa-fw&#039;
        }
    ]&quot;

    col2Title=&quot;Software Products&quot;
    :col2Links=&quot;[
        {
            text: &#039;Software 1&#039;,
            url: &#039;#&#039;,
            icon: &#039;fa-solid fa-file-invoice fa-fw&#039;
        },
        {
            text: &#039;Software 2&#039;,
            url: &#039;#&#039;,
            icon: &#039;fa-solid fa-network-wired&#039;
        },
        {
            text: &#039;Software 3&#039;,
            url: &#039;#&#039;,
            icon: &#039;fa-solid fa-cash-register fa-fw&#039;
        }
    ]&quot;

    col3Title=&quot;Contact Us&quot;
    :col3Links=&quot;[
        {
            text: &#039;derafu-twig@example.com&#039;,
            url: &#039;mailto:derafu-twig@example.com&#039;,
            icon: &#039;fa-solid fa-envelope fa-fw&#039;
        },
        {
            text: &#039;Schedule a Meeting&#039;,
            url: &#039;#&#039;,
            icon: &#039;fa-solid fa-calendar fa-fw&#039;
        },
        {
            text: &#039;Help Center&#039;,
            url: &#039;#&#039;,
            icon: &#039;fa-solid fa-question-circle fa-fw&#039;
        }
    ]&quot;

    col4Title=&quot;Derafu DEV&quot;
    col4Html=&quot;&lt;p&gt;From Chile to the world with ❤️&lt;/p&gt;&quot;
    :col4SocialIcons=&quot;[
        {
            icon: &#039;fa-brands fa-linkedin fa-2x&#039;,
            url: &#039;#&#039;,
            color: &#039;#0077b5&#039;,
            targetBlank: true
        },
        {
            icon: &#039;fa-brands fa-github fa-2x&#039;,
            url: &#039;#&#039;,
            color: &#039;#333&#039;,
            targetBlank: true
        }
    ]&quot;

    leftText=&quot;Copyright © Derafu DEV&quot;
    rightText=&quot;All rights reserved&quot;
    socialIconsCircular=&quot;true&quot;
/&gt;

{# Example 2: Minimalist Footer with 2 columns #}
&lt;twig:block-footer
    class=&quot;my-4&quot;
    col1Title=&quot;Our Company&quot;
    col1Html=&quot;&lt;p&gt;Innovative software solutions for modern businesses.&lt;/p&gt;&quot;
    :col1Links=&quot;[
        {
            text: &#039;About Us&#039;,
            url: &#039;#&#039;
        },
        {
            text: &#039;Contact&#039;,
            url: &#039;#&#039;
        }
    ]&quot;

    col2Title=&quot;Quick Links&quot;
    :col2Links=&quot;[
        {
            text: &#039;Documentation&#039;,
            url: &#039;#&#039;
        },
        {
            text: &#039;Support&#039;,
            url: &#039;#&#039;
        }
    ]&quot;

    leftText=&quot;© 2024 Derafu ORG&quot;
/&gt;

{# Example 3: Footer with emphasis on social media #}
&lt;twig:block-footer
    class=&quot;my-4&quot;
    col1Title=&quot;Follow Us&quot;
    col1Html=&quot;&lt;p&gt;Stay connected with us on social media&lt;/p&gt;&quot;
    :col1SocialIcons=&quot;[
        {
            icon: &#039;fa-brands fa-facebook fa-2x&#039;,
            url: &#039;http://www.example.com&#039;,
            color: &#039;#1877f2&#039;,
            targetBlank: true
        },
        {
            icon: &#039;fa-brands fa-twitter fa-2x&#039;,
            url: &#039;#&#039;,
            color: &#039;#1da1f2&#039;,
            targetBlank: true
        },
        {
            icon: &#039;fa-brands fa-instagram fa-2x&#039;,
            url: &#039;#&#039;,
            color: &#039;#e4405f&#039;,
            targetBlank: true
        },
        {
            icon: &#039;fa-brands fa-youtube fa-2x&#039;,
            url: &#039;#&#039;,
            color: &#039;#ff0000&#039;,
            targetBlank: true
        }
    ]&quot;

    col2Title=&quot;Community&quot;
    :col2Links=&quot;[
        {
            text: &#039;Blog&#039;,
            url: &#039;#&#039;,
            icon: &#039;fa-solid fa-blog&#039;
        },
        {
            text: &#039;Forum&#039;,
            url: &#039;#&#039;,
            icon: &#039;fa-solid fa-comments&#039;
        },
        {
            text: &#039;Events&#039;,
            url: &#039;#&#039;,
            icon: &#039;fa-solid fa-calendar-days&#039;
        }
    ]&quot;
    :col2SocialIcons=&quot;[
        {
            icon: &#039;fa-brands fa-discord fa-2x&#039;,
            url: &#039;#&#039;,
            color: &#039;#5865f2&#039;,
            targetBlank: true
        },
        {
            icon: &#039;fa-brands fa-telegram fa-2x&#039;,
            url: &#039;#&#039;,
            color: &#039;#0088cc&#039;,
            targetBlank: true
        }
    ]&quot;

    leftText=&quot;Join our community&quot;
    rightText=&#039;&lt;a href=&quot;#&quot;&gt;Privacy Policy&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Terms of Use&lt;/a&gt;&#039;
/&gt;


---

### Gallery

Grid of images and videos with a click-to-enlarge lightbox.

{#
    Basic gallery with images only. The &quot;caption&quot; field is optional per item
    (the first photo below has none).
    The &quot;caption&quot; text is shown two places: as an overlay at the bottom of
    each thumbnail in the grid, and again under the media inside the
    lightbox once you click a thumbnail to open it.
    &quot;size&quot; controls the lightbox modal size. Valid values: &quot;sm&quot;, &quot;lg&quot;, &quot;xl&quot;
    (default) and &quot;fullscreen&quot;.
#}
&lt;twig:block-gallery
    class=&quot;my-4&quot;
    :cols=&quot;4&quot;
    size=&quot;sm&quot;
    :items=&quot;[
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            caption: &#039;Caption for photo 2&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            caption: &#039;Caption for photo 3&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            caption: &#039;Caption for photo 4&#039;
        }
    ]&quot;
/&gt;

{#
    Gallery mixing images and videos in the same grid. Video thumbnails
    without a custom &quot;thumbnail&quot; show a play icon over a dark background
    (see the next example for a video with a real poster image instead).
#}
&lt;twig:block-gallery
    class=&quot;my-4&quot;
    :cols=&quot;3&quot;
    :items=&quot;[
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            caption: &#039;Photo 1&#039;
        },
        {
            video: &#039;https://www.youtube.com/watch?v=GOAEIMx39-w&#039;,
            caption: &#039;Video 1 (no thumbnail: play icon placeholder)&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            caption: &#039;Photo 2&#039;
        },
        {
            video: &#039;https://www.youtube.com/watch?v=GOAEIMx39-w&#039;,
            caption: &#039;Video 2 (no thumbnail: play icon placeholder)&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            caption: &#039;Photo 3&#039;
        },
        {
            video: &#039;https://www.youtube.com/watch?v=GOAEIMx39-w&#039;,
            caption: &#039;Video 3 (no thumbnail: play icon placeholder)&#039;
        }
    ]&quot;
/&gt;

{#
    Gallery combining every optional field: &quot;thumbnail&quot; as a custom poster
    for a video item, &quot;alt&quot; as the accessible/tooltip text shown on hover
    over image thumbnails, and &quot;caption&quot; shown under the thumbnail and in
    the lightbox.
#}
&lt;twig:block-gallery
    class=&quot;my-4&quot;
    :cols=&quot;6&quot;
    :items=&quot;[
        {
            video: &#039;https://www.youtube.com/watch?v=GOAEIMx39-w&#039;,
            thumbnail: &#039;/img/home/derafu-dev-programmer.png&#039;,
            alt: &#039;Product demo&#039;,
            caption: &#039;Video with poster&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            alt: &#039;Team photo&#039;,
            caption: &#039;Team&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            alt: &#039;Office&#039;,
            caption: &#039;Office&#039;
        },
        {
            video: &#039;https://www.youtube.com/watch?v=GOAEIMx39-w&#039;,
            alt: &#039;Tutorial&#039;,
            caption: &#039;Video without poster&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            alt: &#039;Event&#039;,
            caption: &#039;Event&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            alt: &#039;Conference&#039;,
            caption: &#039;Conference&#039;
        }
    ]&quot;
/&gt;

{# Gallery with a fullscreen lightbox (size=&quot;fullscreen&quot;) #}
&lt;twig:block-gallery
    class=&quot;my-4&quot;
    :cols=&quot;2&quot;
    size=&quot;fullscreen&quot;
    :items=&quot;[
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            caption: &#039;Wide photo 1&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            caption: &#039;Wide photo 2&#039;
        }
    ]&quot;
/&gt;


---

### Grid

Grid layout for content.

{% set grid_item_1 %}
    &lt;h2&gt;Item 1&lt;/h2&gt;
    &lt;p&gt;orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend. Fusce aliquet &lt;a href=&quot;https://www.example.com/&quot; target=&quot;_blank&quot;&gt;tempus gravida.&lt;/a&gt;&lt;/p&gt;
{% endset %}

{% set grid_item_2 %}
    &lt;twig:block-image
        title=&quot;What is Twig?&quot;
        image=&quot;/img/home/derafu-dev-programmer.png&quot;
        content=&quot;&lt;p&gt;A small branch.&lt;/p&gt;&quot;
        :buttons=&quot;[
            {
                text: &#039;Learn about Twig&#039;,
                url: &#039;https://twig.symfony.com/&#039;
            }
        ]&quot;
    /&gt;
{% endset %}

{% set grid_item_3 %}
    &lt;twig:block-image
        title=&quot;Lorem ipsum&quot;
        image=&quot;/img/home/derafu-dev-programmer.png&quot;
        content=&quot;&lt;p&gt;Dolor sit amet&lt;/p&gt;&quot;
        :buttons=&quot;[
            {
                text: &#039;Consectetur&#039;,
                url: &#039;https://twig.symfony.com/&#039;
            }
        ]&quot;
    /&gt;
{% endset %}

{# Example 1: Grid without specified columns #}
&lt;twig:block-grid
    class=&quot;my-4&quot;
    :items=&quot;[
        grid_item_1,
        grid_item_2,
    ]&quot;
/&gt;

{# Example 2: Grid with 4 columns #}
&lt;twig:block-grid
    class=&quot;my-4&quot;
    cols=&quot;4&quot;
    :items=&quot;[
        grid_item_1,
        grid_item_2,
        grid_item_3,
        grid_item_2,
    ]&quot;
/&gt;


---

### Header

Header component with multiple layouts.

&lt;twig:block-header
    class=&quot;mt-0&quot;
    logoImage=&quot;/img/home/derafu-dev-programmer.png&quot;
    logoText=&quot;&lt;span class=&#039;fw-normal&#039;&gt;Soft&lt;/span&gt;&lt;span class=&#039;fw-bold text-primary&#039;&gt;ware&lt;/span&gt;&quot;
    :leftNav=&quot;[
        {
            text: &#039;Home&#039;,
            url: &#039;#&#039;
        },
        {
            text: &#039;Solutions&#039;,
            icon: &#039;fa-solid fa-cubes&#039;,
            items: [
                {
                    text: &#039;Basic Solution&#039;,
                    icon: &#039;fa-solid fa-star&#039;,
                    url: &#039;#&#039;
                },
                {
                    type: &#039;divider&#039;
                },
                {
                    text: &#039;Advanced Solution&#039;,
                    icon: &#039;fa-solid fa-rocket&#039;,
                    items: [
                        {
                            text: &#039;Main Features&#039;,
                            url: &#039;#&#039;
                        },
                        {
                            icon: &#039;fa-solid fa-chart-line&#039;,
                            text: &#039;Analysis&#039;,
                            url: &#039;#&#039;
                        },
                        {
                            type: &#039;divider&#039;
                        },
                        {
                            icon: &#039;fa-solid fa-book-open&#039;,
                            text: &#039;Complete Guide&#039;,
                            url: &#039;#&#039;
                        }
                    ]
                }
            ]
        }
    ]&quot;
    :rightNav=&quot;[
        {
            text: &#039;Resources&#039;,
            url: &#039;#&#039;,
            icon: &#039;fa-solid fa-toolbox&#039;
        },
        {
            text: &#039;Integrations&#039;,
            icon: &#039;fa-solid fa-plug&#039;,
            items: [
                {
                    text: &#039;Platforms&#039;,
                    icon: &#039;fa-solid fa-desktop&#039;,
                    url: &#039;#&#039;
                },
                {
                    text: &#039;API&#039;,
                    icon: &#039;fa-solid fa-code&#039;,
                    url: &#039;#&#039;
                }
            ]
        }
    ]&quot;
    ctaIcon=&quot;fa-solid fa-rocket&quot;
    ctaText=&quot;Get Started&quot;
    ctaUrl=&quot;#&quot;
/&gt;

&lt;twig:block-header
    class=&quot;my-4&quot;
    logoImage=&quot;/img/home/derafu-dev-programmer.png&quot;
    logoText=&quot;&lt;span class=&#039;fw-normal&#039;&gt;Another&lt;/span&gt;&lt;span class=&#039;fw-bold text-primary&#039;&gt;Example&lt;/span&gt;&quot;
    :leftNav=&quot;[
        {
            text: &#039;Marketplace&#039;,
            icon: &#039;fa-solid fa-shopping-cart&#039;,
            sections: [
                {
                    title: &#039;Technology&#039;,
                    links: [
                        {
                            text: &#039;Software&#039;,
                            url: &#039;#&#039;,
                            icon: &#039;fa-solid fa-laptop-code&#039;
                        },
                        {
                            text: &#039;Hardware&#039;,
                            url: &#039;#&#039;,
                            icon: &#039;fa-solid fa-server&#039;
                        }
                    ]
                }
            ]
        }
    ]&quot;
    ctaText=&quot;Explore&quot;
    ctaUrl=&quot;#&quot;
/&gt;


---

### Hero

Hero section for landing pages.

&lt;twig:block-hero
   class=&quot;my-4&quot;
   align=&quot;left&quot;
   background=&quot;/img/home/derafu-dev-programmer.png&quot;
   title=&quot;Lorem &lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;ipsum&lt;/a&gt;&quot;
   subtitle=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&quot;
   :buttons=&quot;[
       {
           text: &#039;Example.com&#039;,
           url: &#039;https://www.example.com&#039;
       }
   ]&quot;
/&gt;

&lt;twig:block-hero
   class=&quot;my-4&quot;
   align=&quot;left&quot;
   background=&quot;/img/home/derafu-dev-programmer.png&quot;
   contentBackground=&quot;true&quot;
   title=&quot;Lorem ipsum&quot;
   subtitle=&quot;Lorem ipsum dolor sit amet, consectetur &lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;adipiscing elit.&lt;/a&gt;&quot;
   :buttons=&quot;[
       {
           text: &#039;Example.com&#039;,
           url: &#039;https://www.example.com&#039;
       }
   ]&quot;
/&gt;

&lt;twig:block-hero
   class=&quot;my-4&quot;
   align=&quot;right&quot;
   background=&quot;/img/home/derafu-dev-programmer.png&quot;
   title=&quot;Lorem ipsum&quot;
   subtitle=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&quot;
   :buttons=&quot;[
       {
           text: &#039;Example.com&#039;,
           url: &#039;https://www.example.com&#039;
       }
   ]&quot;
/&gt;

&lt;twig:block-hero
    class=&quot;my-4&quot;
    title=&quot;Hero&quot;
    subtitle=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&quot;
    :buttons=&quot;[
        {
            text: &#039;Example.com 1&#039;,
            url: &#039;https://www.example.com&#039;
        },
        {
            text: &#039;Example.com 2&#039;,
            url: &#039;https://www.example.com&#039;
        }
    ]&quot;
/&gt;

{% set sizes = [&#039;mini&#039;, &#039;small&#039;, &#039;medium&#039;, &#039;large&#039;, &#039;full&#039;] %}
{% for size in sizes %}
   &lt;twig:block-hero
       class=&quot;my-4&quot;
       align=&quot;right&quot;
       size=&quot;{{ size }}&quot;
       background=&quot;/img/home/derafu-dev-programmer.png&quot;
       title=&quot;Size: {{ size }}&quot;
       subtitle=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&quot;
       :buttons=&quot;[
           {
               text: &#039;Example.com&#039;,
               url: &#039;https://www.example.com&#039;
           }
       ]&quot;
   /&gt;
{% endfor %}


---

### Image Grid

Grid layout for images.

&lt;twig:block-image-grid
    class=&quot;my-4&quot;
    :cols=&quot;4&quot;
    :images=&quot;[
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            url: &#039;https://www.example.com&#039;,
            tooltip: &#039;Company 1&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            tooltip: &#039;Company 2&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            url: &#039;https://www.example.com&#039;,
            tooltip: &#039;Company 1&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            tooltip: &#039;Company 2&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
        }
    ]&quot;
/&gt;


---

### Image

Image component with title, content and buttons.

&lt;twig:block-image
    class=&quot;my-4&quot;
    title=&quot;What is Twig?&quot;
    image=&quot;/img/home/derafu-dev-programmer.png&quot;
    content=&quot;A &lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;small branch&lt;/a&gt;.&quot;
    :buttons=&quot;[
        {
            text: &#039;Learn about Twig&#039;,
            url: &#039;https://twig.symfony.com/&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-image
    class=&quot;my-4&quot;
    size=&quot;small&quot;
    title=&quot;What is &lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;Twig&lt;/a&gt;?&quot;
    image=&quot;/img/home/derafu-dev-programmer.png&quot;
    content=&quot;A small branch&quot;
    :buttons=&quot;[
        {
            text: &#039;Learn about Twig&#039;,
            url: &#039;https://twig.symfony.com/&#039;
        }
    ]&quot;
/&gt;


---

### Media List

List of media items.

&lt;twig:block-media-list
    class=&quot;mb-5&quot;
    :items=&quot;[
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            title: &#039;Title 1&#039;,
            content: &#039;&lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            title: &#039;Title 2&#039;,
            content: &#039;&lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            title: &#039;Title 3&#039;,
            content: &#039;&lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-media-list
    class=&quot;mb-5&quot;
    :rounded=&quot;true&quot;
    :items=&quot;[
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            title: &#039;Title 1&#039;,
            content: &#039;&lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            title: &#039;Title 2&#039;,
            content: &#039;&lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;&#039;
        },
        {
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            title: &#039;Title 3&#039;,
            content: &#039;&lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;&#039;
        }
    ]&quot;
/&gt;


---

### Modal

Popup dialog windows.

{# Simple modal #}
&lt;div class=&quot;mb-4&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-light d-block&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-1&quot;&gt;
        Open simple modal
    &lt;/button&gt;
&lt;/div&gt;
&lt;twig:block-modal
    id=&quot;modal-1&quot;
    title=&quot;Modal Title&quot;
    content=&quot;This is a basic modal with title and &lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;close button.&lt;/a&gt;&quot;
    :buttons=&quot;[
        {
            text: &#039;Close&#039;,
            type: &#039;secondary&#039;,
            dismiss: true
        },
        {
            text: &#039;Save Changes&#039;,
            type: &#039;primary&#039;
        }
    ]&quot;
/&gt;

{# Complex modal #}
&lt;div class=&quot;mt-2 mb-3&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-light d-block&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-2&quot;&gt;
        Open complex modal
    &lt;/button&gt;
&lt;/div&gt;
&lt;twig:block-modal
    id=&quot;modal-2&quot;
    title=&quot;Confirmation Required&quot;
    content=&quot;&lt;p&gt;This action cannot be undone. Are you sure you want to continue?&lt;/p&gt;&quot;
    size=&quot;lg&quot;
    :centered=&quot;true&quot;
    :withBackdrop=&quot;true&quot;
    :buttons=&quot;[
        {
            text: &#039;Cancel&#039;,
            type: &#039;light&#039;,
            dismiss: true
        },
        {
            text: &#039;Yes, continue&#039;,
            type: &#039;danger&#039;,
            attributes: &#039;onclick=\&#039;handleConfirmation()\&#039;&#039;
        }
    ]&quot;
/&gt;

{# Fullscreen modal with scrollable content #}
&lt;div class=&quot;mt-3 mb-4&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-light d-block&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-3&quot;&gt;
        Open fullscreen modal with scrollable content
    &lt;/button&gt;
&lt;/div&gt;
&lt;twig:block-modal
    id=&quot;modal-3&quot;
    title=&quot;Terms and Conditions&quot;
    content=&quot;&lt;div style=&#039;height: 1000px&#039;&gt;Very long content...&lt;/div&gt;&quot;
    size=&quot;fullscreen&quot;
    :scrollable=&quot;true&quot;
    :buttons=&quot;[
        {
            text: &#039;Accept&#039;,
            type: &#039;success&#039;
        }
    ]&quot;
/&gt;

{# Basic modal #}
&lt;div class=&quot;mt-0&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-light d-block&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-basic&quot;&gt;
        Open basic modal
    &lt;/button&gt;
&lt;/div&gt;
&lt;twig:block-modal
    id=&quot;modal-basic&quot;
    title=&quot;Basic Modal&quot;
    content=&quot;&lt;p&gt;This is a simple modal with title and close button.&lt;/p&gt;&quot;
    :buttons=&quot;[
        {
            text: &#039;Close&#039;,
            type: &#039;secondary&#039;,
            dismiss: true
        }
    ]&quot;
/&gt;

{# Modal without close button #}
&lt;div class=&quot;mt-2 mb-2&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-light d-block&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-no-close&quot;&gt;
        Modal without X
    &lt;/button&gt;
&lt;/div&gt;
&lt;twig:block-modal
    id=&quot;modal-no-close&quot;
    title=&quot;You can&#039;t close me easily&quot;
    content=&quot;&lt;p&gt;This modal doesn&#039;t have the X button to close.&lt;/p&gt;&quot;
    :showClose=&quot;false&quot;
    :buttons=&quot;[
        {
            text: &#039;Got it&#039;,
            type: &#039;warning&#039;,
            dismiss: true
        }
    ]&quot;
/&gt;

{# Modal with static backdrop #}
&lt;div class=&quot;mt-3 mb-4&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-light d-block&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-static&quot;&gt;
        Modal that does not close
    &lt;/button&gt;
&lt;/div&gt;
&lt;twig:block-modal
    id=&quot;modal-static&quot;
    title=&quot;You must make a decision&quot;
    content=&quot;&lt;p&gt;This modal won&#039;t close when clicking outside. You must use one of the buttons.&lt;/p&gt;&quot;
    :withBackdrop=&quot;true&quot;
    :buttons=&quot;[
        {
            text: &#039;Cancel&#039;,
            type: &#039;light&#039;,
            dismiss: true
        },
        {
            text: &#039;Accept&#039;,
            type: &#039;danger&#039;,
            dismiss: true
        }
    ]&quot;
/&gt;

{# Modal centered with small size #}
&lt;div class=&quot;my-4&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-light d-block&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-sm-centered&quot;&gt;
        Modal SM centered
    &lt;/button&gt;
&lt;/div&gt;
&lt;twig:block-modal
    id=&quot;modal-sm-centered&quot;
    title=&quot;Small and Centered&quot;
    content=&quot;&lt;p&gt;A small modal centered vertically.&lt;/p&gt;&quot;
    size=&quot;sm&quot;
    :centered=&quot;true&quot;
    :buttons=&quot;[
        {
            text: &#039;OK&#039;,
            type: &#039;info&#039;,
            dismiss: true
        }
    ]&quot;
/&gt;

{# Modal large with scroll #}
&lt;div class=&quot;mt-3 mb-4&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-light d-block&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-lg-scroll&quot;&gt;
        Modal large with scroll
    &lt;/button&gt;
&lt;/div&gt;
&lt;twig:block-modal
    id=&quot;modal-lg-scroll&quot;
    title=&quot;Terms and Conditions&quot;
    content=&quot;&lt;div&gt;
        &lt;h4&gt;1. Introduction&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit...&lt;/p&gt;
    &lt;/div&gt;&quot;
    size=&quot;lg&quot;
    :scrollable=&quot;true&quot;
    :buttons=&quot;[
        {
            text: &#039;Reject&#039;,
            type: &#039;light&#039;,
            dismiss: true
        },
        {
            text: &#039;Accept Terms&#039;,
            type: &#039;success&#039;,
            dismiss: true
        }
    ]&quot;
/&gt;

{# Modal extra large with form #}
&lt;div class=&quot;mt-2 mb-3&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-light d-block&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-xl-form&quot;&gt;
        Form in modal XL
    &lt;/button&gt;
&lt;/div&gt;
&lt;twig:block-modal
    id=&quot;modal-xl-form&quot;
    title=&quot;User Registration&quot;
    content=&quot;&lt;form id=&#039;userForm&#039;&gt;
        &lt;div class=&#039;row&#039;&gt;
            &lt;div class=&#039;col-md-6 mb-3&#039;&gt;
                &lt;label for=&#039;firstName&#039; class=&#039;form-label&#039;&gt;Name&lt;/label&gt;
                &lt;input type=&#039;text&#039; class=&#039;form-control&#039; id=&#039;firstName&#039; required&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;&quot;
    size=&quot;xl&quot;
    :centered=&quot;true&quot;
    :buttons=&quot;[
        {
            text: &#039;Cancel&#039;,
            type: &#039;secondary&#039;,
            dismiss: true
        },
        {
            text: &#039;Register&#039;,
            type: &#039;dark&#039;,
            attributes: &#039;onclick=&amp;quot;document.getElementById(\&#039;userForm\&#039;).submit()&amp;quot;&#039;
        }
    ]&quot;
/&gt;

{# Modal fullscreen #}
&lt;div class=&quot;mt-3 mb-4&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-light d-block&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-fullscreen&quot;&gt;
        View in full screen
    &lt;/button&gt;
&lt;/div&gt;
&lt;twig:block-modal
    id=&quot;modal-fullscreen&quot;
    title=&quot;Fullscreen Mode&quot;
    content=&quot;&lt;div class=&#039;text-center&#039;&gt;
        &lt;h1 class=&#039;display-1&#039;&gt;👋&lt;/h1&gt;
        &lt;p class=&#039;lead&#039;&gt;This modal takes up the entire screen&lt;/p&gt;
    &lt;/div&gt;&quot;
    size=&quot;fullscreen&quot;
    :buttons=&quot;[
        {
            text: &#039;Exit&#039;,
            type: &#039;outline-primary&#039;,
            dismiss: true
        }
    ]&quot;
/&gt;

{# Modal without footer #}
&lt;div class=&quot;my-4&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-light d-block&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-no-footer&quot;&gt;
        Modal without footer
    &lt;/button&gt;
&lt;/div&gt;
&lt;twig:block-modal
    id=&quot;modal-no-footer&quot;
    title=&quot;Content Only&quot;
    content=&quot;&lt;p&gt;This modal has no buttons in the footer, only the close button in the header.&lt;/p&gt;&quot;
/&gt;


---

### Offcanvas

Hidden sidebars.

{# Left Offcanvas (start) #}
&lt;div class=&quot;mb-4&quot;&gt;
    &lt;button class=&quot;btn btn-light d-block&quot; type=&quot;button&quot; data-bs-toggle=&quot;offcanvas&quot; data-bs-target=&quot;#offcanvas-left&quot;&gt;
        Left Menu
    &lt;/button&gt;
&lt;/div&gt;

&lt;twig:block-offcanvas
    id=&quot;offcanvas-left&quot;
    position=&quot;start&quot;
    title=&quot;Navigation Menu&quot;
    content=&quot;&lt;ul class=&#039;nav flex-column&#039;&gt;
        &lt;li class=&#039;nav-item&#039;&gt;&lt;a class=&#039;nav-link&#039; href=&#039;#&#039;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&#039;nav-item&#039;&gt;&lt;a class=&#039;nav-link&#039; href=&#039;#&#039;&gt;Products&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&#039;nav-item&#039;&gt;&lt;a class=&#039;nav-link&#039; href=&#039;#&#039;&gt;Services&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&#039;nav-item&#039;&gt;&lt;a class=&#039;nav-link&#039; href=&#039;#&#039;&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;&quot;
/&gt;

{# Right Offcanvas with Form #}
&lt;div class=&quot;mt-2 mb-3&quot;&gt;
    &lt;button class=&quot;btn btn-light d-block&quot; type=&quot;button&quot; data-bs-toggle=&quot;offcanvas&quot; data-bs-target=&quot;#offcanvas-right&quot;&gt;
        Edit Profile
    &lt;/button&gt;
&lt;/div&gt;

&lt;twig:block-offcanvas
    id=&quot;offcanvas-right&quot;
    position=&quot;end&quot;
    title=&quot;Edit Profile&quot;
    content=&quot;&lt;form id=&#039;profileForm&#039;&gt;
        &lt;div class=&#039;mb-3&#039;&gt;
            &lt;label class=&#039;form-label&#039;&gt;Name&lt;/label&gt;
            &lt;input type=&#039;text&#039; class=&#039;form-control&#039;&gt;
        &lt;/div&gt;
        &lt;div class=&#039;mb-3&#039;&gt;
            &lt;label class=&#039;form-label&#039;&gt;Email&lt;/label&gt;
            &lt;input type=&#039;email&#039; class=&#039;form-control&#039;&gt;
        &lt;/div&gt;
        &lt;div class=&#039;mb-3&#039;&gt;
            &lt;label class=&#039;form-label&#039;&gt;Bio&lt;/label&gt;
            &lt;textarea class=&#039;form-control&#039; rows=&#039;3&#039;&gt;&lt;/textarea&gt;
        &lt;/div&gt;
    &lt;/form&gt;&quot;
    :buttons=&quot;[
        {
            text: &#039;Cancel&#039;,
            type: &#039;light&#039;,
            dismiss: true
        },
        {
            text: &#039;Save&#039;,
            type: &#039;success&#039;,
            attributes: &#039;onclick=&amp;quot;document.getElementById(\&#039;profileForm\&#039;).submit()&amp;quot;&#039;
        }
    ]&quot;
/&gt;

{# Top Offcanvas #}
&lt;div class=&quot;mt-3 mb-4&quot;&gt;
    &lt;button class=&quot;btn btn-light d-block&quot; type=&quot;button&quot; data-bs-toggle=&quot;offcanvas&quot; data-bs-target=&quot;#offcanvas-top&quot;&gt;
        Notifications
    &lt;/button&gt;
&lt;/div&gt;

&lt;twig:block-offcanvas
    id=&quot;offcanvas-top&quot;
    position=&quot;top&quot;
    title=&quot;Notifications&quot;
    :scrollable=&quot;true&quot;
    content=&quot;&lt;div class=&#039;list-group&#039;&gt;
        &lt;a href=&#039;#&#039; class=&#039;list-group-item list-group-item-action&#039;&gt;
            &lt;div class=&#039;d-flex w-100 justify-content-between&#039;&gt;
                &lt;h6 class=&#039;mb-1&#039;&gt;New message&lt;/h6&gt;
                &lt;small&gt;3 mins ago&lt;/small&gt;
            &lt;/div&gt;
            &lt;p class=&#039;mb-1&#039;&gt;You have a new support message.&lt;/p&gt;
        &lt;/a&gt;
        &lt;!-- More notifications... --&gt;
    &lt;/div&gt;&quot;
/&gt;

{# Bottom Offcanvas without Backdrop #}
&lt;div class=&quot;mt-2 mb-3&quot;&gt;
    &lt;button class=&quot;btn btn-light d-block&quot; type=&quot;button&quot; data-bs-toggle=&quot;offcanvas&quot; data-bs-target=&quot;#offcanvas-bottom&quot;&gt;
        Music Player
    &lt;/button&gt;
&lt;/div&gt;

&lt;twig:block-offcanvas
    id=&quot;offcanvas-bottom&quot;
    position=&quot;bottom&quot;
    :withBackdrop=&quot;false&quot;
    :showClose=&quot;false&quot;
    content=&quot;&lt;div class=&#039;d-flex align-items-center justify-content-between&#039;&gt;
        &lt;div class=&#039;d-flex align-items-center&#039;&gt;
            &lt;img src=&#039;/img/home/derafu-dev-programmer.png&#039; width=&#039;50&#039; height=&#039;50&#039; class=&#039;me-3&#039;&gt;
            &lt;div&gt;
                &lt;h6 class=&#039;mb-0&#039;&gt;Song Name&lt;/h6&gt;
                &lt;small&gt;Artist&lt;/small&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&#039;btn-group&#039;&gt;
            &lt;button class=&#039;btn btn-link&#039;&gt;&lt;i class=&#039;fas fa-backward&#039;&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;button class=&#039;btn btn-link&#039;&gt;&lt;i class=&#039;fas fa-play&#039;&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;button class=&#039;btn btn-link&#039;&gt;&lt;i class=&#039;fas fa-forward&#039;&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;&quot;
/&gt;

{# Offcanvas with Scroll and No Backdrop #}
&lt;div class=&quot;mt-2 mb-3&quot;&gt;
    &lt;button class=&quot;btn btn-light d-block&quot; type=&quot;button&quot; data-bs-toggle=&quot;offcanvas&quot; data-bs-target=&quot;#offcanvas-scroll&quot;&gt;
        Documentation
    &lt;/button&gt;
&lt;/div&gt;

&lt;twig:block-offcanvas
    id=&quot;offcanvas-scroll&quot;
    position=&quot;end&quot;
    title=&quot;Documentation&quot;
    :scrollable=&quot;true&quot;
    :withBackdrop=&quot;false&quot;
    content=&quot;&lt;div&gt;
        &lt;h4&gt;Introduction&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
        &lt;h4&gt;Getting Started&lt;/h4&gt;
        &lt;p&gt;Sed do eiusmod tempor incididunt...&lt;/p&gt;
        &lt;h4&gt;Configuration&lt;/h4&gt;
        &lt;p&gt;Ut enim ad minim veniam...&lt;/p&gt;
        &lt;!-- More content to demonstrate scroll --&gt;
    &lt;/div&gt;&quot;
    :buttons=&quot;[
        {
            text: &#039;Close&#039;,
            type: &#039;secondary&#039;,
            dismiss: true
        }
    ]&quot;
/&gt;


---

### Quote

Quotes with author and note.

&lt;twig:block-quote
    class=&quot;my-4&quot;
    content=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing &lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;elit&lt;/a&gt;.&quot;
    author=&quot;John Doe&quot;
    note=&quot;Quote&quot;
    image=&quot;/img/home/derafu-dev-programmer.png&quot;
/&gt;

{# Example with individual margins #}
&lt;twig:block-quote
    class=&quot;my-4&quot;
    content=&quot;Another example quote with custom margins.&quot;
    author=&quot;Jane Smith&quot;
    note=&quot;&lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;Quote example&lt;/a&gt;&quot;
/&gt;

{# Example without margins #}
&lt;twig:block-quote
    class=&quot;my-4&quot;
    content=&quot;A quote without special margins.&quot;
    author=&quot;Anonymous&quot;
/&gt;


---

### Scrollspy

Scrollspy component for navigation.

{# Define the contents for the sections #}
{% set section_content_introduccion %}
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. &lt;a href=&quot;https://www.example.com/&quot; target=&quot;_blank&quot;&gt;Quisquam, quos.&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;
{% endset %}

{% set section_content_features %}
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;strong&gt;Lorem  Ipsum&lt;/strong&gt; - Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Lorem  Ipsum&lt;/strong&gt; - Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Lorem  Ipsum&lt;/strong&gt; - Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Lorem  Ipsum&lt;/strong&gt; - Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Lorem  Ipsum&lt;/strong&gt; - Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
    &lt;/ul&gt;
{% endset %}

{% set section_content_options %}
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;code&gt;Lorem&lt;/code&gt;: Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;Lorem&lt;/code&gt;: Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;Lorem&lt;/code&gt;: Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;Lorem&lt;/code&gt;: Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;Lorem&lt;/code&gt;: Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
    &lt;/ul&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;
{% endset %}

{% set section_content_usage %}
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;
    &lt;ol&gt;
        &lt;li&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
    &lt;/ol&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;
{% endset %}

{% set section_content_advanced %}
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
        &lt;li&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.&lt;/li&gt;
    &lt;/ul&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.&lt;/p&gt;
{% endset %}

{# Example 1: Vertical Scrollspy #}
&lt;twig:block-scrollspy
    class=&quot;my-4 shadow-none&quot;
    style=&quot;--scrollspy-list-active-bg: #0066cc;&quot;
    height=&quot;100vh&quot;
    :cols=&quot;3&quot;
    :sections=&quot;[
        {
            id: &#039;introduction&#039;,
            title: &#039;Lorem ipsum dolor sit amet&#039;,
            content: section_content_introduction
        },
        {
            id: &#039;features&#039;,
            title: &#039;Lorem&#039;,
            content: section_content_features
        },
        {
            id: &#039;options&#039;,
            title: &#039;Lorem&#039;,
            content: section_content_options
        }
    ]&quot;
/&gt;

&lt;hr class=&quot;my-4&quot;/&gt;

{# Example 2: Horizontal Scrollspy #}
&lt;twig:block-scrollspy
    class=&quot;my-4 shadow &quot;
    style=&quot;--scrollspy-list-active-bg: #6610f2;&quot;
    height=&quot;300px&quot;
    orientation=&quot;horizontal&quot;
    :cols=&quot;12&quot;
    :sections=&quot;[
        {
            id: &#039;introduction-h&#039;,
            title: &#039;Lorem ipsum dolor sit amet&#039;,
            content: section_content_introduction,
        },
        {
            id: &#039;features-h&#039;,
            title: &#039;Lorem&#039;,
            content: section_content_features,
        },
        {
            id: &#039;options-h&#039;,
            title: &#039;Lorem&#039;,
            content: section_content_options,
        },
            {
            id: &#039;usage-h&#039;,
            title: &#039;Lorem&#039;,
            content: section_content_usage,
        }
    ]&quot;
/&gt;


---

### Stats

Statistics display with values and text.

&lt;twig:block-stats
    class=&quot;my-4&quot;
    :stats=&quot;[
        {
            value: &#039;$40.000&#039;,
            text: &#039;Base price up to quota of 2.000 &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;documents&lt;/a&gt;&#039;
        },
        {
            value: &#039;$15&#039;,
            text: &#039;Price per extra document above quota&#039;
        },
        {
            value: &#039;24/7&#039;,
            text: &#039;Technical support available&#039;
        },
        {
            value: &#039;99.9%&#039;,
            text: &#039;Guaranteed uptime&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-stats
    class=&quot;my-4&quot;
    :stats=&quot;[
        {
            value: &#039;$40.000&#039;,
            text: &#039;Base price up to quota of 2.000 documents&#039;
        },
        {
            value: &#039;$15&#039;,
            text: &#039;Price per extra document above quota&#039;
        },
        {
            value: &#039;24/7&#039;,
            text: &#039;Technical support available&#039;
        },
        {
            value: &#039;99.9%&#039;,
            text: &#039;Guaranteed uptime&#039;
        }
    ]&quot;
    textPosition=&quot;top&quot;
/&gt;

&lt;twig:block-stats
    class=&quot;my-4&quot;
    :stats=&quot;[
        {
            value: &#039;$40.000&#039;,
            text: &#039;Base price up to quota of 2.000 documents&#039;
        },
        {
            value: &#039;$15&#039;,
            text: &#039;Price per extra document above quota&#039;
        },
        {
            value: &#039;24/7&#039;,
            text: &#039;Technical support available&#039;
        },
        {
            value: &#039;99.9%&#039;,
            text: &#039;Guaranteed uptime&#039;
        },
        {
            value: &#039;99.9%&#039;,
            text: &#039;Guaranteed uptime&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-stats
    class=&quot;my-4&quot;
    :stats=&quot;[
        {
            value: &#039;1.000&#039;,
            text: &#039;Customers&#039;
        },
        {
            value: &#039;10&#039;,
            text: &#039;Years&#039;
        },
        {
            value: &#039;8/5&#039;,
            text: &#039;Technical support&#039;
        },
        {
            value: &#039;99.9%&#039;,
            text: &#039;Uptime&#039;
        },
        {
            value: &#039;5&#039;,
            text: &#039;Products&#039;
        },
        {
            value: &#039;3&#039;,
            text: &#039;Countries&#039;
        }
    ]&quot;
/&gt;


---

### Steps

Step-by-step guide component with variable steps and arrow design.

&lt;twig:block-steps
    class=&quot;my-4&quot;
    :steps=&quot;[
        {
            icon: &#039;fa-solid fa-list&#039;,
            title: &#039;Test Set&#039;,
            content: &#039;Standard DTE documents requested by the &lt;a href=\&#039;https://www.sii.cl/factura_electronica/factura_mercado/menu_certificacion.html\&#039; target=\&#039;_blank\&#039;&gt;SII&lt;/a&gt; are sent for validation.&#039;
        },
        {
            icon: &#039;fa-solid fa-file-lines&#039;,
            title: &#039;Simulation&#039;,
            content: &#039;Real DTE examples that the company will issue in production are sent to the SII.&#039;
        },
        {
            icon: &#039;fa-solid fa-arrows-left-right&#039;,
            title: &#039;Exchange&#039;,
            content: &#039;XML files associated with the response to a DTE exchange are sent to the SII.&#039;
        },
        {
            icon: &#039;fa-solid fa-file-pdf&#039;,
            title: &#039;PDF Samples&#039;,
            content: &#039;PDFs of all DTE documents from the test set and simulation are sent to the SII. &lt;a href=\&#039;#\&#039; class=\&#039;btn btn-primary\&#039;&gt;Link&lt;/a&gt;&#039;
        }
    ]&quot;
    arrowType=&quot;straight&quot;
/&gt;

&lt;twig:block-steps
    class=&quot;my-4&quot;
    :steps=&quot;[
        {
            icon: &#039;fa-solid fa-list&#039;,
            title: &#039;Test Set&#039;,
            content: &#039;Standard DTE documents requested by the &lt;a href=\&#039;https://www.sii.cl/factura_electronica/factura_mercado/menu_certificacion.html\&#039; target=\&#039;_blank\&#039;&gt;SII&lt;/a&gt; are sent for validation.&#039;
        },
        {
            icon: &#039;fa-solid fa-file-lines&#039;,
            title: &#039;Simulation&#039;,
            content: &#039;Real DTE examples that the company will issue in production are sent to the SII.&#039;
        },
        {
            icon: &#039;fa-solid fa-arrows-left-right&#039;,
            title: &#039;Exchange&#039;,
            content: &#039;XML files associated with the response to a DTE exchange are sent to the SII.&#039;
        },
        {
            icon: &#039;fa-solid fa-file-pdf&#039;,
            title: &#039;PDF Samples&#039;,
            content: &#039;PDFs of all DTE documents from the test set and simulation are sent to the SII.&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-steps
    class=&quot;my-4&quot;
    :steps=&quot;[
        {
            icon: &#039;fa-solid fa-list&#039;,
            title: &#039;Test Set&#039;,
            content: &#039;Standard DTE documents requested by the &lt;a href=\&#039;https://www.sii.cl/factura_electronica/factura_mercado/menu_certificacion.html\&#039; target=\&#039;_blank\&#039;&gt;SII&lt;/a&gt; are sent for validation.&#039;
        },
        {
            icon: &#039;fa-solid fa-arrows-left-right&#039;,
            title: &#039;Exchange&#039;,
            content: &#039;XML files associated with the response to a DTE exchange are sent to the SII.&#039;
        },
        {
            icon: &#039;fa-solid fa-file-pdf&#039;,
            title: &#039;PDF Samples&#039;,
            content: &#039;PDFs of all DTE documents from the test set and simulation are sent to the SII.&#039;
        }
    ]&quot;
    arrowType=&quot;straight&quot;
/&gt;

&lt;twig:block-steps
    class=&quot;my-4&quot;
    :steps=&quot;[
        {
            icon: &#039;fa-solid fa-list&#039;,
            title: &#039;Test Set&#039;,
            content: &#039;Standard DTE documents requested by the &lt;a href=\&#039;https://www.sii.cl/factura_electronica/factura_mercado/menu_certificacion.html\&#039; target=\&#039;_blank\&#039;&gt;SII&lt;/a&gt; are sent for validation.&#039;
        },
        {
            icon: &#039;fa-solid fa-arrows-left-right&#039;,
            title: &#039;Exchange&#039;,
            content: &#039;XML files associated with the response to a DTE exchange are sent to the SII.&#039;
        },
        {
            icon: &#039;fa-solid fa-file-pdf&#039;,
            title: &#039;PDF Samples&#039;,
            content: &#039;PDFs of all DTE documents from the test set and simulation are sent to the SII.&#039;
        }
    ]&quot;
/&gt;


---

### Table

Data table component with styling options.

{# Basic table #}
&lt;twig:block-table
    class=&quot;my-4&quot;
    caption=&quot;Table&quot;
    :headers=&quot;[
        [
            {&#039;text&#039;: &#039;ID&#039;, &#039;scope&#039;: &#039;col&#039;, &#039;align&#039;: &#039;center&#039;},
            {&#039;text&#039;: &#039;Name&#039;, &#039;scope&#039;: &#039;col&#039;},
            {&#039;text&#039;: &#039;Email&#039;, &#039;scope&#039;: &#039;col&#039;},
            {&#039;text&#039;: &#039;Status&#039;, &#039;scope&#039;: &#039;col&#039;, &#039;align&#039;: &#039;center&#039;}
        ]
    ]&quot;
    :rows=&quot;[
        [&#039;1&#039;, &#039;&lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;John Smith&lt;/a&gt;&#039;, &#039;john@example.com&#039;, &#039;Active&#039;],
        [&#039;2&#039;, &#039;Mary Johnson&#039;, &#039;mary@example.com&#039;, &#039;Inactive&#039;],
        [&#039;3&#039;, &#039;Charles Brown&#039;, &#039;charles@example.com&#039;, &#039;Pending&#039;]
    ]&quot;
    :columns=&quot;[
        {&#039;index&#039;: 0, &#039;width&#039;: &#039;80px&#039;, &#039;align&#039;: &#039;center&#039;},
        {&#039;index&#039;: 3, &#039;align&#039;: &#039;center&#039;, &#039;class&#039;: &#039;fw-bold&#039;}
    ]&quot;
    :rowClasses=&quot;[
        {&#039;col&#039;: 3, &#039;values&#039;: {
            &#039;Active&#039;: &#039;table-success&#039;,
            &#039;Inactive&#039;: &#039;table-danger&#039;,
            &#039;Pending&#039;: &#039;table-warning&#039;
        }}
    ]&quot;
/&gt;

{# Table with complex headers and footer #}
&lt;twig:block-table
    class=&quot;my-4&quot;
    caption=&quot;Sales Report 2024&quot;
    :headers=&quot;[
        [
            {text: &#039;Region&#039;, scope: &#039;col&#039;, rowspan: &#039;2&#039;},
            {text: &#039;Quarterly Sales&#039;, scope: &#039;col&#039;, colspan: &#039;4&#039;, class: &#039;text-center&#039;},
        ],
        [
            {text: &#039;Q1&#039;, scope: &#039;col&#039;, align: &#039;end&#039;},
            {text: &#039;Q2&#039;, scope: &#039;col&#039;, align: &#039;end&#039;},
            {text: &#039;Q3&#039;, scope: &#039;col&#039;, align: &#039;end&#039;},
            {text: &#039;Q4&#039;, scope: &#039;col&#039;, align: &#039;end&#039;}
        ]
    ]&quot;
    :rows=&quot;[
        [&#039;North&#039;, &#039;10,500&#039;, &#039;12,300&#039;, &#039;11,800&#039;, &#039;13,200&#039;],
        [&#039;South&#039;, &#039;8,900&#039;, &#039;9,200&#039;, &#039;9,800&#039;, &#039;10,100&#039;],
        [&#039;East&#039;, &#039;11,200&#039;, &#039;11,500&#039;, &#039;12,100&#039;, &#039;12,800&#039;]
    ]&quot;
    :footer=&quot;[
        [
            {text: &#039;Total&#039;, colspan: &#039;1&#039;},
            {text: &#039;30,600&#039;, class: &#039;fw-bold text-end&#039;},
            {text: &#039;33,000&#039;, class: &#039;fw-bold text-end&#039;},
            {text: &#039;33,700&#039;, class: &#039;fw-bold text-end&#039;},
            {text: &#039;36,100&#039;, class: &#039;fw-bold text-end&#039;}
        ]
    ]&quot;
    :columns=&quot;[
        {width: &#039;120px&#039;},
        {align: &#039;end&#039;},
        {align: &#039;end&#039;},
        {align: &#039;end&#039;},
        {align: &#039;end&#039;}
    ]&quot;
    :bordered=&quot;true&quot;
    :striped=&quot;true&quot;
    :hover=&quot;false&quot;
/&gt;

{# Table with actions and toggle #}
&lt;twig:block-table
    class=&quot;my-4&quot;
    :headers=&quot;[
        [
            {text: &#039;Product&#039;, scope: &#039;col&#039;},
            {text: &#039;Category&#039;, scope: &#039;col&#039;},
            {text: &#039;Stock&#039;, scope: &#039;col&#039;, align: &#039;center&#039;},
            {text: &#039;Price&#039;, scope: &#039;col&#039;, align: &#039;end&#039;}
        ]
    ]&quot;
    :rows=&quot;[
        [&#039;Laptop XPS&#039;, &#039;Computers&#039;, &#039;15&#039;, &#039;$1,299.99&#039;],
        [&#039;Wireless Mouse&#039;, &#039;Accessories&#039;, &#039;45&#039;, &#039;$29.99&#039;],
        [&#039;Monitor 27\&#039;\&#039;&#039;, &#039;Displays&#039;, &#039;8&#039;, &#039;$299.99&#039;]
    ]&quot;
    :actions=&quot;[
        {
            text: &#039;Export to Excel&#039;,
            icon: &#039;fas fa-file-excel&#039;,
            url: &#039;/export/excel&#039;
        },
        {
            text: &#039;Export to PDF&#039;,
            icon: &#039;fas fa-file-pdf&#039;,
            url: &#039;/export/pdf&#039;
        },
        {type: &#039;divider&#039;},
        {
            text: &#039;Print&#039;,
            icon: &#039;fas fa-print&#039;,
            onclick: &#039;window.print()&#039;
        }
    ]&quot;
    :toggleable=&quot;true&quot;
    :visible=&quot;true&quot;
    :maxHeight=&quot;300&quot;
    :hover=&quot;false&quot;
/&gt;

{# Minimalist responsive table #}
&lt;twig:block-table
    class=&quot;my-4&quot;
    :headers=&quot;[
        [
            {text: &#039;#&#039;, scope: &#039;col&#039;},
            {text: &#039;Title&#039;, scope: &#039;col&#039;},
            {text: &#039;Date&#039;, scope: &#039;col&#039;},
            {text: &#039;Status&#039;, scope: &#039;col&#039;}
        ]
    ]&quot;
    :rows=&quot;[
        [&#039;1&#039;, &#039;Document 1&#039;, &#039;2024-02-22&#039;, &#039;&lt;span class=\&#039;badge bg-success\&#039;&gt;Approved&lt;/span&gt;&#039;],
        [&#039;2&#039;, &#039;Document 2&#039;, &#039;2024-02-21&#039;, &#039;&lt;span class=\&#039;badge bg-warning\&#039;&gt;Pending&lt;/span&gt;&#039;],
        [&#039;3&#039;, &#039;Document 3&#039;, &#039;2024-02-20&#039;, &#039;&lt;span class=\&#039;badge bg-danger\&#039;&gt;Rejected&lt;/span&gt;&#039;]
    ]&quot;
    :small=&quot;true&quot;
    :striped=&quot;false&quot;
    :bordered=&quot;false&quot;
    :hover=&quot;false&quot;
/&gt;


---

### Tabs

Tabbed content interface, with horizontal and vertical layout.

{% set tab_content_1 %}
    &lt;twig:block-text-image
        title=&quot;Lorem ipsum dolor sit amet&quot;
        content=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet commodo odio. Mauris sagittis consequat quam interdum laoreet. Vivamus pretium pellentesque ligula, eget euismod turpis maximus sed.&quot;
        :buttons=&quot;[
            {
                text: &#039;Learn more&#039;,
                url: &#039;https://www.example.com&#039;
            },
            {
                text: &#039;Request a FREE trial period&#039;,
                url: &#039;https://www.example.com&#039;
            }
        ]&quot;
        image=&quot;/img/home/derafu-dev-programmer.png&quot;
        :insideTabs=&quot;true&quot;
    /&gt;
{% endset %}

{% set tab_content_2 %}
    &lt;h2&gt;Information&lt;/h2&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet commodo odio. Mauris sagittis consequat quam interdum laoreet. Vivamus pretium pellentesque ligula, eget euismod turpis maximus sed....&lt;/p&gt;
{% endset %}

&lt;twig:block-tabs
    class=&quot;my-4&quot;
    :tabs=&quot;[
        {
            id: &#039;features&#039;,
            title: &#039;Features&#039;,
            icon: &#039;fa-solid fa-list&#039;,
            content: tab_content_1
        },
        {
            id: &#039;info&#039;,
            title: &#039;Information&#039;,
            icon: &#039;fa-solid fa-info-circle&#039;,
            content: tab_content_2
        }
    ]&quot;
/&gt;

&lt;twig:block-tabs
    class=&quot;my-4&quot;
    position=&quot;vertical&quot;
    :withShadow=&quot;true&quot;
    :cols=&quot;3&quot;
    :tabs=&quot;[
        {
            id: &#039;features2&#039;,
            title: &#039;hello&#039;,
            icon: &#039;fa-solid fa-list&#039;,
            content: tab_content_1
        },
        {
            id: &#039;info2&#039;,
            title: &#039;Information&#039;,
            icon: &#039;fa-solid fa-info-circle&#039;,
            content: tab_content_2
        }
    ]&quot;
/&gt;


---

### Team

Team members display with roles and social links.

&lt;twig:block-team
    class=&quot;my-4&quot;
    :cols=&quot;1&quot;
    :members=&quot;[
        {
            name: &#039;John Doe&#039;,
            role: &#039;Founder&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            bio: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;elit.&lt;/a href&gt;&#039;,
            links: [
                {
                    icon: &#039;fa-brands fa-linkedin&#039;,
                    text: &#039;LinkedIn&#039;,
                    url: &#039;https://www.example.com&#039;
                },
                {
                    icon: &#039;fa-brands fa-github&#039;,
                    text: &#039;GitHub&#039;,
                    url: &#039;https://www.example.com&#039;
                }
            ]
        }
    ]&quot;
/&gt;

&lt;twig:block-team
    class=&quot;my-4&quot;
    :cols=&quot;2&quot;
    :members=&quot;[
        {
            name: &#039;John Doe&#039;,
            role: &#039;Founder&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            bio: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            links: [
                {
                    icon: &#039;fa-brands fa-linkedin&#039;,
                    text: &#039;LinkedIn&#039;,
                    url: &#039;https://www.example.com&#039;
                },
                {
                    icon: &#039;fa-brands fa-github&#039;,
                    text: &#039;GitHub&#039;,
                    url: &#039;https://www.example.com&#039;
                }
            ]
        },
        {
            name: &#039;Jane Smith&#039;,
            role: &#039;Co-Founder&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            bio: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            links: [
                {
                    icon: &#039;fa-brands fa-linkedin&#039;,
                    text: &#039;LinkedIn&#039;,
                    url: &#039;https://www.example.com&#039;
                }
            ]
        }
    ]&quot;
/&gt;

&lt;twig:block-team
    class=&quot;my-4&quot;
    :cols=&quot;3&quot;
    :members=&quot;[
        {
            name: &#039;John Doe&#039;,
            role: &#039;Founder&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            bio: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            links: [
                {
                    icon: &#039;fa-brands fa-linkedin&#039;,
                    text: &#039;LinkedIn&#039;,
                    url: &#039;https://www.example.com&#039;
                },
                {
                    icon: &#039;fa-brands fa-github&#039;,
                    text: &#039;GitHub&#039;,
                    url: &#039;https://www.example.com&#039;
                }
            ]
        },
        {
            name: &#039;Jane Smith&#039;,
            role: &#039;Co-Founder&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            bio: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            links: [
                {
                    icon: &#039;fa-brands fa-linkedin&#039;,
                    text: &#039;LinkedIn&#039;,
                    url: &#039;https://www.example.com&#039;
                }
            ]
        },
        {
            name: &#039;Mike Johnson&#039;,
            role: &#039;Developer&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            bio: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            links: [
                {
                    icon: &#039;fa-brands fa-github&#039;,
                    text: &#039;GitHub&#039;,
                    url: &#039;https://www.example.com&#039;
                }
            ]
        }
    ]&quot;
/&gt;

&lt;twig:block-team
    class=&quot;my-4&quot;
    :cols=&quot;4&quot;
    :members=&quot;[
        {
            name: &#039;John Doe&#039;,
            role: &#039;Founder&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            bio: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            links: [
                {
                    icon: &#039;fa-brands fa-linkedin&#039;,
                    text: &#039;LinkedIn&#039;,
                    url: &#039;https://www.example.com&#039;
                }
            ]
        },
        {
            name: &#039;Jane Smith&#039;,
            role: &#039;Co-Founder&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            bio: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            links: [
                {
                    icon: &#039;fa-brands fa-github&#039;,
                    text: &#039;GitHub&#039;,
                    url: &#039;https://www.example.com&#039;
                }
            ]
        },
        {
            name: &#039;Saul Goodman&#039;,
            role: &#039;HR&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            bio: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            links: [
                {
                    icon: &#039;fa-brands fa-linkedin&#039;,
                    text: &#039;LinkedIn&#039;,
                    url: &#039;https://www.example.com&#039;
                }
            ]
        },
        {
            name: &#039;Mike Johnson&#039;,
            role: &#039;Developer&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            bio: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#039;,
            links: [
                {
                    icon: &#039;fa-brands fa-github&#039;,
                    text: &#039;GitHub&#039;,
                    url: &#039;https://www.example.com&#039;
                }
            ]
        }
    ]&quot;
/&gt;


---

### Testimonials

Testimonials display with background and image.

&lt;twig:block-testimonials
    class=&quot;my-4&quot;
    :testimonials=&quot;[
        {
            background: &#039;/img/home/derafu-dev-programmer.png&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend. Fusce aliquet tempus gravida.&#039;,
            author: &#039;John Doe&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            note: &#039;Lorem ipsum&#039;,
            url: &#039;https://www.example.com&#039;
        },
        {
            background: &#039;/img/home/derafu-dev-programmer.png&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend. Fusce aliquet tempus gravida.&#039;,
            author: &#039;John Doe&#039;,
            note: &#039;Lorem ipsum&#039;,
            position: &#039;left&#039;
        },
        {
            background: &#039;/img/home/derafu-dev-programmer.png&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend. Fusce aliquet tempus gravida.&#039;,
            author: &#039;John Doe&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            url: &#039;http://www.example.com&#039;,
            position: &#039;right&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-testimonials
    class=&quot;my-4&quot;
    interval=&quot;2000&quot;
    :testimonials=&quot;[
        {
            background: &#039;/img/home/derafu-dev-programmer.png&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend. Fusce aliquet &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;tempus gravida.&lt;/a href&gt;&#039;,
            author: &#039;John Doe&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            note: &#039;Lorem ipsum&#039;,
            url: &#039;http://www.example.com&#039;
        },
        {
            background: &#039;/img/home/derafu-dev-programmer.png&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend. Fusce aliquet tempus gravida.&#039;,
            author: &#039;John Doe&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            url: &#039;http://www.example.com&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-testimonials
    class=&quot;my-4&quot;
    :testimonials=&quot;[
        {
            background: &#039;/img/home/derafu-dev-programmer.png&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend. Fusce aliquet tempus gravida.&#039;,
            author: &#039;John Doe&#039;,
            image: &#039;/img/home/derafu-dev-programmer.png&#039;,
            note: &#039;Lorem ipsum&#039;
        }
    ]&quot;
/&gt;


---

### Text Image

Combined text and image layout.

&lt;twig:block-text-image
    class=&quot;my-4&quot;
    image=&quot;/img/home/derafu-dev-programmer.png&quot;
    title=&quot;Lorem ipsum dolor sit amet&quot;
    content=&quot;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend.&lt;/p&gt;&lt;p&gt;Fusce aliquet tempus gravida. Nam ullamcorper libero ac velit pharetra, in volutpat sem vulputate. Integer quis suscipit nibh, non tempor enim. Nulla ipsum leo, vulputate nec dolor nec, aliquet porttitor nibh. Donec maximus tellus vitae ornare &lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;tellus&lt;/a&gt; dignissim.&lt;/p&gt;&quot;
    :buttons=&quot;[
        {
            text: &#039;Example.com 1&#039;,
            url: &#039;https://www.example.com&#039;
        },
        {
            text: &#039;Example.com 2&#039;,
            url: &#039;https://www.example.com&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-text-image
    class=&quot;my-4&quot;
    image=&quot;/img/home/derafu-dev-programmer.png&quot;
    imagePosition=&quot;left&quot;
    title=&quot;Lorem ipsum dolor sit amet&quot;
    content=&quot;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend.&lt;/p&gt;&lt;p&gt;Fusce aliquet tempus gravida. Nam ullamcorper libero ac velit pharetra, in volutpat sem vulputate. Integer quis suscipit nibh, non tempor enim. Nulla ipsum leo, vulputate nec dolor nec, aliquet porttitor nibh. Donec maximus tellus vitae ornare dignissim.&lt;/p&gt;&quot;
    :buttons=&quot;[
        {
            text: &#039;Example.com&#039;,
            url: &#039;https://www.example.com&#039;
        }
    ]&quot;
/&gt;


---

### Text Video

Combined text and video layout.

&lt;twig:block-text-video
    class=&quot;my-4&quot;
    video=&quot;https://www.youtube.com/watch?v=GOAEIMx39-w&quot;
    title=&quot;Lorem ipsum dolor sit amet&quot;
    content=&quot;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend.&lt;/p&gt;&lt;p&gt;Fusce aliquet tempus gravida. Nam ullamcorper libero ac velit pharetra, in volutpat sem vulputate. Integer quis suscipit nibh, non tempor enim. Nulla ipsum leo, vulputate nec dolor nec, aliquet porttitor nibh. Donec maximus tellus vitae ornare &lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;tellus&lt;/a&gt; dignissim.&lt;/p&gt;&quot;
    :buttons=&quot;[
        {
            text: &#039;Example.com 1&#039;,
            url: &#039;https://www.example.com&#039;
        },
        {
            text: &#039;Example.com 2&#039;,
            url: &#039;https://www.example.com&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-text-video
    class=&quot;my-4&quot;
    videoPosition=&quot;left&quot;
    video=&quot;https://www.youtube.com/watch?v=GOAEIMx39-w&quot;
    title=&quot;Lorem ipsum dolor sit amet&quot;
    content=&quot;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend.&lt;/p&gt;&lt;p&gt;Fusce aliquet tempus gravida. Nam ullamcorper libero ac velit pharetra, in volutpat sem vulputate. Integer quis suscipit nibh, non tempor enim. Nulla ipsum leo, vulputate nec dolor nec, aliquet porttitor nibh. Donec maximus tellus vitae ornare dignissim.&lt;/p&gt;&quot;
    :buttons=&quot;[
        {
            text: &#039;Example.com&#039;,
            url: &#039;https://www.example.com&#039;
        }
    ]&quot;
/&gt;


---

### Timeline

Chronological event display with configurable alignment.

&lt;twig:block-timeline
    class=&quot;my-4&quot;
    linePosition=&quot;center&quot;
    :events=&quot;[
        {
            date: &#039;2023-06-15&#039;,
            title: &#039;Official Partnership&#039;,
            content: &#039;We become Official RPA Partner in Chile.&#039;,
            icon: &#039;fa-solid fa-handshake fa-fw&#039;
        },
        {
            date: &#039;2022-11&#039;,
            title: &#039;International Expansion&#039;,
            content: &#039;We started receiving requests from clients outside Chile.&#039;,
            icon: &#039;fa-solid fa-globe fa-fw&#039;
        },
        {
            date: &#039;2022-06&#039;,
            title: &#039;International Project&#039;,
            content: &#039;Product development for clients outside Chile.&#039;,
            icon: &#039;fa-solid fa-globe fa-fw&#039;
        },
        {
            date: &#039;2021-05&#039;,
            title: &#039;New Products&#039;,
            content: &#039;Creation of Software 1, Software 2 and &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;Software 3&lt;/a&gt;.&#039;,
            icon: &#039;fa-solid fa-briefcase fa-fw&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-timeline
    class=&quot;my-4&quot;
    linePosition=&quot;left&quot;
    :events=&quot;[
        {
            date: &#039;2023-06-15&#039;,
            title: &#039;Official Partnership&#039;,
            content: &#039;We become Official RPA Partner in Chile.&#039;,
            icon: &#039;fa-solid fa-handshake fa-fw&#039;
        },
        {
            date: &#039;2022-11&#039;,
            title: &#039;International Expansion&#039;,
            content: &#039;We started receiving requests from clients outside Chile.&#039;,
            icon: &#039;fa-solid fa-globe fa-fw&#039;
        },
        {
            date: &#039;2022-06&#039;,
            title: &#039;International Project&#039;,
            content: &#039;Product development for clients outside Chile.&#039;,
            icon: &#039;fa-solid fa-globe&#039;
        },
        {
            date: &#039;2021-05&#039;,
            title: &#039;New Products&#039;,
            content: &#039;Creation of Software 1, Software 2 and &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;Software 3&lt;/a&gt;.&#039;,
            icon: &#039;fa-solid fa-briefcase&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-timeline
    class=&quot;my-4&quot;
    linePosition=&quot;right&quot;
    :events=&quot;[
        {
            date: &#039;2023-06-15&#039;,
            title: &#039;Official Partnership&#039;,
            content: &#039;We become Official RPA Partner in Chile.&#039;,
            icon: &#039;fa-solid fa-handshake&#039;
        },
        {
            date: &#039;2022-11&#039;,
            title: &#039;International Expansion&#039;,
            content: &#039;We started receiving requests from clients outside Chile.&#039;,
            icon: &#039;fa-solid fa-globe&#039;
        },
        {
            date: &#039;2022-06&#039;,
            title: &#039;International Project&#039;,
            content: &#039;Product development for clients outside Chile.&#039;,
            icon: &#039;fa-solid fa-globe fa-fw&#039;
        },
        {
            date: &#039;2021-05&#039;,
            title: &#039;New Products&#039;,
            content: &#039;Creation of Software 1, Software 2 and &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;Software 3&lt;/a&gt;.&#039;,
            icon: &#039;fa-solid fa-briefcase fa-fw&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-timeline
    class=&quot;my-4&quot;
    linePosition=&quot;left&quot;
    :events=&quot;[
        {
            date: &#039;2023&#039;,
            title: &#039;Official Partnership&#039;,
            content: &#039;We become Official RPA Partner in Chile.&#039;,
            icon: &#039;fa-solid fa-handshake&#039;
        },
        {
            date: &#039;2022&#039;,
            title: &#039;International Expansion&#039;,
            content: &#039;We started receiving requests from clients outside Chile.&#039;,
            icon: &#039;fa-solid fa-globe&#039;
        },
        {
            date: &#039;2022&#039;,
            title: &#039;International Project&#039;,
            content: &#039;Product development for clients outside Chile.&#039;,
            icon: &#039;fa-solid fa-globe fa-fw&#039;
        },
        {
            date: &#039;2021&#039;,
            title: &#039;New Products&#039;,
            content: &#039;Creation of Software 1, Software 2 and &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;Software 3&lt;/a&gt;.&#039;,
            icon: &#039;fa-solid fa-briefcase fa-fw&#039;
        }
    ]&quot;
/&gt;


---

### Title

Customizable title component.

&lt;twig:block-title
    class=&quot;my-4&quot;
    title=&quot;Title&quot;
    subtitle=&quot;Lorem ipsum dolor sit amet, consectetur &lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;adipiscing elit.&lt;/a&gt;&quot;
/&gt;

&lt;twig:block-title
    class=&quot;my-4&quot;
    title=&quot;Title&quot;
    subtitle=&quot;Lorem ipsum dolor sit amet, consectetur &lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;adipiscing elit.&lt;/a&gt;&quot;
    :border=&quot;true&quot;
/&gt;


---

### Toast

Toast notifications with customizable types.

{% set types = [&#039;primary&#039;, &#039;secondary&#039;, &#039;success&#039;, &#039;danger&#039;, &#039;warning&#039;, &#039;info&#039;, &#039;light&#039;, &#039;dark&#039;] %}
{% for type in types %}
    &lt;twig:block-toast
        class=&quot;my-2&quot;
        type=&quot;{{ type }}&quot;
        title=&quot;Toast type: {{ type }}&quot;
        content=&quot;Lorem ipsum dolor sit amet, consectetur &lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;adipiscing elit.&lt;/a href&gt;&quot;
        time=&quot;5 mins ago&quot;
    /&gt;
{% endfor %}


---

### Video Grid

Grid layout for multiple videos.

&lt;twig:block-video-grid
    class=&quot;my-4&quot;
    :cols=&quot;3&quot;
    :videos=&quot;[
        {
            video: &#039;https://www.youtube.com/watch?v=GOAEIMx39-w&#039;,
            title: &#039;Lorem ipsum&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore &lt;a href=\&#039;https://www.example.com/\&#039; target=\&#039;_blank\&#039;&gt;magna aliqua.&lt;/a&gt;&#039;,
            buttonText: &#039;Learn more&#039;,
            buttonUrl: &#039;#&#039;
        },
        {
            video: &#039;https://www.youtube.com/watch?v=GOAEIMx39-w&#039;,
            title: &#039;Lorem ipsum&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&#039;,
            buttonText: &#039;Learn more&#039;,
            buttonUrl: &#039;&#039;
        },
        {
            video: &#039;https://www.youtube.com/watch?v=GOAEIMx39-w&#039;,
            title: &#039;Lorem ipsum&#039;,
            content: &#039;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&#039;,
            buttonText: &#039;Learn more&#039;,
            buttonUrl: &#039;#&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-video-grid
    class=&quot;my-4&quot;
    :cols=&quot;2&quot;
    :videos=&quot;[
        {
            video: &#039;https://www.youtube.com/watch?v=GOAEIMx39-w&#039;
        },
        {
            video: &#039;https://www.youtube.com/watch?v=GOAEIMx39-w&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-video-grid
    class=&quot;my-4&quot;
    :cols=&quot;1&quot;
    :videos=&quot;[
        {
            video: &#039;https://www.youtube.com/watch?v=GOAEIMx39-w&#039;
        }
    ]&quot;
/&gt;


---

### Video

Video player component.

&lt;twig:block-video
    class=&quot;my-4&quot;
    size=&quot;normal&quot;
    align=&quot;center&quot;
    title=&quot;Lorem ipsum dolor sit amet&quot;
    video=&quot;https://www.youtube.com/watch?v=GOAEIMx39-w&quot;
    content=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat &lt;a href=&#039;https://www.example.com/&#039; target=&#039;_blank&#039;&gt;nulla pariatur.&lt;/a&gt;&quot;
    :buttons=&quot;[
        {
            text: &#039;Learn more&#039;,
            url: &#039;#&#039;
        }
    ]&quot;
/&gt;

&lt;twig:block-video
    class=&quot;my-4&quot;
    size=&quot;small&quot;
    align=&quot;center&quot;
    title=&quot;Lorem ipsum dolor sit amet&quot;
    video=&quot;https://www.youtube.com/watch?v=GOAEIMx39-w&quot;
    content=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.&quot;
    :buttons=&quot;[
        {
            text: &#039;Learn more&#039;,
            url: &#039;#&#039;
        }
    ]&quot;
/&gt;


---

## Symfony

Symfony

# Symfony

The package is not a bundle: three settings of your application register the components, their templates and their translations. They work with Symfony 8.

## Requirements

- `symfony/framework-bundle` and `symfony/twig-bundle`.
- `symfony/ux-twig-component`, with its bundle enabled (its recipe does it when you install it).

```bash
composer require derafu/twig-components
```

## Settings

### The templates

The templates of the components are in the `components` directory of `resources/templates`. Give that path to Twig, and Symfony UX finds them:

```yaml
# config/packages/twig.yaml
twig:
    paths:
        &#039;%kernel.project_dir%/vendor/derafu/twig-components/resources/templates&#039;: ~
```

### The translations

The texts of the components are translated in the catalogues of `resources/translations`. Give that path to the translator:

```yaml
# config/packages/translation.yaml
framework:
    translator:
        paths:
            - &#039;%kernel.project_dir%/vendor/derafu/twig-components/resources/translations&#039;
```

The catalogues are in Spanish (the texts of the components are their English ids). Set the locale of your application to use them:

```yaml
# config/packages/framework.yaml
framework:
    default_locale: es
```

### The components

The classes of the components are services that Symfony UX discovers by their `#[AsTwigComponent]` attribute. Register the directory with `autoconfigure`:

```yaml
# config/services.yaml
services:
    _defaults:
        autowire: true
        autoconfigure: true

    Derafu\TwigComponents\Component\:
        resource: &#039;../vendor/derafu/twig-components/src/Component/&#039;
```

## Use

With the three settings, the tags work in any template of the application:

{% verbatim %}
```twig
&lt;twig:block-alert type=&quot;success&quot; content=&quot;Saved.&quot; /&gt;
```
{% endverbatim %}

The page also needs the styles and the scripts of Bootstrap and Font Awesome, and the CSS of the components: see [Styles](styles).

## Strict Mode

The templates are written for `strict_variables`, the mode that Symfony has in `dev`: they read the optional keys of an item in a way that does not fail when the key is not there. The tests of the package render every component and every example of this documentation in that mode, in a Symfony kernel.


---

## Derafu

Derafu

# Derafu

[`derafu/twig`](https://www.derafu.dev/docs/ui/twig) creates a Twig environment without Symfony and registers Symfony UX Twig Components in it. This is how the components are used in a Derafu site.

```bash
composer require derafu/twig derafu/twig-components
```

`derafu/twig` does not know the components of this package, and this package does not depend on `derafu/twig`: the one that builds the environment is the one that gives them.

## Directly

Give the environment the templates of the package in `paths`, and the components in `components`. The directory of the classes has all of them:

```php
use Derafu\Twig\Provider\DirectoryComponentProvider;
use Derafu\Twig\Service\TwigService;

$vendor = __DIR__ . &#039;/vendor/derafu/twig-components&#039;;

$twig = new TwigService([
    &#039;paths&#039; =&gt; [__DIR__ . &#039;/templates&#039;, $vendor . &#039;/resources/templates&#039;],
    &#039;components&#039; =&gt; new DirectoryComponentProvider($vendor . &#039;/src/Component&#039;),
]);

$data = [];

echo $twig-&gt;renderFromString(&#039;&lt;twig:block-alert type=&quot;info&quot; content=&quot;Hello&quot; /&gt;&#039;, $data);
```

The `components` option also takes the classes of the components, or their instances (see [Components](https://www.derafu.dev/docs/ui/twig/components)).

## With the Container

The file `resources/config/twig-components-services.yaml` registers every component with the tag `derafu_twig.component`, and the translations of the package with the tag `derafu_translation.resource_provider`. Import it in your services:

```yaml
imports:
    - { resource: &#039;../vendor/derafu/twig-components/resources/config/twig-components-services.yaml&#039; }
```

The `components` option of `derafu/twig` takes that iterable (see [Components](https://www.derafu.dev/docs/ui/twig/components#with-the-container)), so the creator of the environment gives it with:

```yaml
components: !tagged_iterator derafu_twig.component
```

## With the Renderer

[`derafu/renderer`](https://www.derafu.dev/docs/ui/renderer) gives its `components` option to its Twig environment:

```php
use Derafu\Renderer\Factory\RendererFactory;
use Derafu\Twig\Provider\DirectoryComponentProvider;

$vendor = __DIR__ . &#039;/vendor/derafu/twig-components&#039;;

$renderer = RendererFactory::create([
    &#039;paths&#039; =&gt; [__DIR__ . &#039;/templates&#039;, $vendor . &#039;/resources/templates&#039;],
    &#039;components&#039; =&gt; new DirectoryComponentProvider($vendor . &#039;/src/Component&#039;),
]);

echo $renderer-&gt;renderFromString(&#039;&lt;twig:block-alert type=&quot;info&quot; content=&quot;Hello&quot; /&gt;&#039;);
```


---

## Styles

Styles

# Styles

The components are HTML with the classes of Bootstrap 5, the icons of Font Awesome 6 and the CSS of the package. A page that shows them needs the three.

## What the Page Needs

```html
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://www.derafu.dev/path/to/components.css&quot;&gt;

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
```

The CDN is one way to have Bootstrap and Font Awesome; use the one that your application uses.

## The CSS of the Package

`resources/css/components.css` imports the CSS of every component, which is in `resources/css/components`, one file per component (`block-alert.css`, `block-card-grid.css`...). Link `components.css` after Bootstrap and the `@import` of it are resolved relative to its path, so the directory `components` has to be next to it.

How the file gets to the page depends on the application: reference it in the CSS of the application (`@import &#039;../../vendor/derafu/twig-components/resources/css/components.css&#039;;`), copy the directory to where the application serves its assets, or give it to the asset system that the application has.

## Customizing

The CSS of the components reads the CSS variables of Bootstrap (`--bs-primary`, `--bs-body-color`, `--bs-border-color`...), so the theme of Bootstrap, and the variables that you set for it, are the ones of the components.

## The JavaScript

Twelve components use the JavaScript of Bootstrap through `data-bs-*` attributes, so they need `bootstrap.bundle.min.js` in the page:

`block-accordion`, `block-alert`, `block-gallery`, `block-header`, `block-image-grid`, `block-modal`, `block-offcanvas`, `block-scrollspy`, `block-table`, `block-tabs`, `block-testimonials` and `block-toast`.

The others are only HTML and CSS.


---

## Translations

Translations

# Translations

The components write their texts in English and translate them with the `trans` filter, in the domain `twig+intl-icu`: the label of the close button of an alert, the text of the buttons of a carousel, and so on. The messages of their errors are in the domain `errors`.

| Text | Domain |
| --- | --- |
| The texts of the components (`Close`, `Previous`, `Next`, `Actions`, `Logo`, ...) | `twig+intl-icu` |
| The messages of the errors of a component | `errors` |

The Spanish translations are the catalogues of the package, in `resources/translations`: `twig+intl-icu.es.php` and `errors+intl-icu.es.php`.

## Giving the Catalogues to the Translator

- **In Symfony**, the directory `resources/translations` is a path of the translator (see [Symfony](symfony#the-translations)).
- **In Derafu**, `Derafu\TwigComponents\Translation\TwigTranslationResourceProvider` gives it to the translator, with the tag `derafu_translation.resource_provider`, as [`derafu/translation`](https://www.derafu.dev/docs/core/translation) explains. The services file of the package already has it (see [Derafu](derafu#with-the-container)).

Without a translator, the texts are the English ones.

## The Errors

An error of a component is a translatable exception, `Derafu\TwigComponents\Exception\TwigComponentException`. It names the component and says what is wrong, and both are translated:

| Language | Message |
| --- | --- |
| English | `Component block-accordion: Item title is required.` |
| Spanish | `Componente block-accordion: El título del ítem es obligatorio.` |

## The Texts Are Checked

The tests of the package audit the messages of the code and the texts of the templates, with the tools of [`derafu/translation`](https://www.derafu.dev/docs/core/translation/lint): a text of a component without its translation, a translation that nothing uses, or an exception that is not translatable makes them fail.


---

## Development

Development

# Development

The package renders every example of [Components](components) as a page that opens in a browser, so a component can be seen while it is written.

## The Examples

The examples are the files `tests/fixtures/examples/block-*.html.twig`, one per component, with the data that the component can have. The tests render them with the strict mode of Twig in a Symfony kernel. The images they use are in `tests/fixtures/examples/assets`.

## The Pages

Running the tests of the examples saves, next to each example, an HTML page with its name:

```bash
vendor/bin/phpunit --filter ExamplesTest
```

`tests/fixtures/examples/block-alert.html.twig` gives `tests/fixtures/examples/block-alert.html`. The pages are not versioned.

Each page has Bootstrap 5 and Font Awesome 6 from a CDN, the HTML of the component, and a link to `resources/css/components.css` of the package by a relative path, so a change in the CSS is seen by reloading the page. The page opens from the file system.

## The Videos

The embeds of YouTube do not load from `file://` (they show the error 153, &quot;Video player configuration error&quot;): they need a page that is served by HTTP. Serve the directory of the package and open the page by its path:

```bash
php -S localhost:8000
```

`http://localhost:8000/tests/fixtures/examples/block-video.html`.

## The Quality of the Code

```bash
composer phpstan   # PHPStan, level 9.
composer phpcs     # The code style.
composer tests     # PHPUnit, with the coverage.
```


---
Last updated on 20/10/2026
#php