Front W - Pattern Library

Card Grid: Default 

<div class="cluster cluster--2">
    <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">Informationen vor dem Studienstart</h3>
            <div class="card__text">
                <p>Tipps zur Studienvorbereitung, zur Einführungswoche und zu weiteren Serviceangeboten am Fachbereich Wirtschaftswissenschaften.</p>
            </div>
        </div>
    </div>
    <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">Vielseitiges Hochschulleben kennenlernen</h3>
            <div class="card__text">
                <p>An der Hochschule Düsseldorf haben Sie eine große Bandbreite an Möglichkeiten, Ihren Hochschulalltag zu gestalten.</p>
            </div>
        </div>
    </div>
    <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">Internationale Studieninteressierte</h3>
            <div class="card__text">
                <p>Sie können sich auch mit einer ausländischen Hochschulzugangs­berechtigung bei uns bewerben. Dafür gelten besondere Regeln an der Hochschule Düsseldorf.</p>
            </div>
        </div>
    </div>
</div>
 
<div class="cluster{{ columns ? ' cluster--' ~ columns }}">
  {% for card in cards %}
    {% include '@card' with {
      image: card.image,
      title: card.title,
      text: card.text,
    } %}
  {% endfor %}
</div>
 
{
  "columns": 2,
  "cards": [
    {
      "image": {
        "src": "/placeholder/600x400.jpg",
        "alt": "Bildbeschreibung"
      },
      "title": "Informationen vor dem Studienstart",
      "text": "\n          <p>Tipps zur Studienvorbereitung, zur Einführungswoche und zu weiteren Serviceangeboten am Fachbereich Wirtschaftswissenschaften.</p>\n        "
    },
    {
      "image": {
        "src": "/placeholder/600x400.jpg",
        "alt": "Bildbeschreibung"
      },
      "title": "Vielseitiges Hochschulleben kennenlernen",
      "text": "\n          <p>An der Hochschule Düsseldorf haben Sie eine große Bandbreite an Möglichkeiten, Ihren Hochschulalltag zu gestalten.</p>\n        "
    },
    {
      "image": {
        "src": "/placeholder/600x400.jpg",
        "alt": "Bildbeschreibung"
      },
      "title": "Internationale Studieninteressierte",
      "text": "\n          <p>Sie können sich auch mit einer ausländischen Hochschulzugangs­berechtigung bei uns bewerben. Dafür gelten besondere Regeln an der Hochschule Düsseldorf.</p>\n        "
    }
  ]
}