NNPHI Pattern Library

Filters 

<div class="filters">
    <div class="filters__header">Filter & Search</div>
    <form class="filters__form" method="get" data-filters-form>
        <div class="filters__form-item filters__form-item--search filters__group">
            <label for="keyword-input" class="filters__filter-search-label">Keyword</label>
            <input id="keyword-input" class="filters__filter-search" type="text" name="keyword" value="" placeholder="Search by keyword">
        </div>

        <fieldset class="filters__group">
            <legend class="filters__group-title">Public Health Categories</legend>
            <div class="filters__form-item">
                <label for="aging-input" class="filters__filter-label">Aging</label>
                <input id="aging-input" class="filters__filter-term" type="checkbox" name="0" value="" checked>
            </div>
            <div class="filters__form-item">
                <label for="behavioral-and-mental-health-input" class="filters__filter-label">Behavioral and mental health</label>
                <input id="behavioral-and-mental-health-input" class="filters__filter-term" type="checkbox" name="0" value="">
            </div>
            <div class="filters__form-item">
                <label for="childrens-health-input" class="filters__filter-label">Children’s health</label>
                <input id="childrens-health-input" class="filters__filter-term" type="checkbox" name="0" value="">
            </div>
            <div class="filters__form-item">
                <label for="chronic-diseases-input" class="filters__filter-label">Chronic diseases</label>
                <input id="chronic-diseases-input" class="filters__filter-term" type="checkbox" name="0" value="">
            </div>
        </fieldset>
        <fieldset class="filters__group">
            <legend class="filters__group-title">Types</legend>
            <div class="filters__form-item">
                <label for="type-item-one-input" class="filters__filter-label">type item one</label>
                <input id="type-item-one-input" class="filters__filter-term" type="checkbox" name="1" value="1" checked>
            </div>
            <div class="filters__form-item">
                <label for="type-item-two-input" class="filters__filter-label">type item two</label>
                <input id="type-item-two-input" class="filters__filter-term" type="checkbox" name="1" value="2">
            </div>
            <div class="filters__form-item">
                <label for="type-item-three-input" class="filters__filter-label">type item three</label>
                <input id="type-item-three-input" class="filters__filter-term" type="checkbox" name="1" value="3">
            </div>
            <div class="filters__form-item">
                <label for="type-item-four-input" class="filters__filter-label">type item four</label>
                <input id="type-item-four-input" class="filters__filter-term" type="checkbox" name="1" value="4">
            </div>
        </fieldset>

        <div class="filters__form-actions">
            <button type="submit" class="standard-button standard-button--primary standard-button-position--sidebar filters__submit-button" data-action="" data-target="" data-params="null">
                <div class="standard-button__container">
                    <span class="standard-button__text">
                        Apply filters
                    </span>
                </div>
            </button>
            <button type="submit" class="standard-button standard-button--secondary standard-button-position--sidebar filters__reset-button" data-action="" data-target="" data-params="null" data-reset-filters="">
                <div class="standard-button__container">
                    <span class="standard-button__text">
                        Reset filters
                    </span>
                </div>
            </button>
        </div>
    </form>
</div>
 
{{ enqueue_script('filters') }}
<div class="filters">
    <div class="filters__header">Filter & Search</div>
    <form class="filters__form" method="get" data-filters-form>
        <div class="filters__form-item filters__form-item--search filters__group">
            <label for="keyword-input" class="filters__filter-search-label">Keyword</label>
            <input
                id="keyword-input"
                class="filters__filter-search"
                type="text"
                name="keyword"
                value="{{ post.keyword|e }}"
                placeholder="Search by keyword"
            >
        </div>

        {% for taxonomy, data in post.taxonomies %}
            {% if data.terms|length > 0 %}
                <fieldset class="filters__group">
                    <legend class="filters__group-title">{{ data.label }}</legend>
                    {% for term in data.terms %}
                        <div class="filters__form-item">
                            <label for="{{ term.slug }}-input" class="filters__filter-label">{{ term.name }}</label>
                            <input
                                id="{{ term.slug }}-input"
                                class="filters__filter-term"
                                type="checkbox"
                                name="{{ taxonomy }}"
                                value="{{ term.term_id }}"
                                {% if term.selected %}checked{% endif %}
                            >
                        </div>
                    {% endfor %}
                </fieldset>
            {% endif %}
        {% endfor %}

        <div class="filters__form-actions">
            {% include 'bits/standard-button/standard-button.twig' with {
                button: {
                    text: 'Apply filters',
                    variant: 'primary',
                    type: 'submit',
                    linkType: 'internal',
                    isButton: true,
                    buttonPosition: 'sidebar',
                    extraClasses: 'filters__submit-button',
                }
            } %}
            {% include 'bits/standard-button/standard-button.twig' with {
                button: {
                    text: 'Reset filters',
                    variant: 'secondary',
                    type: 'submit',
                    linkType: 'internal',
                    isButton: true,
                    buttonPosition: 'sidebar',
                    extraClasses: 'filters__reset-button',
                    attributes: {
                        'data-reset-filters': '',
                    }
                }
            } %}
        </div>
    </form>
</div>
 
