FTSE Russell Styleguide

Search Filter 

<div class="search__results__filter">
    <h4>Categories</h4>
    <ul class="search__results__categories">

        <li class="search__results__filter__item search__results__filter--active"><a href=""><span>All</span></a></li>

        <li class="search__results__filter__item"><a href=""><span>Index Series</span></a></li>

        <li class="search__results__filter__item"><a href=""><span>Blogs</span></a></li>

        <li class="search__results__filter__item"><a href=""><span>Factsheets</span></a></li>

        <li class="search__results__filter__item"><a href=""><span>Page</span></a></li>

        <li class="search__results__filter__item"><a href=""><span>Index Announcements</span></a></li>

        <li class="search__results__filter__item"><a href=""><span>Press Releases</span></a></li>

        <li class="search__results__filter__item"><a href=""><span>Research</span></a></li>

        <li class="search__results__filter__item"><a href=""><span>Tools & Publication</span></a></li>

    </ul>
</div>
 
<div class="search__results__filter">
  <h4>Categories</h4>
  <ul class="search__results__categories">
    {% for item in items %}
    <li class="search__results__filter__item{% if item.active %} search__results__filter--active{% endif %}"><a href=""><span>{{item.label}}</span></a></li>
    {% endfor %}
  </ul>
</div>
 
{
  "items": [
    {
      "label": "All",
      "active": true
    },
    {
      "label": "Index Series",
      "active": null
    },
    {
      "label": "Blogs",
      "active": null
    },
    {
      "label": "Factsheets",
      "active": null
    },
    {
      "label": "Page",
      "active": null
    },
    {
      "label": "Index Announcements",
      "active": null
    },
    {
      "label": "Press Releases",
      "active": null
    },
    {
      "label": "Research",
      "active": null
    },
    {
      "label": "Tools & Publication",
      "active": null
    }
  ]
}
  • Content: 
    .search__results__filter {
  padding: $space-lg;

  h4 {
    color: $secondary-light;
    border-bottom: 2px solid $secondary-light;
    padding-bottom: $space-xs;
  }

  &__item {
    font-size: $font-size-sm;
    margin: $space-sm $space-xxs;
    display: inline-block
  }

  a {
    border: 1px solid $secondary-light;
    padding: $space-xs $space-md;
    border-radius: $border-radius;
    color: $secondary-light;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  a:hover {
    border: 1px solid $secondary-light;
    color: $white;
    background: $secondary-light;
    transition: all 0.3s ease;
  }

  &--active {
    a {
      border: 1px solid $secondary-light;
      color: $white;
      background: $secondary-light;
    }
  }



}
  • URL: /components/raw/search_filter/_search_filter.scss
  • Filesystem Path: src/components/molecules/search_filter/_search_filter.scss
  • Size: 753 Bytes

There are no notes for this item.