Card Grid
Grid layout for multiple cards.

Twig
It is a twig.

Twig
It is a twig.

Twig
It is a twig.

Twig
It is a twig.

Twig
It is a twig.
block-card-grid.html.twig
<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 27/07/2025
by Anonymous