{
  "site": {
    "title": "National Network of Public Health Institutes"
  },
  "background": "white",
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Primary Page One",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    }
  ],
  "footerLinks": {
    "items": [
      {
        "title": "Subscribe to our newsletter",
        "url": "#"
      },
      {
        "title": "Explore membership benefits",
        "url": "#"
      },
      {
        "title": "See career opportunities",
        "url": "#"
      }
    ]
  },
  "contactInfo": {
    "copyright": "© National Network of Public Health Institutes. All Rights Reserved",
    "facebookLink": "https://facebook.com",
    "linkedInLink": "https://linkedin.com",
    "youtubeLink": "https://youtube.com",
    "flickrLink": "https://flickr.com",
    "twitterLink": "https://twitter.com",
    "instagramLink": "https://instagram.com",
    "youTubeLink": "https://youtube.com"
  },
  "utilityNavigation": {
    "items": [
      {
        "title": "Member directory",
        "url": "#"
      },
      {
        "title": "Events",
        "url": "#",
        "isActive": true
      },
      {
        "title": "Blog",
        "url": "#"
      }
    ]
  },
  "primaryNavigation": {
    "items": [
      {
        "title": "Workforce resources",
        "url": "#",
        "children": [
          {
            "title": "Resource Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Trainings",
            "url": "#",
            "children": [
              {
                "title": "Training Level 3 example",
                "url": "#"
              }
            ]
          }
        ]
      },
      {
        "title": "Programs & Projects",
        "url": "#",
        "isDescendantActive": true,
        "children": [
          {
            "title": "Data Modernization",
            "url": "#",
            "children": []
          },
          {
            "title": "Environmental Health and Emergency Preparedness",
            "url": "#",
            "children": []
          },
          {
            "title": "Evaluation and Impact",
            "url": "#",
            "isDescendantActive": true,
            "children": [
              {
                "title": "Third level example",
                "url": "#",
                "isActive": true,
                "children": [
                  {
                    "title": "Fourth level example",
                    "url": "#",
                    "isActive": true,
                    "children": [
                      {
                        "title": "Fifth level example",
                        "url": "#",
                        "isActive": true
                      }
                    ]
                  },
                  {
                    "title": "Fourth level example 2",
                    "url": "#"
                  },
                  {
                    "title": "Fourth level example 3",
                    "url": "#"
                  }
                ]
              }
            ]
          },
          {
            "title": "Multisector Strategies and Population Health",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Events and Convenings Management",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Infrastructure Grant",
            "url": "#",
            "children": []
          },
          {
            "title": "Public health training",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Explore the Network",
        "url": "#",
        "children": [
          {
            "title": "Member Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Membership paths",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Partner with us",
        "url": "#"
      },
      {
        "title": "About",
        "url": "#",
        "children": [
          {
            "title": "Blog",
            "url": "#",
            "children": []
          },
          {
            "title": "Events",
            "url": "#",
            "children": []
          },
          {
            "title": "Newsletters",
            "url": "#",
            "children": []
          },
          {
            "title": "Signature programs",
            "url": "#",
            "children": []
          },
          {
            "title": "Contact us",
            "url": "#",
            "children": []
          },
          {
            "title": "Meet the team",
            "url": "#",
            "children": []
          }
        ]
      }
    ]
  },
  "post": {
    "taxonomies": [
      {
        "label": "Public Health Categories",
        "terms": [
          {
            "name": "Aging",
            "slug": "aging",
            "taxonomy": "public_health_category",
            "selected": true
          },
          {
            "name": "Behavioral and mental health",
            "slug": "behavioral-and-mental-health",
            "taxonomy": "public_health_category"
          },
          {
            "name": "Children’s health",
            "slug": "childrens-health"
          },
          {
            "name": "Chronic diseases",
            "slug": "chronic-diseases"
          }
        ]
      },
      {
        "label": "Types",
        "terms": [
          {
            "name": "type item one",
            "slug": "type-item-one",
            "term_id": 1,
            "selected": true
          },
          {
            "name": "type item two",
            "slug": "type-item-two",
            "term_id": 2
          },
          {
            "name": "type item three",
            "slug": "type-item-three",
            "term_id": 3
          },
          {
            "name": "type item four",
            "slug": "type-item-four",
            "term_id": 4
          }
        ]
      }
    ]
  }
}
  • Content: 
    .filters {
    &__header {
        @include headline3;
        margin-bottom: 1.6rem;
    }

    &__filter-label {
        @include bodySmall;
        color: var(--black);
    }

    &__filter-search {
        width: 100%;
        padding-inline: 1rem;
        padding-block: 0.5rem;
        border: 0.08rem solid var(--navy);
        color: var(--navy);
        background-color: var(--blueTint);
        border-radius: 2rem;
    }

    &__filter-search-label {
        @include invisible;
    }

    &__group-title {
        @include headline6;
        margin-block-end: 1rem;
    }

    &__group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0;

        &:not(:last-of-type) {
            border-bottom: 0.08rem solid var(--blue);
            padding-block-end: 2rem;
        }
    }

    &__form {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        width: 100%;
    }

    &__form-item {
        display: flex;
        flex-direction: row-reverse;
        justify-content: start;
        align-items: center;
        gap: 0 1rem;
        width: 100%;
    }

    &__form-actions {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        justify-content: space-between;
        align-items: center;

        @media (max-width: calc($sidebarBreakpoint - 1px)) {
            flex-direction: column;
        }
    }

    &__submit-button {
        justify-content: center;
    }

    &__reset-button {
        justify-content: center;
    }
}
  • URL: /components/raw/filters/filters.scss
  • Filesystem Path: patterns/partials/filters/filters.scss
  • Size: 1.5 KB

No notes defined.