Front W - Pattern Library

Stage: Callout Left 

<div class="stage stage--callout-left">
    <div class="stage__image">

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

        <h2 class="h3">Ihr Traum ist eine internationale Management-Karriere?</h2>
        <p>Dann bietet Ihnen der Master International Management die besten Voraussetzungen dafür. Der Studiengang Master of Arts in International Management zeichnet sich durch den Dreiklang Internationalität, Wissenschaftlichkeit und Anwendungsbezogenheit aus.</p>

        <a href="#" class="cta-link">Zum Profil</a>
    </div>
</div>
 
<div class="stage {{ modifier ? 'stage--' ~ modifier : null }}">
  <div class="stage__image">
    {% include "@image" %}
  </div>
  <div class="stage__content prose">
    {{ content|raw }}
    {% if cta %}
    <a href="{{ cta.url }}" class="cta-link">{{ cta.label }}</a>
    {% endif %}
  </div>
</div>
 
{
  "image": {
    "src": "/placeholder/800x600.jpg",
    "srcset": {
      "md": "/placeholder/800x600.jpg",
      "lg": "/placeholder/1200x800.jpg"
    },
    "alt": "",
    "lazy": true
  },
  "content": "\n      <h2 class=\"h3\">Ihr Traum ist eine internationale Management-Karriere?</h2>\n      <p>Dann bietet Ihnen der Master International Management die besten Voraussetzungen dafür.  Der Studiengang Master of Arts in International Management zeichnet sich durch den Dreiklang Internationalität, Wissenschaftlichkeit und Anwendungsbezogenheit aus.</p>\n    ",
  "cta": {
    "url": "#",
    "label": "Zum Profil"
  },
  "modifier": "callout-left"
}