360Giving Design System - Components

Sort & Filter Bar

1179 × 333 
<h4>Sort:</h4>

<div class="sort-filters">

    <div class="sort-filters__select-wrapper">
        <select class="sort-filters__filter-active" aria-label="Sorting alphabetically">
            <option value="">Alphabetically</option>

        </select>
    </div>

    <div class="sort-filters__select-wrapper">
        <select>
            <option value="">Filter by recipient</option>

        </select>
    </div>

    <div class="sort-filters__select-wrapper">
        <select class="sort-filters__filter-active" aria-label="Filtering by: Include charity or company nos.">
            <option value="">Filter by data feature</option>

            <option selected value="Include charity or company nos.">Include charity or company nos.</option>

        </select>
    </div>

    <div class="sort-filters__select-wrapper">
        <select>
            <option value="">Filter by data file</option>

        </select>
    </div>

    <div class="sort-filters__select-wrapper">
        <select>
            <option value="">Filter by data file</option>

        </select>
    </div>

    <button class="clear-all">Clear all</button>
</div>
 
<h4>Sort:</h4>

<div class="sort-filters">
  {% for f in filters %}
  <div class="sort-filters__select-wrapper">
    <select
      {% if f.active %}
        class="sort-filters__filter-active"
        aria-label="{{ f.status }}"
      {% endif %}
    >
      <option value="">{{ f.label }}</option>
      {% if f.selected_item %}
        <option selected value="{{ f.selected_item }}">{{ f.selected_item }}</option>
      {% endif %}
    </select>
  </div>
  {% endfor %}
    <button class="clear-all">Clear all</button>
</div>
 
{
  "filters": [
    {
      "label": "Alphabetically",
      "active": true,
      "status": "Sorting alphabetically"
    },
    {
      "label": "Filter by recipient",
      "active": false
    },
    {
      "label": "Filter by data feature",
      "active": true,
      "selected_item": "Include charity or company nos.",
      "status": "Filtering by: Include charity or company nos."
    },
    {
      "label": "Filter by data file",
      "active": false
    },
    {
      "label": "Filter by data file",
      "active": false
    }
  ]
}
  • Content: 
    // Custom select approach mostly inspired by https://moderncss.dev/custom-select-styles-with-pure-css/
.sort-filters {
  $border-arrow-colour: hsla(var(--gray-30-hsl), 1);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 10px;

  &__select-wrapper {
    display: grid;
    grid-template-areas: "select";
    align-items: center;
    width: 100%;

    border: solid 1px $border-arrow-colour;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: #fff;
    cursor: pointer;

    &:after {
      grid-area: select;
      justify-self: end;

      content: "";
      width: 0.8rem;
      height: 0.5rem;
      background-color: $border-arrow-colour;
      clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    }
  }

  select {
    grid-area: select;

    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0 1rem 0 0;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;

    color: $border-arrow-colour;

    &.sort-filters__filter-active {
      color: $black;
    }
  }
}

.clear-all {
  border: none;
  height: 35px;
  width: 100px;
}
  • URL: /components/raw/sort-filter-bar/sort-filter-bar.scss
  • Filesystem Path: src/components/04-modules/sort-filter-bar/sort-filter-bar.scss
  • Size: 1.2 KB

No notes defined.