BBH

Teaser 

<div class="
  c-teaser

  

  
">

    <div class="c-teaser__image">
        <a href="/">

            <img class="
    c-image

    
  " src="../../img/placeholder/500x300/image_3.jpg" alt="Lorem alt ipsum" />

        </a>
    </div>

    <div class="c-teaser__compact">

        <p class="text-style-small">Lorem ipsum,Dolor sitament lorem,Consetetur sadipscing elitr,Eirmod tempor invidunt ut anamen</p>

        <h3 class="text-style-subheadline-4"><a href="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>

        <p><a href="/">In nulla posuere sollicitudin aliquam ultrices sagittis orci.</a></p>

        <p class="hidden medium:block"><a href="/">Quisque et nisi purus. Nulla massa erat, rutrum ac sagittis ut, pharetra vel risus. Duis tortor justo. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>

        <div class="c-icon-tag">
            <span class="c-icon-tag__icon">

                <svg class="text-neutral-grey-02">
                    <use xlink:href="#job"></use>
                </svg>

            </span>
            <p class="c-icon-tag__label text-style-mini">
                Lorem ipsum
            </p>
        </div>

        <div class="c-icon-tag">
            <span class="c-icon-tag__icon">

                <svg class="text-neutral-grey-02">
                    <use xlink:href="#cal"></use>
                </svg>

            </span>
            <p class="c-icon-tag__label text-style-mini">
                Lorem ipsum
            </p>
        </div>

        <div class="c-icon-tag">
            <span class="c-icon-tag__icon">

                <svg class="text-neutral-grey-02">
                    <use xlink:href="#time"></use>
                </svg>

            </span>
            <p class="c-icon-tag__label text-style-mini">
                Lorem ipsum
            </p>
        </div>

        <div class="c-icon-tag">
            <span class="c-icon-tag__icon">

                <svg class="text-neutral-grey-02">
                    <use xlink:href="#cal"></use>
                </svg>

            </span>
            <p class="c-icon-tag__label text-style-mini">
                Gultigkeit: 01.01.2024 – 02.02.3024
            </p>
        </div>

        <div class="c-icon-tag">
            <span class="c-icon-tag__icon">

                <svg class="text-neutral-grey-02">
                    <use xlink:href="#heart-out"></use>
                </svg>

            </span>
            <p class="c-icon-tag__label text-style-mini">
                Entfernen
            </p>
        </div>

        <div class="c-icon-link-container">

            <div class="c-icon-link">
                <span class="c-icon-link__icon">

                    <svg class="text-neutral-grey-02">
                        <use xlink:href="#arw-right"></use>
                    </svg>

                </span>
                <a href="/" class="c-icon-link__label">

                    <span>Lorem ipsum</span>

                    <span><strong>Sadipscing elitr</strong></span>

                </a>
            </div>

            <div class="c-icon-link">
                <span class="c-icon-link__icon">

                    <svg class="text-neutral-grey-02">
                        <use xlink:href="#arw-right"></use>
                    </svg>

                </span>
                <a href="/" class="c-icon-link__label">

                    <span>Nonumy eirmod tempor</span>

                    <span><strong>Dolor sitament lorem</strong></span>

                </a>
            </div>

            <div class="c-icon-link">
                <span class="c-icon-link__icon">

                    <svg class="text-neutral-grey-02">
                        <use xlink:href="#arw-right"></use>
                    </svg>

                </span>
                <a href="/" class="c-icon-link__label">

                    <span>Lorem ipsum</span>

                    <span><strong>Lorem ipsum</strong></span>

                </a>
            </div>

            <div class="c-icon-link">
                <span class="c-icon-link__icon">

                    <svg class="text-neutral-grey-02">
                        <use xlink:href="#arw-right"></use>
                    </svg>

                </span>
                <a href="/" class="c-icon-link__label">

                    <span>Alle anzeigen</span>

                </a>
            </div>
        </div>

    </div>

    <div class="c-teaser__bottom">

        <p class="medium:hidden"><a href="/">Quisque et nisi purus. Nulla massa erat, rutrum ac sagittis ut, pharetra vel risus. Duis tortor justo. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</a></p>

        <div class="c-price">
            <span class="c-price__old">€ 20</span>
            <span class="c-price__new">€ 15</span>
        </div>

        <div class="grow-0">

            <button class="
    c-button
    c-button--primary
    c-button--outlined
    c-button--large

    

    
  ">

                <span class="
        c-button__label

        

      ">Jetzt bestellen</span>

            </button>
        </div>

    </div>

</div>
 
{% if not(include) %}
{% set include = ['image', 'kicker', 'title', 'text', 'iconlink', 'icontag-job', 'icontag-event', 'icontag-offer', 'icontag-unfavorite', 'price', 'text-long', 'cta'] %}
{% endif %}

{% set rnd4 = [0,1,2,3] | random %}
{% set rnd19 = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19] | random %}

