© 2026 Leviy

Cards

Default card 
<div class="card">
    <div class="card-body">
        Default card
    </div>
</div>

Card with icon

account_circle
Card with header icon 
<div class="card">
    <span class="card-header-icon">
        <i class="material-icons-round">account_circle</i>
    </span>
    <div class="card-body">
        Card with header icon
    </div>
</div>

Details Card

For displaying an information card, we can now embed a card component. The component supports the possibility to use our macros, or each block can be filled with custom HTML.

info It is advised to use the Twig 'embed` function to include the template into a view.
This combines an {% include %} (with optional parameters) with the possibility to use a {% block %}

The details card has one optional parameter at the moment:

Card header
Argument type required? Explanation
id string optional The HTML id that will be assigned to the entire component.

Some card title

Some subtitle that displays underneath the card title 

{% embed '@leviy-templates/components/card-details.html.twig' with { id: 'some-id' } %}
    {% import '@leviy-templates/macros/buttons.html.twig' as buttons %}

    {% block card_title %} Some card title {% endblock %}
    {% block card_header_action %} {{- buttons.icon('edit') -}} {% endblock %}
    {% block card_subtitle %} Some subtitle that displays underneath the card title {% endblock %}
{% endembed %}

Filling the card-body with content

The main card body is also highly customisable. By default, the container has no padding or margin, so in the example below padding is added to compensate.

Some card title

Some content for this card
{% embed '@leviy-templates/components/card-details.html.twig' with { id: 'some-id' } %}
    {% block card_title %} Some card title {% endblock %}
    {% block card_content %}
        <div class="p-4">Some content for this card</div>
    {% endblock %}
{% endembed %}

Using the dedicated card-row macro

A macro was also created to fill the card-body with a specific layout. This macro has 3 required and 1 optional parameters:

Card body
Argument type required? Explanation
icon string required An icon that the is a visual representation of the label. Check iconography for a list of viable options.
label string required The label that describes the row contents.
value string required The actual value of the information to be displayed.
row action HTML or macro optional The action related to this card row.
(an edit button for example)

Next to this, two available options can be passed to the options argument:

Option type default Explanation
secondColumnClass string '' Add a class to the value column. For example: to distribute contents evenly, add the bootstrap class content-evenly-spaced here.
dataAttributes object {} An array/object with data-* attributes. Each key-value pair will be translated to a corresponding data-attribute key-value pair. Uses the general.data_attributes macro internally.
warning If you do not need a row-action, but you need to provide a data attribute, do so by setting the row-action to false. Not doing this will give an error.

In the example below you can see what the result is when running this macro multiple times, with different values:

Some card title

title label
value
title label
value
title label
value
title label
value
{% embed '@leviy-templates/components/card-details.html.twig' with { id: 'some-id' } %}
    {% from '@leviy-templates/macros/card-row.html.twig' import card_row %}
    {% from '@leviy-templates/macros/buttons.html.twig' import icon %}

    {% block card_title %} Some card title {% endblock %}
    {% block card_content %}
        {{ card_row('title', 'label', 'value') }}
        {{ card_row('title', 'label', 'value', icon('edit')) }}
        {{ card_row(
            'title',
            'label',
            'value',
            icon('edit'),
            {
                secondColumnClass: 'content-evenly-spaced',
                dataAttributes: { name: 'some-data-value'}
            }
        ) }}
        {{ card_row(
            'title',
            'label',
            'value',
            false,
            {
                dataAttributes: { name: 'some-data-value'}
            }
        ) }}
    {% endblock %}
{% endembed %}