Front W - Pattern Library

Profile 

<div class="box">
    <div class="media media--responsive">
        <div class="media__figure" style="max-width: 210px;">

            <img src="/placeholder/400x400.jpg" srcset="/placeholder/800x600.jpg 740w,/placeholder/1200x800.jpg 1000w" alt="Alexander Marx" decoding="async" class="img-fluid" width=210 height=210>
        </div>
        <div class="media__body">
            <h3 class="h6 mb--none">Alexander Marx</h3>
            <p class="color--secondary">Student im 3. Fachsemester</p>
            <p>Ich bin der Meinung, dass ich mich mit keinem anderen Studiengang in der späteren Werbe-, Kommunikations- und Medienwelt besser aufstellen kann. Verbunden mit einem hochmodernen Campus und der praxisorientierten Lehre, habe ich hier den perfekten Studienort gefunden.</p>
        </div>
    </div>
</div>
 
<div class="box">
  <div class="media media--responsive">
    <div class="media__figure" style="max-width: 210px;">
      {% include "@image" with { image: image } %}
    </div>
    <div class="media__body">
      <h3 class="h6 mb--none">{{ name }}</h3>
      <p class="color--secondary">{{ position }}</p>
      {{ text|raw }}
    </div>
  </div>
</div>
 
{
  "id": "experience",
  "name": "Alexander Marx",
  "position": "Student im 3. Fachsemester",
  "text": "<p>Ich bin der Meinung, dass ich mich mit keinem anderen Studiengang in der späteren Werbe-, Kommunikations- und Medienwelt besser aufstellen kann. Verbunden mit einem hochmodernen Campus und der praxisorientierten Lehre, habe ich hier den perfekten Studienort gefunden.</p>",
  "image": {
    "src": "/placeholder/400x400.jpg",
    "alt": "Alexander Marx",
    "width": 210,
    "height": 210
  }
}