Front W - Pattern Library

Media 

<div class="media">
    <div class="media__figure">

        <img src="/placeholder/800x600.jpg" srcset="/placeholder/800x600.jpg 740w,/placeholder/1200x800.jpg 1000w" alt="Bildbeschreibung" decoding="async" class="img-fluid" width=1440 height=800>
    </div>
    <div class="media__body">

        <h3>Hervorragende Karriereperspektiven</h3>
        <p>It is important to note the text is not intended to wrap around the image. In general, the amount of text used should be the same height as the image on large screens. This will, of course, differ if you use a large or small block size.</p>

    </div>
</div>
 
<div class="media{{ responsive ? ' media--responsive' }}{{ img_right ? ' media--reverse' }}{{ modifier ? ' media--' ~ modifier }}">
  <div class="media__figure">
    {% include "@image" with { image: {
      src: image.src,
      alt:  image.alt,
      lazy: true,
    }} %}
  </div>
  <div class="media__body">
    {{ content|raw }}
  </div>
</div>
 
{
  "image": {
    "src": "/placeholder/800x600.jpg",
    "alt": "Bildbeschreibung"
  },
  "content": "\n      <h3>Hervorragende Karriereperspektiven</h3>\n      <p>It is important to note the text is not intended to wrap around the image. In general, the amount of text used should be the same height as the image on large screens. This will, of course, differ if you use a large or small block size.</p>\n    "
}