DIA Frontend

Icon Group 

<!-- ### Begin: Element  ### -->
<div id="c823" class="frame frame-default 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">

            <div class="icongroup icongroup-align-left icongroup-columns-2 icongroup-iconposition-">
                <div class="icongroup-item">
                    <div class="icongroup-item-icon">

                        <svg class="facebook-special" height="32px" width="32px" style="fill: #4267B2;">
                            <use href="../../common/img/svg/symbolSprite.svg#social-facebook-26x26"></use>
                        </svg>
                    </div>
                    <div class="icongroup-item-text">
                        <h4 class="icongroup-item-text-header">
                            <span>Pellentesque habitant morbi</span>
                        </h4>
                        <p class="icongroup-item-text-subheader">Vestibulum dapibus nunc ac augue</p>
                        <p><small>Vestibulum dapibus nunc ac augue</small></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ### End: Element  ### -->
 
{% extends records ? '@wrapper-frame' : '@wrapper-empty' %}

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

    {% if records %}
        <div class="icongroup icongroup-align-{{ data.pi_flexform.align }} icongroup-columns-{{ data.pi_flexform.columns }} icongroup-iconposition-{{ data.pi_flexform.icon_position }}">
            {% for item in records %}
                <div class="icongroup-item">
                    {% if item.icon or item.iconFile %}
                        <div class="icongroup-item-icon">
                            {% if item.iconFile %}
                                {{ item.iconFile }}
                            {% else %}
                                {% include '@atom-icon' with item %}
                            {% endif %}
                        </div>
                    {% endif %}
                    <div class="icongroup-item-text">
                        <h4 class="icongroup-item-text-header">
                            {% if item.link %}
                                <a href="{{ item.link }}" title="{{ item.linkTitle }}">
                                    {{ item.header }}
                                </a>
                            {% else %}
                                <span>{{ item.header }}</span>
                            {% endif %}
                        </h4>
                        {% if item.subheader %}
                            <p class="icongroup-item-text-subheader">{{ item.subheader }}</p>
                        {% endif %}
                        {% if item.bodytext %}
                            {% include template_from_string(item.bodytext) %}
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}
 
{
  "bodytext": null,
  "categories": null,
  "CType": null,
  "customId": null,
  "date": null,
  "frame_class": null,
  "header": null,
  "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,
  "data": {
    "pi_flexform": {
      "align": "left",
      "columns": 2,
      "icon_position": null
    }
  },
  "records": [
    {
      "header": "Pellentesque habitant morbi",
      "subheader": "Vestibulum dapibus nunc ac augue",
      "bodytext": "<p><small>Vestibulum dapibus nunc ac augue</small></p>",
      "link": null,
      "linkTitle": "Lorem ipsum",
      "class": "facebook-special",
      "icon": "social-facebook-26x26",
      "height": "32px",
      "width": "32px",
      "fill": "#4267B2"
    }
  ]
}

No notes defined.