Index Letters

Ready

HTML
View
Context
Info
Notes


        
        <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 class="c-index-container" ui-carousel data-config='{ "wrapAround": false, "pageDots": true, "prevNextButtons": false, "slides": {"small": 5, "medium": 8, "large": 13}}'>
  {% for index in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26] %}
    <div ui-carousel-item>
      {% render '@button', {
        label: { default: '&#' + (64 + index) + ';' },
        variant: 'square',
        isActive: (index==1)
      } %}
    </div>
  {% endfor %}
</div>


        
            
            /* No context defined. */

Handle: @index-letters
Preview:
- With layout
- Component only
Filesystem Path: src\components\03-organisms\index-letters.njk
References (1): @button
Referenced by (3): @carousels, @startseite, @a-z

No notes defined.