360Giving Design System - Components

Dropdown filter 

<div class="dropdown-filter">
    <label class="dropdown-filter__label" for="sort-view">Sort by:</label>

    <select class="dropdown-filter__select" name="sort-by" id="sort-view">

        <option value="best">Best results</option>

        <option value="date-asc">Date ascending</option>

        <option value="date-desc">Date descending</option>

        <option value="title">Title</option>

    </select>
</div>
 
<div class="dropdown-filter">
  <label class="dropdown-filter__label" for="{{ id }}">{{ label }}</label>

  <select class="dropdown-filter__select" name="{{ name }}" id="{{ id }}"{% if required === true %} required{% endif %}>
    {% for option in options %}
      <option value="{{ option.value }}"{% if option.disabled %} disabled{% endif %}>{{ option.label }}</option>
    {% endfor %}
  </select>
</div>
 
{
  "label": "Sort by:",
  "id": "sort-view",
  "name": "sort-by",
  "options": [
    {
      "label": "Best results",
      "value": "best"
    },
    {
      "label": "Date ascending",
      "value": "date-asc"
    },
    {
      "label": "Date descending",
      "value": "date-desc"
    },
    {
      "label": "Title",
      "value": "title"
    }
  ]
}
  • Content: 
    .dropdown-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

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

  &__label {
    flex-shrink: 0;
    align-self: flex-start;
    font-size: 16px;
    font-weight: 700;
    margin-top: 12px;
    margin-right: 10px;
  }

  &__select {
    font-weight: 400;
    font-size: 16px;
    padding: 2px 4px;
  }
}
  • URL: /components/raw/dropdown-filter/dropdown-filter.scss
  • Filesystem Path: src/components/02-elements/dropdown-filter/dropdown-filter.scss
  • Size: 380 Bytes

No notes defined.