{% if not(image) %}
{% set image = '/img/placeholder/500x300/image_' + rnd19 + '.jpg' %}
{% endif %}

{% if not(kicker) %}
{% set kicker = [
  'Lorem ipsum',
  'Dolor sitament lorem',
  'Consetetur sadipscing elitr',
  'Eirmod tempor invidunt ut anamen'
] %}
{% endif %}

{% if not(title) %}
{% set title = [
  'Lorem ipsum dolor sit amet',
  'Duis aute irure dolor in reprehenderit in voluptate',
  'Ut enim ad minim veniam, quis nostrud',
  'Nonumy eirmod tempor invidunt ut anamen'
][rnd4] %}
{% endif %}

{% if not(text) %}
{% set text = [
  'Leo in vitae turpis massa sed elementum. Facilisis gravida neque convallis in nisl nisi scelerisque.',
  'Enim lobortis scelerisque fermentum dui faucibus in ornare adipiscing diam donec adipiscing tristique risus nec feugiat.',
  'Beque volutpat ac tincidunt vitae semper quis lectus nulla. Nullam vehicula ipsum a arcu.',
  'In nulla posuere sollicitudin aliquam ultrices sagittis orci.'
][rnd4] %}
{% endif %}

{% if not(text_long) %}
{% set text_long = [
  'Lorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitament. Lorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitamentLorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitamentLorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitament.',
  'Donec aliquet lacus vel nunc euismod dictum ornare quis augue. Aliquam vel laoreet ligula, nec vehicula justo. Morbi venenatis porttitor mauris, id iaculis risus rhoncus eget. Maecenas egestas ultricies ipsum nec tempus. Aliquam ultricies mauris at erat porttitor, et posuere orci egestas.',
  'Sed sed urna turpis. Sed vel varius ex. Suspendisse semper erat quis risus dignissim ultrices. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.',
  'Quisque et nisi purus. Nulla massa erat, rutrum ac sagittis ut, pharetra vel risus. Duis tortor justo. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.'
][rnd4] %}
{% endif %}

{% if not(cta) %}
{% set cta = 'Jetzt bestellen' %}
{% endif %}

<div class="
  c-teaser

  {% if on_small.image_left %}
  c-teaser--on-small:image-left
  {% endif %}

  {% if on_all.image_left %}
  c-teaser--on-all:image-left
  {% endif %}
">

  {% if 'image' in include %}
    <div class="c-teaser__image">
      <a href="/">
        {% render '@image', { src: image } %}
      </a>
    </div>
  {% endif %}

  <div class="c-teaser__compact">
    {% if 'kicker' in include %}
      <p class="text-style-small">{{ kicker }}</p>
    {% endif %}

    {% if 'title' in include %}
      <h3 class="text-style-subheadline-4"><a href="/">{{ title }}</a></h3>
    {% endif %}

    {% if 'text' in include %}
      <p><a href="/">{{ text }}</a></p>
    {% endif %}

    {% if 'text-long' in include %}
      <p class="hidden medium:block"><a href="/">{{ text_long }}</a></p>
    {% endif %}

    {% if 'icontag-job' in include %}
      {% render '@icon-tag', { icon: 'job', labelClass: 'text-style-mini' } %}
    {% endif %}

    {% if 'icontag-event' in include %}
      {% render '@icon-tag', { icon: 'cal', labelClass: 'text-style-mini'} %}
      {% render '@icon-tag', { icon: 'time', labelClass: 'text-style-mini'} %}
    {% endif %}

    {% if 'icontag-offer' in include %}
      {% render '@icon-tag', { icon: 'cal', labelClass: 'text-style-mini', label: 'Gultigkeit: 01.01.2024 – 02.02.3024'} %}
    {% endif %}

    {% if 'icontag-unfavorite' in include %}
      {% render '@icon-tag', { icon: 'heart-out', labelClass: 'text-style-mini', label: 'Entfernen' } %}
    {% endif %}

    {% if 'iconlink' in include %}
      <div class="c-icon-link-container">
        {% render '@icon-link' %}
        {% render '@icon-link' %}
        {% render '@icon-link' %}
        {% render '@icon-link', { line1: 'Alle anzeigen' } %}
      </div>
    {% endif %}
  </div>

  {% if 'price' in include or 'text-long' in include or 'cta' in include %}
    <div class="c-teaser__bottom">

      {% if 'text-long' in include %}
        <p class="medium:hidden"><a href="/">{{ text_long }}</a></p>
      {% endif %}

      {% if 'price' in include %}
        <div class="c-price">
          <span class="c-price__old">€ 20</span>
          <span class="c-price__new">€ 15</span>
        </div>
      {% endif %}

      {% if 'cta' in include %}
        <div class="grow-0">
          {% render '@button', {
            label: {
              default: cta
            },
            theme: 'primary',
            variant: 'outlined'
          } %}
        </div>
      {% endif %}

    </div>
  {% endif %}

</div>
 
/* No context defined. */

No notes defined.