<!-- ### Begin: Element card-group ### -->
<div id="c79" class="frame frame-default frame-type-card-group 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">
Card
</h2>
</header>
<div class="card-group-element card-group-element-align-left card-group-element-columns-1">
<div class="card-group-element-item">
<div class="card">
<div class="card-img-top">
<a href="#">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#"> Card title
</a>
</h3>
<h4 class="card-subtitle">Card subtitle</h4>
Some quick example text to build on the card title and make up the bulk of the card's content.
</div>
<div class="card-footer">
<a href="#" class="btn btn-default" title="Go somewhere">
<span class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons">
<g>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z"></path>
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="7.875" y1="12.526" x2="11.4" y2="16.056"></line>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354"></path>
</g>
</g>
<g id="invisible_shape">
<rect fill="none" width="24" height="24"></rect>
</g>
</svg>
</span>
<span class="btn-text">
Go somewhere
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element card-group ### -->
{% extends records ? '@wrapper-frame' : '@wrapper-empty' %}
{% set CType = 'card-group' %}
{% set maxItems = maxItems|default(0) %}
{% block main %}
{% include '@atom-header' %}
{% if records %}
{# <f:variable name="imageConfig">{settings.responsiveimages.contentelements.card_group.{data.pi_flexform.columns}}</f:variable> #}
{# <bk2k:data.imageVariants as="variants" variants="{variants}" multiplier="{imageConfig.multiplier}" gutters="{imageConfig.gutters}" corrections="{imageConfig.corrections}" /> #}
<div class="card-group-element card-group-element-align-{{ pi_flexform.align }} card-group-element-columns-{{ pi_flexform.columns }}">
{% for item in records %}
{% if (maxItems == 0) or (loop.index0 < maxItems) %}
<div class="card-group-element-item">
<div class="card">
{% if item.image.0 %}
<div class="card-img-top">
{% if item.link %}
<a href="{{ item.link }}">
{% include '@atom-image' with {'file': item.image.0} %}
</a>
{% else %}
{% include '@atom-image' with {'file': item.image.0} %}
{% endif %}
</div>
{% endif %}
<div class="card-body">
<h3 class="card-title">
{% if item.link %}<a href="{{ item.link }}">{% endif %}
{{ item.header }}
{% if item.link %}</a>{% endif %}
</h3>
{% if item.subheader %}
<h4 class="card-subtitle">{{ item.subheader }}</h4>
{% endif %}
{% if item.bodytext %}
{% include template_from_string(item.bodytext) %}
{% endif %}
</div>
{% if item.link %}
{% if item.link_title %}
{% set linkTitle = item.link_title %}
{% else %}
{% set linkTitle = 'read more' %}
{% endif %}
<div class="card-footer">
<a href="{{ item.link }}" class="btn btn-{{ item.link_class }}" title="{{ linkTitle |trim }}">
{% if item.linkIcon.0 %}
<span class="btn-icon">
{{ item.linkIcon.0 }}
</span>
{% endif %}
<span class="btn-text">
{{ linkTitle }}
</span>
</a>
</div>
{% endif %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endblock %}
{
"bodytext": null,
"categories": null,
"CType": null,
"customId": null,
"date": null,
"frame_class": null,
"header": "Card",
"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,
"pi_flexform": {
"align": "left",
"columns": 1
},
"maxItems": null,
"records": [
{
"header": "Card title",
"subheader": "Card subtitle",
"bodytext": "Some quick example text to build on the card title and make up the bulk of the card's content.\n",
"image": [
{
"holder": {
"width": 640,
"height": 360
},
"properties": {
"title": "Image Title",
"alternative": "Alternative Title"
}
}
],
"link": "#",
"link_target": null,
"link_title": "Go somewhere",
"link_class": "default",
"linkIcon": [
"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" x=\"0px\" y=\"0px\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" enable-background=\"new 0 0 24 24\" xml:space=\"preserve\"><g id=\"Outline_Icons\"><g><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z\"></path><line fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" x1=\"7.875\" y1=\"12.526\" x2=\"11.4\" y2=\"16.056\"></line><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354\"></path></g></g><g id=\"invisible_shape\"><rect fill=\"none\" width=\"24\" height=\"24\"></rect></g></svg>"
]
}
]
}
.card {
color: $body-color;
box-shadow: $box-shadow;
a {
transition: $transition-base;
@include hover-focus {
color: darken($primary, 15%);
text-decoration: none;
}
}
}
No notes defined.