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

# Derafu Twig


---

## Introduction

UI Component and Extension Library

# UI Component and Extension Library

![GitHub last commit](https://img.shields.io/github/last-commit/derafu/twig/main)
![CI Workflow](https://github.com/derafu/twig/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)
![GitHub Issues](https://img.shields.io/github/issues-raw/derafu/twig)
![Total Downloads](https://poser.pugx.org/derafu/twig/downloads)
![Monthly Downloads](https://poser.pugx.org/derafu/twig/d/monthly)

**Derafu Twig** is a comprehensive UI component library for Twig, designed to work standalone or with any PHP framework. Built with Bootstrap 5 and Font Awesome 6, it provides a collection of reusable, customizable components for rapid web development.

## Features

- 🎨 **Rich Component Library**: Extensive collection of UI components including headers, footers, cards, grids, and more.
- 🎯 **Framework Agnostic**: Works with any PHP framework or standalone Twig.
- 🔧 **Highly Customizable**: Support for Bootstrap CSS variables for easy styling.
- 📱 **Responsive Design**: All components are mobile-first and fully responsive.
- 🧩 **Modular Architecture**: Components can be used independently or combined.
- 📦 **Bootstrap 5 Integration**: Leverages Bootstrap&#039;s grid system and utilities.
- 🎟️ **Font Awesome 6**: Integrated icon support.
- 🏷️ **MIT License**: Open-source and free to use.

## Component Categories

### Block Components

- **Layout**: Header, Footer, Grid.
- **Content**: Cards, Features (Grid, List, Icon, Table), Text with Image/Video.
- **Navigation**: Tabs, Steps, Timeline.
- **Interaction**: Accordion, CTA (Call to Action).
- **Showcasing**: Team, Testimonials, Hero, Image.
- **Comparison**: Tables, Boxes, Comparison grids.

## Extensions

- **Markdown**: render markdown content with `markdown` filter.

## Installation

Install the library using Composer:

```bash
composer require derafu/twig
```

## Basic Usage

1. Create the Twig environment with `TwigService` or register the components with `ComponentRegistrar`:

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

$options = [
    &#039;paths&#039; =&gt; [
        __DIR__ . &#039;/../templates&#039;,  // Path to the derafu-twig templates.
        __DIR__ . &#039;/pages&#039;,         // Path to your templates.
    ],
];

$twigService = new TwigService($options);

echo $twigService-&gt;render(&#039;example.html.twig&#039;);
```

2. Use components in your Twig templates:

```twig
{# Example using a card grid component #}
&lt;twig:block-card-grid
    :cols=&quot;3&quot;
    :cards=&quot;[
        {
            image: &#039;path/to/image.jpg&#039;,
            title: &#039;Card Title&#039;,
            content: &#039;Card content text&#039;,
            buttonText: &#039;Learn More&#039;,
            buttonUrl: &#039;#&#039;
        }
    ]&quot;
/&gt;
```

## Key Concepts

### Component Structure

Each component follows a consistent structure:

- PHP Class: Defines component properties and logic.
- Twig Template: Handles component rendering.
- CSS: Component-specific styles.

## Roadmap

- 🔌 More component variations.
- 📱 Enhanced mobile optimizations.
- 🎨 Additional theme presets.
- 🌐 Internationalization features.


---

## 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;


---
Last updated on 21/08/2026
#php