Styleguide

List Filter 

<form class="form-search">
    <div class="form-group row">
        <div class="col col-12 col-md-6">
            <label class="col-form-label" for="field1">Suche</label>
            <div class="col-form-input">
                <input type="text" class="form-control" id="field1" aria-describedby="" placeholder="Stichwort eingeben und mit <Enter> Suche starten...">
            </div>
        </div>
        <div class="col col-12 col-md-6">
            <label class="col-form-label" for="field2">Filter</label>
            <div class="col-form-input">
                <select class="form-control custom-select" id="field2">
                    <option>Bitte auswählen...</option>
                </select>
            </div>
        </div>
    </div>
</form>
 
<form class="form-search">
              <div class="form-group row">
              	<div class="col col-12 col-md-6">
                   <label class="col-form-label" for="field1">{{ search_label }}</label>
                   <div class="col-form-input">
                       <input type="text" class="form-control" id="field1" aria-describedby="" placeholder="{{ search_placeholder }}">
                   </div>                    	
              	</div>
				<div class="col col-12 col-md-6">
                   <label class="col-form-label" for="field2">{{ filter_label }}</label>
                   <div class="col-form-input">
                       <select class="form-control custom-select" id="field2">
                           <option>Bitte auswählen...</option>
                       </select>
                   </div>
           		</div>
              </div>
          </form>
 
{
  "search_label": "Suche",
  "search_placeholder": "Stichwort eingeben und mit <Enter> Suche starten...",
  "filter_label": "Filter"
}
  • Content: 
    .form-search {
	margin-bottom: 3rem;
	.col {
		margin-bottom: 2rem;
		@include media-breakpoint-up(md) {
			display: flex;
			margin-bottom: 0;
		}

		.col-form-label {
			padding-right: 20px;
			white-space: nowrap;
		}

		.col-form-input {
			width: 100%;
		}
	}
}
  • URL: /components/raw/list-filter/list-filter.scss
  • Filesystem Path: components/02-components/list-filter/list-filter.scss
  • Size: 267 Bytes

There are no notes for this item.