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