BBH

Carousels 

<div class="p-48">
    <div ui-carousel data-config='{ "pageDots": true, "slides": {"small": 1.25, "medium": 2, "large": 3}}'>

        <div ui-carousel-item>

            <div class="
  c-teaser

  

  
">

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

                        <img class="
    c-image

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

            </div>

        </div>

        <div ui-carousel-item>

            <div class="
  c-teaser

  

  
">

                <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="/">Ut enim ad minim veniam, quis nostrud</a></h3>

                </div>

            </div>

        </div>

        <div ui-carousel-item>

            <div class="
  c-teaser

  

  
">

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

                        <img class="
    c-image

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

            </div>

        </div>

        <div ui-carousel-item>

            <div class="
  c-teaser

  

  
">

                <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="/">Duis aute irure dolor in reprehenderit in voluptate</a></h3>

                </div>

            </div>

        </div>

        <div ui-carousel-item>

            <div class="
  c-teaser

  

  
">

                <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="/">Nonumy eirmod tempor invidunt ut anamen</a></h3>

                </div>

            </div>

        </div>

    </div>
</div>

<div class="p-48">
    <div class="c-index-container" ui-carousel data-config='{ "wrapAround": false, "pageDots": true, "prevNextButtons": false, "slides": {"small": 5, "medium": 8, "large": 13}}'>

        <div ui-carousel-item>

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

    

    
      is-active
    
  ">

                <span class="
        c-button__label

        

      ">&#65;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#66;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#67;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#68;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#69;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#70;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#71;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#72;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#73;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#74;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#75;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#76;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#77;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#78;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#79;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#80;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#81;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#82;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#83;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#84;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#85;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#86;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#87;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#88;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#89;</span>

            </button>
        </div>

        <div ui-carousel-item>

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

    

    
  ">

                <span class="
        c-button__label

        

      ">&#90;</span>

            </button>
        </div>

    </div>
</div>

<div class="p-48">
    <div ui-carousel data-config='{ "pageDots": true, "prevNextButtons": false, "slides": {"small": 2, "medium": 3, "large": 5}}'>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Anamen elitr</p>
            </a>

        </div>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Lorem ipsum</p>
            </a>

        </div>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Consetetur sadipscing</p>
            </a>

        </div>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Consetetur sadipscing</p>
            </a>

        </div>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Lorem ipsum</p>
            </a>

        </div>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Eirmod ut anamen</p>
            </a>

        </div>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Anamen elitr</p>
            </a>

        </div>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Dolor sitament lorem</p>
            </a>

        </div>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Consetetur sadipscing</p>
            </a>

        </div>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Lorem ipsum</p>
            </a>

        </div>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Eirmod ut anamen</p>
            </a>

        </div>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Eirmod ut anamen</p>
            </a>

        </div>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Eirmod ut anamen</p>
            </a>

        </div>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Eirmod ut anamen</p>
            </a>

        </div>

        <div ui-carousel-item>

            <a href="/" class="c-category-teaser">

                <div class="c-category-teaser__symbol">

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

                </div>

                <p class="c-category-teaser__name">Eirmod ut anamen</p>
            </a>

        </div>

    </div>
</div>
 
<div class="p-48">
  <div ui-carousel data-config='{ "pageDots": true, "slides": {"small": 1.25, "medium": 2, "large": 3}}'>
    {% for index in [1, 2, 3, 4, 5] %}
      <div ui-carousel-item>
        {% render '@teaser', {
          include: ['image', 'kicker', 'title']
        } %}
      </div>
    {% endfor %}
  </div>
</div>

<div class="p-48">
  {% render '@index-letters' %}
</div>

<div class="p-48">
  <div ui-carousel data-config='{ "pageDots": true, "prevNextButtons": false, "slides": {"small": 2, "medium": 3, "large": 5}}'>
    {% for index in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] %}
      <div ui-carousel-item>
        {% render '@category-teaser' %}
      </div>
    {% endfor %}
  </div>
</div>
 
/* No context defined. */

No notes defined.