Lunds universitet - Style Guide

Event Filter 

<form action="#" class="form my-5">
    <div class="row">
        <div class="col-12 col-md">
            <div class="mb-3">
                <label for="start-date" class="form-label ">Datum från</label>
                <div class="input-group">
                    <span class="input-group-text bg-transparent text-bronze"><i class="fal fa-calendar-alt  fa-lg"></i>
                    </span>
                    <input type="date" class="form-control" id="start-date" value="2018-09-10" placeholder="YYYY-MM-DD" pattern="'\d{4}-\d{2}-\d{2}">
                </div>
            </div>

        </div>
        <div class="col-12 col-md">
            <div class="mb-3">
                <label for="end-date" class="form-label ">Datum till</label>
                <div class="input-group">
                    <span class="input-group-text bg-transparent text-bronze"><i class="fal fa-calendar-alt  fa-lg"></i>
                    </span>
                    <input type="date" class="form-control" id="end-date" value="2018-12-10" placeholder="YYYY-MM-DD" pattern="'\d{4}-\d{2}-\d{2}">
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md">
            <div class=" mb-3">
                <select class="form-select">
                    <option>Intresseområde</option>
                    <option>Lorem ipsum</option>
                    <option>Aliquam</option>
                    <option>Vestibulum</option>
                    <option>Nunc dignissim</option>
                    <option>Cras ornare</option>
                    <option>Vivamus</option>
                    <option>Praesent</option>
                    <option>Fusce nibh</option>
                    <option>Integer vitae</option>
                    <option>Vestibulum</option>
                    <option>Ut aliquam</option>
                    <option>Cras iaculis</option>
                    <option>Donec quis</option>
                </select>
            </div>

        </div>
        <div class="col-12 col-md">
            <div class=" mb-3">
                <select class="form-select">
                    <option>Händelsetyp</option>
                    <option>Lorem ipsum</option>
                    <option>Aliquam</option>
                    <option>Vestibulum</option>
                    <option>Nunc dignissim</option>
                    <option>Cras ornare</option>
                    <option>Vivamus</option>
                    <option>Praesent</option>
                    <option>Fusce nibh</option>
                    <option>Integer vitae</option>
                    <option>Vestibulum</option>
                    <option>Ut aliquam</option>
                    <option>Cras iaculis</option>
                    <option>Donec quis</option>
                </select>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md">
            <div class="mb-3">
                <div class="input-group mb-2 rounded-0">
                    <input type="text" id="text" class="form-control" name="text" value="" placeholder="Skriv för att filtrera">
                    <button class="btn btn-outline-primary rounded-0" type="submit">Sök</button>
                </div>
            </div>

        </div>
    </div>
</form>
 
<form action="#" class="form my-5">
  {{#each rows}}
    <div class="row">
      {{#each this}}
        <div class="col-12 col-md">
          {{render (concat "@" component) context merge=merge}}
        </div>
      {{/each}}
    </div>
  {{/each}}
</form>
 
{
  "rows": [
    [
      {
        "component": "form-date",
        "context": {
          "label": "Datum från",
          "id": "start-date",
          "value": "2018-09-10"
        },
        "merge": true
      },
      {
        "component": "form-date",
        "context": {
          "label": "Datum till",
          "id": "end-date",
          "value": "2018-12-10"
        },
        "merge": true
      }
    ],
    [
      {
        "component": "form-select",
        "context": {
          "id": "Intresseområde",
          "modifiers": [
            "mb-3"
          ],
          "placeholder": "Intresseområde",
          "options": [
            {
              "label": "Intresseområde"
            },
            {
              "label": "Lorem ipsum"
            },
            {
              "label": "Aliquam"
            },
            {
              "label": "Vestibulum"
            },
            {
              "label": "Nunc dignissim"
            },
            {
              "label": "Cras ornare"
            },
            {
              "label": "Vivamus"
            },
            {
              "label": "Praesent"
            },
            {
              "label": "Fusce nibh"
            },
            {
              "label": "Integer vitae"
            },
            {
              "label": "Vestibulum"
            },
            {
              "label": "Ut aliquam"
            },
            {
              "label": "Cras iaculis"
            },
            {
              "label": "Donec quis"
            }
          ]
        }
      },
      {
        "component": "form-select",
        "context": {
          "id": "Händelsetyp",
          "modifiers": [
            "mb-3"
          ],
          "placeholder": "Händelsetyp",
          "options": [
            {
              "label": "Händelsetyp"
            },
            {
              "label": "Lorem ipsum"
            },
            {
              "label": "Aliquam"
            },
            {
              "label": "Vestibulum"
            },
            {
              "label": "Nunc dignissim"
            },
            {
              "label": "Cras ornare"
            },
            {
              "label": "Vivamus"
            },
            {
              "label": "Praesent"
            },
            {
              "label": "Fusce nibh"
            },
            {
              "label": "Integer vitae"
            },
            {
              "label": "Vestibulum"
            },
            {
              "label": "Ut aliquam"
            },
            {
              "label": "Cras iaculis"
            },
            {
              "label": "Donec quis"
            }
          ]
        }
      }
    ],
    [
      {
        "component": "form-search--filter-search"
      }
    ]
  ]
}

No notes defined.