Front W - Pattern Library

News Item: With Categories 

<article class="news">
    <div class="news__media">
        <div class="frame frame--responsive">
            <img src="/placeholder/600x400.jpg" loading="lazy" alt="" class="lazyload img--fluid">
        </div>
    </div>
    <div class="news__content">
        <h2 class="news__title">
            <a href="#">Gastvortrag von Roman Wollscheid zur Financial Due Diligence</a>
        </h2>
        <div class="news__meta">
            <span class="news__published">04.07.2021</span>
        </div>
        <p class="news__lead">Herr Roman Wollscheid, Partner von PwC im Bereich Deals am Standort Düsseldorf, hat am 7. Juli 2021 im Rahmen des Projektmoduls „Unternehmenskäufe und Unternehmensumstrukturierungen“ von <a href="#">Prof. Dr. Peter C. Fischer</a> einen Gastvortrag gehalten.</p>

        <div class="news__categories">
            <ul class="list--inline">
                <li><a href="#" class="tag">Hochschulbibliothek</a>
                </li>
                <li><a href="#" class="tag">Coronavirus</a>
                </li>
                <li><a href="#" class="tag">Öffnungszeiten</a>
                </li>
                <li><a href="#" class="tag">Service</a>
                </li>
            </ul>
        </div>
    </div>
</article>
 
<article class="news{{ modifier ? ' news--' ~ modifier }}">
  <div class="news__media">
    <div class="frame frame--responsive">
      <img src="{{ image.src }}" loading="lazy" alt="{{ image.alt }}" class="lazyload img--fluid">
    </div>
    {% if important %}
    <span class="news__top-news">Top News</span>
    {% endif %}
  </div>
  <div class="news__content">
    <h2 class="news__title">
      <a href="{{ url }}">{{ title }}</a>
    </h2>
    <div class="news__meta">
      <span class="news__published">{{ public_start_at }}</span>
    </div>
    <p class="news__lead">{{ lead }}</p>

    {% if categories|length > 0 %}
    <div class="news__categories">
      <ul class="list--inline">
        {% for categorie in categories %}
        <li>{% include '@tag' with { label: categorie } %}</li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
  </div>
</article>
 
{
  "title": "Gastvortrag von Roman Wollscheid zur Financial Due Diligence",
  "url": "#",
  "lead": "Herr Roman Wollscheid, Partner von PwC im Bereich Deals am Standort Düsseldorf, hat am 7. Juli 2021 im Rahmen des Projektmoduls „Unternehmenskäufe und Unternehmensumstrukturierungen“ von <a href=\"#\">Prof. Dr. Peter C. Fischer</a> einen Gastvortrag gehalten.",
  "public_start_at": "04.07.2021",
  "image": {
    "src": "/placeholder/600x400.jpg",
    "alt": ""
  },
  "categories": [
    "Hochschulbibliothek",
    "Coronavirus",
    "Öffnungszeiten",
    "Service"
  ]
}