DIA Frontend

Cards 

<!-- ### Begin: Element menu_card_list ### -->
<div id="c579" class="frame frame-default frame-type-menu_card_list frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Cards
                </h2>
            </header>

            <div class="card-menu card-menu card-menu-align-left card-menu-columns-3">
                <div class="card-menu-item">
                    <div class="card">
                        <div class="card-img-top">
                            <a href="#" target="_blank" title="Page 1" data-toggle="tooltip">

                                <picture>
                                    <img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
                                </picture>
                            </a>
                        </div>
                        <div class="card-body">

                            <h3 class="card-title">
                                <a href="#" target="_blank" title="Page 1" data-toggle="tooltip">

                                    Page 1

                                </a>
                            </h3>
                            <h4 class="card-subtitle">

                                From above

                            </h4>
                            <p class="card-text">
                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
                            </p>
                        </div>
                        <div class="card-footer">
                            <a href="#" target="_blank" class="card-link" title="Page 1" data-toggle="tooltip">
                                Read more
                            </a>
                        </div>
                    </div>

                </div>
                <div class="card-menu-item">
                    <div class="card">
                        <div class="card-img-top">
                            <a href="#" title="Page 2" data-toggle="tooltip">

                                <picture>
                                    <img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
                                </picture>
                            </a>
                        </div>
                        <div class="card-body">

                            <h3 class="card-title">
                                <a href="#" title="Page 2" data-toggle="tooltip">

                                    Page 2

                                </a>
                            </h3>
                            <h4 class="card-subtitle">

                                Cheers For The Years

                            </h4>
                            <p class="card-text">
                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
                            </p>
                        </div>
                        <div class="card-footer">
                            <a href="#" class="card-link" title="Page 2" data-toggle="tooltip">
                                Read more
                            </a>
                        </div>
                    </div>

                </div>
                <div class="card-menu-item">
                    <div class="card">
                        <div class="card-img-top">
                            <a href="#" title="Page 3" data-toggle="tooltip">

                                <picture>
                                    <img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
                                </picture>
                            </a>
                        </div>
                        <div class="card-body">

                            <h3 class="card-title">
                                <a href="#" title="Page 3" data-toggle="tooltip">

                                    Page 3

                                </a>
                            </h3>
                            <h4 class="card-subtitle">

                                Photo by Geran de Klerk

                            </h4>
                            <p class="card-text">
                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
                            </p>
                        </div>
                        <div class="card-footer">
                            <a href="#" class="card-link" title="Page 3" data-toggle="tooltip">
                                Read more
                            </a>
                        </div>
                    </div>

                </div>
                <div class="card-menu-item">
                    <div class="card">
                        <div class="card-img-top">
                            <a href="#" title="Page 4" data-toggle="tooltip">

                                <picture>
                                    <img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
                                </picture>
                            </a>
                        </div>
                        <div class="card-body">

                            <h3 class="card-title">
                                <a href="#" title="Page 4" data-toggle="tooltip">

                                    Page 4

                                </a>
                            </h3>
                            <h4 class="card-subtitle">

                                Bird eye’s view!

                            </h4>
                            <p class="card-text">
                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
                            </p>
                        </div>
                        <div class="card-footer">
                            <a href="#" class="card-link" title="Page 4" data-toggle="tooltip">
                                Read more
                            </a>
                        </div>
                    </div>

                </div>
                <div class="card-menu-item">
                    <div class="card">
                        <div class="card-img-top">
                            <a href="#" title="Page 5" data-toggle="tooltip">

                                <picture>
                                    <img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
                                </picture>
                            </a>
                        </div>
                        <div class="card-body">

                            <h3 class="card-title">
                                <a href="#" title="Page 5" data-toggle="tooltip">

                                    Page 5

                                </a>
                            </h3>
                            <h4 class="card-subtitle">

                                Photo by Nikita Maru

                            </h4>
                            <p class="card-text">
                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
                            </p>
                        </div>
                        <div class="card-footer">
                            <a href="#" class="card-link" title="Page 5" data-toggle="tooltip">
                                Read more
                            </a>
                        </div>
                    </div>

                </div>
                <div class="card-menu-item">
                    <div class="card">
                        <div class="card-img-top">
                            <a href="#" title="Page 6" data-toggle="tooltip">

                                <picture>
                                    <img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
                                </picture>
                            </a>
                        </div>
                        <div class="card-body">

                            <h3 class="card-title">
                                <a href="#" title="Page 6" data-toggle="tooltip">

                                    Page 6

                                </a>
                            </h3>
                            <h4 class="card-subtitle">

                                Big Sur Road Trip

                            </h4>
                            <p class="card-text">
                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
                            </p>
                        </div>
                        <div class="card-footer">
                            <a href="#" class="card-link" title="Page 6" data-toggle="tooltip">
                                Read more
                            </a>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
<!-- ### End: Element menu_card_list ### -->
 
{% extends "@wrapper-frame" %}

{% import "@macro-format" as format %}

{% set CType = 'menu_card_list' %}
{% set maxItems = maxItems|default(0) %}

