SIA Web Design Library

Entities

Entities

Use the Collection component to render an array of entities.

<div class='c-entities c-entities--logo c-entities--entities c-entities--organizations c-entities__entities container-fluid'>
    <ul class='c-entities__items u-list--inline u-list--unstyled'>
        <li class='c-entities__items__item '>

            <article class='c-organization organization type-organization c-organizations__organization c-organizations__organization--logo c-organization--logo'>

                <span class='c-logo c-organization__logo'>
                    <a href='http://www.erstestiftung.org/' class='c-logo__link ' target='_blank'>
                        <img class='c-logo__image' src='/images/logo-ERSTE-Stiftung.png' title='ERSTE Stiftung' alt='' />
                    </a>
                </span>
            </article>
        </li>
        <li class='c-entities__items__item '>

            <article class='c-organization organization type-organization c-organizations__organization c-organizations__organization--logo c-organization--logo'>

                <span class='c-logo c-organization__logo'>
                    <a href='https://www.wu.ac.at/en/' class='c-logo__link ' target='_blank'>
                        <img class='c-logo__image' src='/images/logo-wu.png' title='WU' alt='' />
                    </a>
                </span>
            </article>
        </li>
        <li class='c-entities__items__item '>

            <article class='c-organization organization type-organization c-organizations__organization c-organizations__organization--logo c-organization--logo'>

                <span class='c-logo c-organization__logo'>
                    <a href='https://impacthub.net/' class='c-logo__link ' target='_blank'>
                        <img class='c-logo__image' src='/images/logo-impact-hub.png' title='Impact Hub' alt='' />
                    </a>
                </span>
            </article>
        </li>
    </ul>

</div>
 
<div class='{{ get_component_class( display.component, display|merge( { modifiers: [ collection.display.view_mode, 'entities', collection.display.component ] } ) ) }}'>
    <ul class='c-{{ display.component }}__items {{ class( collection.display.listClass ) }} u-list--unstyled'>
        {% for item in collection.items %}
            <li class='c-{{ display.component }}__items__item {{ class( collection.display.itemClass ) }}'>
                {% if item.rendered %} 
                    {{ item.rendered }}
                {% else %}
                    {% if item.entityType %}
                        {% set itemEntityType = item.entityType %}
                    {% else %}
                        {% set itemEntityType = collection.entityType %}
                    {% endif %}
                    
                    {% if item.display %}
                        {% set itemDisplay = collection.display|merge( item.display ) %}
                    {% else %}
                        {% set itemDisplay = collection.display %}
                    {% endif %}
                    
                    {% include get_entity_template( itemEntityType, collection.display ) with item|merge( { entityType: itemEntityType, display: itemDisplay } ) %}
                {% endif %}
            </li>
        {% endfor %}
    </ul>

    {% if pager %}
        {% include get_template( 'pager', 'unit' ) with pager %}
    {% elseif more_link %}
        <p class="c-{{ display.component }}__more_link">
            {% include get_template( 'link', 'base' ) with more_link|merge( { display: { modifiers: [ 'forward', 'with-icon', 'with-icon--reversed' ] } } ) %}
        </p>
    {% endif %}
</div>
 
{
  "display": {
    "component": "entities",
    "class": [
      "container-fluid"
    ]
  },
  "collection": {
    "entityType": "organization",
    "display": {
      "component": "organizations",
      "view_mode": "logo",
      "listClass": [
        "u-list--inline"
      ]
    },
    "items": [
      {
        "entityType": "organization",
        "logo": {
          "thumbnail": {
            "src": "/images/logo-ERSTE-Stiftung.png",
            "title": "ERSTE Stiftung"
          },
          "url": "http://www.erstestiftung.org/"
        }
      },
      {
        "logo": {
          "thumbnail": {
            "src": "/images/logo-wu.png",
            "title": "WU"
          },
          "url": "https://www.wu.ac.at/en/"
        }
      },
      {
        "logo": {
          "thumbnail": {
            "src": "/images/logo-impact-hub.png",
            "title": "Impact Hub"
          },
          "url": "https://impacthub.net/"
        }
      }
    ]
  }
}