360Giving Design System - Components

Filter summary

1179 × 333 
<div class="filter-summary">
    <div class="filter-summary__label">
        Filters applied:
    </div>

    <ul class="filter-summary__filters">

        <li class="filter-summary__filters-item">
            <a href="#">
                <span class="filter-summary__filters-item--label">The Royal British Legion</span>
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z" fill="#DE6E24" />
                </svg>

            </a>
        </li>

        <li class="filter-summary__filters-item">
            <a href="#">
                <span class="filter-summary__filters-item--label">Oxfordshire</span>
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z" fill="#DE6E24" />
                </svg>

            </a>
        </li>

        <li class="filter-summary__filters-item">
            <a href="#">
                <span class="filter-summary__filters-item--label">2019</span>
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z" fill="#DE6E24" />
                </svg>

            </a>
        </li>

        <li class="filter-summary__filters-item">
            <a href="#">
                <span class="filter-summary__filters-item--label">University of Oxford</span>
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z" fill="#DE6E24" />
                </svg>

            </a>
        </li>

        <li class="filter-summary__filters-clear">
            <a href="#">Clear all</a>
        </li>
    </ul>
</div>
 
<div class="filter-summary">
  <div class="filter-summary__label">
    Filters applied:
  </div>

  <ul class="filter-summary__filters">
    {% for filter in filters %}
      <li class="filter-summary__filters-item">
        <a href="{{ filter.url }}">
          <span class="filter-summary__filters-item--label">{{ filter.label }}</span>
          {% include '@checkmark-icon' %}
        </a>
      </li>
    {% endfor %}
    <li class="filter-summary__filters-clear">
      <a href="{{ clearUrl }}">Clear all</a>
    </li>
  </ul>
</div>
 
{
  "clearUrl": "#",
  "filters": [
    {
      "label": "The Royal British Legion",
      "url": "#"
    },
    {
      "label": "Oxfordshire",
      "url": "#"
    },
    {
      "label": "2019",
      "url": "#"
    },
    {
      "label": "University of Oxford",
      "url": "#"
    }
  ]
}
  • Content: 
    .filter-summary {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 15px;
  flex-wrap: wrap;

  @include breakpoint($medium) {
    flex-wrap: nowrap;
  }

  &__label {
    margin-top: 8px;
    margin-right: 12px;
    flex-shrink: 0;
    align-self: flex-start;
  }

  &__filters {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
  }

  &__filters-item {
    margin-right: 12px;

    a {
      margin: 4px 0;
      display: block;
      border: 1px solid $blue-tint;
      border-radius: 3px;
      padding: 2px 6px;
    }

    &--label {
      margin-right: 4px;
    }
  }

  &__filters-clear {
    a {
      margin: 4px 0;
      display: block;
      background: $teal-dark;
      color: $white;
      border-radius: 3px;
      padding: 2px 6px;
    }
  }
}
  • URL: /components/raw/filter-summary/filter-summary.scss
  • Filesystem Path: src/components/03-components/filter-summary/filter-summary.scss
  • Size: 827 Bytes

No notes defined.