---
title: "Boxes"
description: "Large box display for information."
type: "docs"
category: "doc"
tags: []
authors: [Anonymous]
date: "2026-09-09"
last_update: "2026-09-09"
time_minutes: 1
draft: false
unlisted: false
url: "https://www.derafu.dev/docs/ui/twig/components/block-boxes"
---

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

<twig:block-boxes
    class="my-4"
    :boxes="[
        {
            icon: 'fa-solid fa-search',
            title: 'Lorem ipsum dolor sit amet',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            buttonText: 'Lorem ipsum',
            buttonUrl: '#'
        },
        {
            icon: 'fa-solid fa-file',
            title: 'Lorem ipsum dolor sit amet',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            buttonText: 'Lorem ipsum',
        }
    ]"
/>

<twig:block-boxes
    class="my-4"
    cols="3"
    :boxes="[
        {
            icon: 'fa-solid fa-search',
            title: 'Lorem ipsum dolor sit amet',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        },
        {
            icon: 'fa-solid fa-file',
            title: 'Lorem ipsum dolor sit amet',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            buttonText: 'Lorem ipsum',
            buttonUrl: '#'
        },
        {
            icon: 'fa-solid fa-file',
            title: 'Lorem ipsum dolor sit amet',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            buttonText: 'Lorem ipsum',
            buttonUrl: '#'
        }
    ]"
/>



---
Last updated on 09/09/2026