HiVolda Styleguide

Filter Study 

<form action="" class="filter-study grid-three">
    <div class="grid-item">
        <h2>Utdanningsområde</h2>

        <div class="checkbox-group">
            <input type="checkbox" id="check-001">
            <label for="check-001">Administrasjon, planlegging og leiing</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-002">
            <label for="check-002">Digital kompetanse</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-003">
            <label for="check-003">Estetiske fag, kunst og musikkfag</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-004">
            <label for="check-004">Helse- og sosialfag</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-005">
            <label for="check-005">Historie og religion</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-006">
            <label for="check-006">Idrett og friluftsliv</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-007">
            <label for="check-007">Kompetanse for kvalitet</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-008">
            <label for="check-008">Lærarutdanning</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-009">
            <label for="check-009">Matematikk og Naturfag</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-010">
            <label for="check-010">Medie- og journalistfag</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-011">
            <label for="check-011">Språk og litteratur</label>
        </div>

    </div>
    <div class="grid-item">
        <h2>Studietype</h2>

        <div class="checkbox-group">
            <input type="checkbox" id="check-101">
            <label for="check-101">Doktorgrad</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-102">
            <label for="check-102">Mastergrad</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-103">
            <label for="check-103">Yrkesutdanning</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-104">
            <label for="check-104">Bachelorgrad</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-105">
            <label for="check-105">Årsstudium</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-106">
            <label for="check-106">Fordjupingsstudium</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-107">
            <label for="check-107">Vidareutdanning (masternivå)</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-108">
            <label for="check-108">Vidareutdanning (bachelornivå)</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="check-109">
            <label for="check-109">Innføringsemne</label>
        </div>

    </div>
    <div class="grid-item">
        <h2>Organisering</h2>

        <div class="checkbox-group">
            <input type="checkbox" id="201">
            <label for="201">Heiltid</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="202">
            <label for="202">Deltid</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="203">
            <label for="203">Nettstudium</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="204">
            <label for="204">Samlingar</label>
        </div>

        <h2>Startsemester</h2>

        <div class="checkbox-group">
            <input type="checkbox" id="301">
            <label for="301">Haust</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" id="302">
            <label for="302">Vår</label>
        </div>

        <h2>Organisering</h2>

        <div class="checkbox-group">
            <input type="checkbox" id="401">
            <label for="401">Vis kun ledige plasser</label>
        </div>

    </div>
</form>
 
<form action="" class="filter-study grid-three">
  <div class="grid-item">
    <h2>Utdanningsområde</h2>
    {% for item in filters_area %}
      {% render '@component-checkbox', item, true %}
    {% endfor %}
  </div>
  <div class="grid-item">
    <h2>Studietype</h2>
    {% for item in filters_type %}
      {% render '@component-checkbox', item, true %}
    {% endfor %}
  </div>
  <div class="grid-item">
    <h2>Organisering</h2>
    {% for item in filters_organization %}
      {% render '@component-checkbox', item, true %}
    {% endfor %}
    <h2>Startsemester</h2>
    {% for item in filters_semester %}
      {% render '@component-checkbox', item, true %}
    {% endfor %}
    <h2>Organisering</h2>
    {% for item in filters_available %}
      {% render '@component-checkbox', item, true %}
    {% endfor %}
  </div>
</form>
 
{
  "filters_area": [
    {
      "text": "Administrasjon, planlegging og leiing",
      "id": "check-001"
    },
    {
      "text": "Digital kompetanse",
      "id": "check-002"
    },
    {
      "text": "Estetiske fag, kunst og musikkfag",
      "id": "check-003"
    },
    {
      "text": "Helse- og sosialfag",
      "id": "check-004"
    },
    {
      "text": "Historie og religion",
      "id": "check-005"
    },
    {
      "text": "Idrett og friluftsliv",
      "id": "check-006"
    },
    {
      "text": "Kompetanse for kvalitet",
      "id": "check-007"
    },
    {
      "text": "Lærarutdanning",
      "id": "check-008"
    },
    {
      "text": "Matematikk og Naturfag",
      "id": "check-009"
    },
    {
      "text": "Medie- og journalistfag",
      "id": "check-010"
    },
    {
      "text": "Språk og litteratur",
      "id": "check-011"
    }
  ],
  "filters_type": [
    {
      "text": "Doktorgrad",
      "id": "check-101"
    },
    {
      "text": "Mastergrad",
      "id": "check-102"
    },
    {
      "text": "Yrkesutdanning",
      "id": "check-103"
    },
    {
      "text": "Bachelorgrad",
      "id": "check-104"
    },
    {
      "text": "Årsstudium",
      "id": "check-105"
    },
    {
      "text": "Fordjupingsstudium",
      "id": "check-106"
    },
    {
      "text": "Vidareutdanning (masternivå)",
      "id": "check-107"
    },
    {
      "text": "Vidareutdanning (bachelornivå)",
      "id": "check-108"
    },
    {
      "text": "Innføringsemne",
      "id": "check-109"
    }
  ],
  "filters_organization": [
    {
      "text": "Heiltid",
      "id": 201
    },
    {
      "text": "Deltid",
      "id": 202
    },
    {
      "text": "Nettstudium",
      "id": 203
    },
    {
      "text": "Samlingar",
      "id": 204
    }
  ],
  "filters_semester": [
    {
      "text": "Haust",
      "id": 301
    },
    {
      "text": "Vår",
      "id": 302
    }
  ],
  "filters_available": [
    {
      "text": "Vis kun ledige plasser",
      "id": 401
    }
  ]
}

No notes defined.