Front W - Pattern Library

Site Intro: Portal Page 

<div class="container container--lg site-intro">
    <picture class="site-intro__background">
        <img src="/placeholder/start_lg.jpg" alt="">
    </picture>
    <div class="site-intro__content">
        <div class="portal">
            <a href="#" class="portal__upwards" title="Alle Studiengänge">
                <svg class="icon" aria-hidden="true" focusable="false" width="16" height="16">
                    <use xlink:href="/assets/icons.svg#i-subdirectory_arrow_up" />
                </svg>
                <span>Alle Studiengänge</span>
            </a>
            <div class="portal__title"><a href="#">International Management M.A.</a></div>
        </div>

        <p class="site-intro__lead"><span>At quo ex, accusantium eum non eaque nisi doloremque dignissimos quasi deleniti quidem reiciendis placeat cum facilis rerum modi maiores earum pariatur?</span></p>
    </div>
</div>
 
<div class="container container--lg site-intro{{ modifier is defined ? ' site-intro--' ~ modifier }}">
  {% if background is defined %}
    <picture class="site-intro__background">
      <img src="{{ background.src }}" alt="{{ background.alt }}">
    </picture>
  {% endif %}
  {% if image is defined %}
    <picture class="site-intro__image">
      <img src="{{ image.src }}" alt="{{ image.alt }}" with="300" height="200">
    </picture>
  {% endif %}
  <div class="site-intro__content">
    {% if portal is defined %}
    {% include  '@portal' with { 'portal': portal } %}
    {% endif %}

    {% if lead %}
    <p class="site-intro__lead"><span>{{ lead }}</span></p>
    {% endif %}
  </div>
</div>
 
{
  "lead": "At quo ex, accusantium eum non eaque nisi doloremque dignissimos quasi deleniti quidem reiciendis placeat cum facilis rerum modi maiores earum pariatur?",
  "background": {
    "src": "/placeholder/start_lg.jpg",
    "alt": "",
    "srcset": {
      "sm": "/placeholder/start_sm.jpg",
      "md": "/placeholder/start_md.jpg",
      "lg": "/placeholder/start_lg.jpg"
    }
  },
  "portal": {
    "back": {
      "label": "Alle Studiengänge",
      "url": "#"
    },
    "page": {
      "label": "International Management M.A.",
      "url": "#"
    }
  }
}