<div class="buttons" style="margin-bottom: 1em"> <button class="button dn"> <span>Button</span> </button> {% for status in site.data.colors.status %} <button class="button is-{{ status }}"> <span>{{ status | capitalize }}</span> </button> {% endfor %} </div> <div class="buttons" style="margin-bottom: 1em"> {% for status in site.data.colors.status %} <button class="button is-{{ status }} is-outlined"> <span>{{ status | capitalize }}</span> </button> {% endfor %} </div> <div class="buttons" style="margin-bottom: 1em"> {% for status in site.data.colors.status %} <button class="button is-{{ status }} is-light"> <span>{{ status | capitalize }}</span> </button> {% endfor %} </div> <div class="buttons" style="margin-bottom: 1em"> {% for status in site.data.colors.status %} <button class="button is-{{ status }} is-dark"> <span>{{ status | capitalize }}</span> </button> {% endfor %} </div>