Filters – Design Portal

Demo

<nav class="hidden lg:block" data-track-gtm="Topics to Explore" aria-label="Topics to Explore">
  <p class="font-bold">Topics to Explore:</p>
  <div class="inline-grid gap-2 grid-col-2 md:grid-flow-col md:w-auto mb-4">
    <div class="flex-1 mb-4" id="subcat-tags" x-data="{ showMore : false }">
      <a class="btn bg-accent-1 hover:bg-primary normal-case text-base mb-2 mr-2 py-2 px-4" href="https://health.howstuffworks.com/wellness">Wellness</a>
      <a class="btn bg-accent-1 hover:bg-primary normal-case text-base mb-2 mr-2 py-2 px-4" href="https://health.howstuffworks.com/skin-care">Skin Care</a>
      <a class="btn bg-accent-1 hover:bg-primary normal-case text-base mb-2 mr-2 py-2 px-4" href="https://health.howstuffworks.com/diseases-conditions">Diseases & Conditions</a>
      <a class="btn bg-accent-1 hover:bg-primary normal-case text-base mb-2 mr-2 py-2 px-4" href="https://health.howstuffworks.com/human-body">Human Body</a>
      <a class="btn bg-accent-1 hover:bg-primary normal-case text-base mb-2 mr-2 py-2 px-4 hidden" :class="{ 'hidden' : !showMore }" href="https://health.howstuffworks.com/">Sexual Health</a>
      <a class="btn bg-accent-1 hover:bg-primary normal-case text-base mb-2 mr-2 py-2 px-4 hidden" :class="{ 'hidden' : !showMore }" href="https://health.howstuffworks.com/pregnancy-and-parenting">Pregnancy & Parenting</a>
      <a class="btn bg-accent-1 hover:bg-primary normal-case text-base mb-2 mr-2 py-2 px-4 hidden" :class="{ 'hidden' : !showMore }" href="https://health.howstuffworks.com/mental-health">Mental Health</a>
      <a class="btn bg-accent-1 hover:bg-primary normal-case text-base mb-2 mr-2 py-2 px-4 hidden" :class="{ 'hidden' : !showMore }" href="https://health.howstuffworks.com/medicine">Medicine</a>
      <a class="btn bg-accent-1 hover:bg-primary normal-case text-base mb-2 mr-2 py-2 px-4 hidden" :class="{ 'hidden' : !showMore }" href="https://health.howstuffworks.com/relationships">Love & Relationships</a>
      <a class="btn bg-accent-1 hover:bg-primary normal-case text-base mb-2 mr-2 py-2 px-4 hidden" :class="{ 'hidden' : !showMore }" href="https://health.howstuffworks.com/health-insurance">Healthcare and Health Insurance</a>
      <a class="btn bg-primary hover:bg-accent-1 normal-case text-base cat-show-more py-2 px-4" :class="{ 'hidden' : showMore }" @click.prevent="showMore = true" href="#">More</a>
    </div>
  </div>
</nav>

/* HSW components use Tailwind! 
Individual utility classes are added to the HTML. */

Alpine.js is used to show 'more' filters.

Anatomy

Filters
Filter Button
Filter More Toggle