{% block main %}
    {% include "@atom-header" %}

    {% if menu %}
        {# TODO: <f:variable name="imageConfig">{settings.responsiveimages.contentelements.menu_card_list.{data.pi_flexform.columns}}</f:variable>
        <bk2k:data.imageVariants as="variants" variants="{variants}" multiplier="{imageConfig.multiplier}" gutters="{imageConfig.gutters}" corrections="{imageConfig.corrections}" /> #}
        {# TODO: <f:render partial="Menu/SkipNavigation" arguments="{_all}" /> #}
        <div class="card-menu card-menu card-menu-align-{{ data.pi_flexform.align }} card-menu-columns-{{ data.pi_flexform.columns }}">
            {% for page in menu %}
                {% if (maxItems == 0) or (loop.index0 < maxItems) %}
                    <div class="card-menu-item">
                        <div class="card">
                            {% if page.files.0 %}
                                <div class="card-img-top">
                                    <a href="{{ page.link }}"{% if page.target %} target="{{ page.target }}"{% endif %} title="{{ page.title }}" data-toggle="tooltip">
                                        {% include "@atom-image" with { file: page.files.0 } %}
                                    </a>
                                </div>
                            {% endif %}
                            <div class="card-body">
                                {# TODO: {% if page.icon %}
                                    <div class="card-icon">
                                        {% if page.icon.0.extension == 'svg' %}
                                            <bk2k:inlineSvg image="{{ page.icon.0 }}" width="{{ settings.menucard.icon.width }}" height="{{ settings.menucard.icon.height }}" />
                                        {% else %}
                                            <f:image additionalAttributes="{loading: 'lazy'}" image="{{ page.icon.0 }}" alt="{{ page.icon.0.alternative }}" title="{{ page.icon.0.title }}" width="{{ settings.menucard.icon.width }}" height="{{ settings.menucard.icon.height }}" />
                                        {% endif %}
                                    </div>
                                {% endif %} #}
                                {% if page.title %}
                                    <h3 class="card-title">
                                        <a href="{{ page.link }}"{% if page.target %} target="{{ page.target }}"{% endif %} title="{{ page.title }}" data-toggle="tooltip">
                                            {{ format.crop(page.title, settings.menucard.title.crop) }}
                                        </a>
                                    </h3>
                                {% endif %}
                                {% if page.data.subtitle %}
                                    <h4 class="card-subtitle">
                                        {{ format.crop(page.data.subtitle, settings.menucard.subtitle.crop) }}
                                    </h4>
                                {% endif %}
                                {% if page.data.abstract %}
                                    <p class="card-text">{{ format.crop(page.data.abstract, settings.menucard.abstract.crop) }}</p>
                                {% endif %}
                            </div>
                            <div class="card-footer">
                                <a href="{{ page.link }}"{% if page.target %} target="{{ page.target }}"{% endif %} class="card-link" title="{{ page.title }}" data-toggle="tooltip">
                                    {% if data.readmore_label %}
                                        {{ data.readmore_label }}
                                    {% else %}
                                        more
                                    {% endif %}
                                </a>
                            </div>
                        </div>

                    </div>
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}

{% endblock %}
 
{
  "bodytext": null,
  "categories": null,
  "CType": null,
  "customId": null,
  "date": null,
  "frame_class": null,
  "header": "Cards",
  "header_color": null,
  "header_layout": 2,
  "header_link": null,
  "header_position": null,
  "header_style": null,
  "layout": null,
  "space_after_class": null,
  "space_before_class": null,
  "space_inner_after_class": null,
  "space_inner_before_class": null,
  "subheader": null,
  "target": null,
  "maxItems": null,
  "data": {
    "readmore_label": "Read more",
    "pi_flexform": {
      "align": "left",
      "columns": 3
    }
  },
  "settings": {
    "menucard": {
      "title": {
        "crop": 0
      },
      "subtitle": {
        "crop": 0
      },
      "abstract": {
        "crop": 0
      },
      "icon": {
        "width": 32,
        "height": 32
      }
    }
  },
  "menu": [
    {
      "title": "Page 1",
      "link": "#",
      "target": "_blank",
      "files": [
        {
          "holder": {
            "width": 640,
            "height": 360
          }
        }
      ],
      "icon": [
        {
          "title": null,
          "alternative": null,
          "extension": null
        }
      ],
      "data": {
        "subtitle": "From above",
        "abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
      }
    },
    {
      "title": "Page 2",
      "link": "#",
      "target": null,
      "files": [
        {
          "holder": {
            "width": 640,
            "height": 360
          }
        }
      ],
      "icon": {
        "title": null,
        "alternative": null,
        "extension": null
      },
      "data": {
        "subtitle": "Cheers For The Years",
        "abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
      }
    },
    {
      "title": "Page 3",
      "link": "#",
      "target": null,
      "files": [
        {
          "holder": {
            "width": 640,
            "height": 360
          }
        }
      ],
      "icon": {
        "title": null,
        "alternative": null,
        "extension": null
      },
      "data": {
        "subtitle": "Photo by Geran de Klerk",
        "abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
      }
    },
    {
      "title": "Page 4",
      "link": "#",
      "target": null,
      "files": [
        {
          "holder": {
            "width": 640,
            "height": 360
          }
        }
      ],
      "icon": {
        "title": null,
        "alternative": null,
        "extension": null
      },
      "data": {
        "subtitle": "Bird eye’s view!",
        "abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
      }
    },
    {
      "title": "Page 5",
      "link": "#",
      "target": null,
      "files": [
        {
          "holder": {
            "width": 640,
            "height": 360
          }
        }
      ],
      "icon": {
        "title": null,
        "alternative": null,
        "extension": null
      },
      "data": {
        "subtitle": "Photo by Nikita Maru",
        "abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
      }
    },
    {
      "title": "Page 6",
      "link": "#",
      "target": null,
      "files": [
        {
          "holder": {
            "width": 640,
            "height": 360
          }
        }
      ],
      "icon": {
        "title": null,
        "alternative": null,
        "extension": null
      },
      "data": {
        "subtitle": "Big Sur Road Trip",
        "abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
      }
    }
  ]
}

No notes defined.