Lunds universitet - Style Guide

Event Filter: Default 

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

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

        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md">
            <div class="form-group">
                <label class=" w-100">
    
    <select class="form-control custom-select" name="" placeholder="Intresseområde">
        <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>
  </label>
            </div>

        </div>
        <div class="col-12 col-md">
            <div class="form-group">
                <label class=" w-100">
    
    <select class="form-control custom-select" name="" placeholder="Händelsetyp">
        <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>
  </label>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md">
            <div class="form-group">
                <label class=" w-100">
    
    <div class="input-group rounded-0">
    <input type="text" class="form-control" name="text" value="" placeholder="Skriv för att filtrera">
      <div class="input-group-append">
        <button class="btn btn-outline-primary rounded-0" type="submit">Sök</button>
      </div>
    </div>
  </label>
            </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",
          "value": "2018-09-10"
        },
        "merge": true
      },
      {
        "component": "form-date",
        "context": {
          "label": "Datum till",
          "value": "2018-12-10"
        },
        "merge": true
      }
    ],
    [
      {
        "component": "form-select",
        "context": {
          "label_": "Intresseområde",
          "label-modifiers": [
            "w-100"
          ],
          "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": {
          "label_": "Händelsetyp",
          "label-modifiers": [
            "w-100"
          ],
          "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"
      }
    ]
  ]
}

There are no notes for this item.