Preview:
<ul class="disease-lexicon__letter-list">
        {% for letter in 'A'..'Z' %}
            {% set firstAvialableLetter = (letter in availableLetters|keys) and availableLetters|first|first == letter %}
            <li class="disease-lexicon__letter-item">
                <button
                    type="button" data-letter-value="{{ letter }}"
                    class="disease-lexicon__letter-button {{ firstAvialableLetter ? 'disease-lexicon__letter-button--active' }} {{ not (letter in availableLetters|keys) ? 'disease-lexicon__letter-button--disabled' }}"
                >{{ letter }}.
                </button>
            </li>
        {% endfor %}
    </ul>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter