Front W - Pattern Library

Listing: Large 

<ul class="listing listing--lg">
    <li class="listing__item">
        <a class="listing__link" href="#">
            Infosheet Studienfach (PDF, 140 KB)
        </a>
    </li>
    <li class="listing__item">
        <a class="listing__link" href="#">
            Studienordnung (PDF, 81 KB)
            <svg class="icon listing__icon" aria-hidden="true" focusable="false" width="16" height="16">
                <use xlink:href="/assets/icons.svg#i-download" />
            </svg>
        </a>
    </li>
    <li class="listing__item">
        <a class="listing__link" href="#">
            Studienplan (Anhang zur Studienordnung) (PDF, 200 KB)
            <svg class="icon listing__icon" aria-hidden="true" focusable="false" width="16" height="16">
                <use xlink:href="/assets/icons.svg#i-download" />
            </svg>
        </a>
        <div class="listing__description body-text--small">
            <p>Lorem ipsum dolor sit amet <a href="#">consectetur adipisicing</a> elit. Cumque maxime praesentium quis numquam doloribus, dicta impedit quam nam consectetur porro quas consequuntur rerum magni corporis expedita non libero hic exercitationem.</p>
        </div>
    </li>
    <li class="listing__item">
        <a class="listing__link" href="#">
            Wegleitung
            <svg class="icon listing__icon" aria-hidden="true" focusable="false" width="16" height="16">
                <use xlink:href="/assets/icons.svg#i-external" />
            </svg>
        </a>
    </li>
    <li class="listing__item">
        <a class="listing__link" href="#">
            Link zum Studienfach
            <svg class="icon listing__icon" aria-hidden="true" focusable="false" width="16" height="16">
                <use xlink:href="/assets/icons.svg#i-external" />
            </svg>
        </a>
    </li>
</ul>
 
<ul class="listing{{ modifier ? ' listing--' ~ modifier }}">
  {% for item in items %}
  <li class="listing__item">
    <a class="listing__link" href="{{ item.url }}">
      {{ item.label }}
      {% if item.icon %}
        {% include '@icon' with { 'type': 'i-' ~ item.icon, classes: 'listing__icon' } %}
      {% endif %}
    </a>
    {% if item.description %}
      <div class="listing__description body-text--small">{{ item.description|raw }}</div>
    {% endif %}
  </li>
  {% endfor %}
</ul>
 
{
  "items": [
    {
      "label": "Infosheet Studienfach (PDF, 140 KB)",
      "url": "#"
    },
    {
      "label": "Studienordnung (PDF, 81 KB)",
      "url": "#",
      "icon": "download"
    },
    {
      "label": "Studienplan (Anhang zur Studienordnung) (PDF, 200 KB)",
      "url": "#",
      "icon": "download",
      "description": "<p>Lorem ipsum dolor sit amet <a href=\"#\">consectetur adipisicing</a> elit. Cumque maxime praesentium quis numquam doloribus, dicta impedit quam nam consectetur porro quas consequuntur rerum magni corporis expedita non libero hic exercitationem.</p>"
    },
    {
      "label": "Wegleitung",
      "url": "#",
      "icon": "external"
    },
    {
      "label": "Link zum Studienfach",
      "url": "#",
      "icon": "external"
    }
  ],
  "modifier": "lg"
}