<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.