---
title: "Card Grid"
description: "Grid layout for multiple cards."
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-card-grid"
---

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

<twig:block-card-grid
    class="my-4"
    :cols="4"
    :cards="[
        {
            image: '/img/home/derafu-dev-programmer.png',
            title: 'Twig',
            content: 'It is a twig.',
            buttonText: 'Learn about Twig',
            buttonUrl: 'https://twig.symfony.com'
        },
        {
            image: '/img/home/derafu-dev-programmer.png',
            title: 'Twig',
            content: 'It is a twig.',
            buttonText: 'Learn about Twig',
            buttonUrl: 'https://twig.symfony.com',
        },
        {
            image: '/img/home/derafu-dev-programmer.png',
            title: 'Twig',
            content: 'It is a twig.',
            buttonText: 'Learn about Twig',
        },
        {
            image: '/img/home/derafu-dev-programmer.png',
            title: 'Twig',
            content: 'It is a twig.',
            buttonText: 'Learn about Twig',
            buttonUrl: 'https://twig.symfony.com',
            buttonColor: 'success'
        }
    ]"
/>

<twig:block-card-grid
    class="my-4"
    :cols="3"
    :cards="[
        {
            image: '/img/home/derafu-dev-programmer.png',
            title: 'Twig',
            content: 'It is a twig.',
            buttonText: 'Learn about Twig',
            buttonUrl: 'https://twig.symfony.com',
            offset: 4
        }
    ]"
/>



---
Last updated on 09/09/2026