HiVolda Styleguide

Filter Search 

<form action="" class="filter-search grid-three">
    <div class="filter-tools">
        <a class="arrow-link" href="#" data-replace-text="Skjul filter">Vis filter</a>
        <button class="reset-selection">Nullstill filter</button>
    </div>

    <div class="accordion">

        <div class="accordion-item open">
            <h3 class="title"><a class="arrow-link block" href="#">Type</a></h3>
            <div class="copy">

                <div class="filter-item">
                    <div class="checkbox-group">
                        <input type="checkbox" id="check-001">
                        <label for="check-001">Studie (8)</label>
                    </div>

                </div>

                <div class="filter-item">
                    <div class="checkbox-group">
                        <input type="checkbox" id="check-002" checked>
                        <label for="check-002">Artikkel (6)</label>
                    </div>

                </div>

                <div class="filter-item">
                    <div class="checkbox-group">
                        <input type="checkbox" id="check-003">
                        <label for="check-003">Event (3)</label>
                    </div>

                </div>

                <div class="filter-item">
                    <div class="checkbox-group">
                        <input type="checkbox" id="check-004">
                        <label for="check-004">Ansatt (3)</label>
                    </div>

                </div>

            </div>
        </div>

        <div class="accordion-item open">
            <h3 class="title"><a class="arrow-link block" href="#">Kategori</a></h3>
            <div class="copy">

                <div class="filter-item">
                    <div class="checkbox-group">
                        <input type="checkbox" id="check-101" checked>
                        <label for="check-101">For studentar (7)</label>
                    </div>

                </div>

                <div class="filter-item">
                    <div class="checkbox-group">
                        <input type="checkbox" id="check-102">
                        <label for="check-102">For tilsette (5)</label>
                    </div>

                </div>

                <div class="filter-item">
                    <div class="checkbox-group">
                        <input type="checkbox" id="check-103">
                        <label for="check-103">FoU (8)</label>
                    </div>

                </div>

            </div>
        </div>

    </div>
    <div class="filter-tools">
        <a class="arrow-link" href="#" data-replace-text="Skjul filter">Vis filter</a>
        <button class="reset-selection">Nullstill filter</button>
    </div>

</form>
 
<form action="" class="filter-search grid-three">
  {% render '@component-filter-tools' %}
  <div class="accordion">
    {% if filters_type %}
    <div class="accordion-item open">
      <h3 class="title"><a class="arrow-link block" href="#">Type</a></h3>
      <div class="copy">
        {% for item in filters_type %}
        <div class="filter-item">
          {% render '@component-checkbox', item, true %}
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
    {% if filters_category %}
    <div class="accordion-item open">
      <h3 class="title"><a class="arrow-link block" href="#">Kategori</a></h3>
      <div class="copy">
        {% for item in filters_category %}
        <div class="filter-item">
          {% render '@component-checkbox', item, true %}
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </div>
  {% render '@component-filter-tools' %}
</form>
 
{
  "filters_type": [
    {
      "text": "Studie (8)",
      "id": "check-001",
      "amount": 8
    },
    {
      "text": "Artikkel (6)",
      "id": "check-002",
      "attr": "checked",
      "amount": 6
    },
    {
      "text": "Event (3)",
      "id": "check-003",
      "amount": 3
    },
    {
      "text": "Ansatt (3)",
      "id": "check-004",
      "amount": 3
    }
  ],
  "filters_category": [
    {
      "text": "For studentar (7)",
      "id": "check-101",
      "attr": "checked",
      "amount": 7
    },
    {
      "text": "For tilsette (5)",
      "id": "check-102",
      "amount": 5
    },
    {
      "text": "FoU (8)",
      "id": "check-103",
      "amount": 8
    }
  ]
}

No notes defined.