BBH

Merkliste 

<div class="c-modal-dialog" id="merkliste">

    <div class="h-[236px] small-only:h-[45vw]">
        <div class="bg-neutral-grey-01 grid justify-center items-center h-full">
            <p>Kartenanwendung</p>
        </div>
    </div>

    <hr class="my-8 has-border">

    <div class="grid gap-8">

        <div class="c-teaser-container small:grid-cols-1 medium:grid-cols-3 large:grid-cols-3">

            <div class="
  c-teaser

  
  c-teaser--on-small:image-left
  

  
">

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

                        <img class="
    c-image

    
  " src="../../img/placeholder/500x300/image_16.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>

                    <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>

            </div>

            <div class="
  c-teaser

  
  c-teaser--on-small:image-left
  

  
">

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

                        <img class="
    c-image

    
  " src="../../img/placeholder/500x300/image_19.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="/">Lorem ipsum dolor sit amet</a></h3>

                    <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>

            </div>

            <div class="
  c-teaser

  
  c-teaser--on-small:image-left
  

  
">

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

                        <img class="
    c-image

    
  " src="../../img/placeholder/500x300/image_18.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>

                    <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>

            </div>

        </div>

        <div class="c-teaser-container small:grid-cols-1 medium:grid-cols-3 large:grid-cols-3">

            <div class="
  c-teaser

  
  c-teaser--on-small:image-left
  

  
">

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

                        <img class="
    c-image

    
  " src="../../img/placeholder/500x300/image_6.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="/">Lorem ipsum dolor sit amet</a></h3>

                    <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>

            </div>

            <div class="
  c-teaser

  
  c-teaser--on-small:image-left
  

  
">

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

                        <img class="
    c-image

    
  " src="../../img/placeholder/500x300/image_10.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>

                    <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>

            </div>

            <div class="
  c-teaser

  
  c-teaser--on-small:image-left
  

  
">

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

                        <img class="
    c-image

    
  " src="../../img/placeholder/500x300/image_14.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="/">Lorem ipsum dolor sit amet</a></h3>

                    <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>

            </div>

        </div>

        <div class="c-teaser-container small:grid-cols-1 medium:grid-cols-3 large:grid-cols-3">

            <div class="
  c-teaser

  
  c-teaser--on-small:image-left
  

  
">

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

                        <img class="
    c-image

    
  " src="../../img/placeholder/500x300/image_19.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>

                    <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>

            </div>

            <div class="
  c-teaser

  
  c-teaser--on-small:image-left
  

  
">

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

                        <img class="
    c-image

    
  " src="../../img/placeholder/500x300/image_2.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="/">Lorem ipsum dolor sit amet</a></h3>

                    <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>

            </div>

            <div class="
  c-teaser

  
  c-teaser--on-small:image-left
  

  
">

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

                        <img class="
    c-image

    
  " src="../../img/placeholder/500x300/image_4.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="/">Lorem ipsum dolor sit amet</a></h3>

                    <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>

            </div>

        </div>

    </div>

</div>
 
<div class="c-modal-dialog" id="merkliste">

  {% render '@map', { height: 'h-[236px] small-only:h-[45vw]' } %}

  <hr class="my-8 has-border">

  <div class="grid gap-8">
    {% for index in [1, 2, 3] %}

      {# iterate over grid rows #}
      <div class="c-teaser-container small:grid-cols-1 medium:grid-cols-3 large:grid-cols-3">
        {% for index in [1, 2, 3] %}

          {# iterate over teaser in a row #}
          {% render '@teaser', {
            include: ['image', 'kicker', 'title', 'icontag-unfavorite'],
            on_small: { image_left: true }
          } %}

        {% endfor %}
      </div>

    {% endfor %}
  </div>

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

No notes defined.