Washington National Cathedral Component Library

Button Filter 

<form class="button_filter">
    <ul class="button_filter_items">
        <li class="button_filter_item">
            <a class="button_filter_link button_filter_link_selected">
                <span class="button_filter_link_icon">
                    <svg class="icon icon_check">
                        <use href="/images/icons.svg#check" />
                    </svg>
                </span>
                <span class="button_filter_link_label">In person and Online</span>
            </a>
        </li>
        <li class="button_filter_item">
            <a class="button_filter_link button_filter_link_disabled">
                <span class="button_filter_link_icon">
                    <svg class="icon icon_check">
                        <use href="/images/icons.svg#check" />
                    </svg>
                </span>
                <span class="button_filter_link_label">In Person</span>
            </a>
        </li>
        <li class="button_filter_item">
            <a class="button_filter_link button_filter_link_disabled">
                <span class="button_filter_link_icon">
                    <svg class="icon icon_check">
                        <use href="/images/icons.svg#check" />
                    </svg>
                </span>
                <span class="button_filter_link_label">Online</span>
            </a>
        </li>
    </ul>
</form>
 
<form class="button_filter">
  <ul class="button_filter_items">
    {% for item in items %}
      <li class="button_filter_item">
        <a class="button_filter_link{% if item.selected %} button_filter_link_selected{% endif %}{% if item.disabled %} button_filter_link_disabled{% endif %}">
          <span class="button_filter_link_icon">{{ icon('check') }}</span>
          <span class="button_filter_link_label">{{ item.label }}</span>
        </a>
      </li>
    {% endfor %}
  </ul>
</form>

No notes defined.