Front W - Pattern Library

Card 

<div class="card">
    <div class="card__media">
        <div class="frame frame--16by9">
            <img src="/placeholder/600x400.jpg" alt="Bildbeschreibung" loading="lazy">
        </div>
    </div>
    <div class="card__body">
        <h3 class="card__title">So ist das Studium aufgebaut</h3>
        <div class="card__text">
            <p>Informieren Sie sich über den Studiengang, Berufsperspektiven und Dozenten im Studiengangsprofil.</p>
        </div>
    </div>
</div>
 
<div class="card{{ modifier ? ' card--' ~ modifier }}">
  {% if image is defined %}
  <div class="card__media">
    <div class="frame frame--16by9">
      <img src="{{ image.src }}" alt="{{ image.alt }}" loading="lazy">
    </div>
  </div>
  {% endif %}
  <div class="card__body">
    {% if title %}<{{ level }} class="card__title">{% if url is defined %}<a href="{{ url }}">{% endif %}{{ title }}{% if url is defined %}</a>{% endif %}</{{ level }}>{% endif %}
    <div class="card__text">{{ text|raw }}</div>
  </div>
</div>
 
{
  "level": "h3",
  "image": {
    "src": "/placeholder/600x400.jpg",
    "alt": "Bildbeschreibung"
  },
  "title": "So ist das Studium aufgebaut",
  "text": "<p>Informieren Sie sich über den Studiengang, Berufsperspektiven und Dozenten im Studiengangsprofil.</p>"
}