<div class="filter-form">
<h2 class="filter-form__label">Lorem Ipsum Title</h2>
<form class="iastate22-form iastate22-form--inline" id="InlineForm" action="#" method="post">
<div class="form-item">
<label for="name">Text Input</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div class="form-item">
<label for="name">Text Input</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div class="form-item">
<label for="name">Text Input</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div class="form-item">
<label for="name">Text Input</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<button type="submit">Submit<span class="arrow"></span>
</button>
</div>
</form>
</div>
<div class="filter-form">
{% if label %}
<h2 class="filter-form__label">{{ label }}</h2>
{% endif %}
<form class="iastate22-form iastate22-form--inline" id="InlineForm" action="#" method="post">
<div class="form-item">
<label for="name">Text Input</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div class="form-item">
<label for="name">Text Input</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div class="form-item">
<label for="name">Text Input</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div class="form-item">
<label for="name">Text Input</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<button type="submit">Submit<span class="arrow"></span>
</button>
</div>
</form>
</div>
{
"label": "Lorem Ipsum Title"
}
.filter-form {
background-color: $iastate-red;
@extend %outer-pad-x;
padding-top: 60px;
position: relative;
padding-bottom: rem(35);
@include media-breakpoint-up(md) {
padding-bottom: rem(65);
}
@include media-breakpoint-up(xl) {
padding-right: rem(184);
}
main & {
margin-left: rem(-36);
margin-right: rem(-36);
@include media-breakpoint-up(md) {
margin-left: rem(-70);
margin-right: rem(-70);
}
@include media-breakpoint-up(xl) {
margin-left: rem(-190);
margin-right: rem(-298);
}
}
&:before {
content: "";
position: absolute;
background-color: $iastate-red;
left: -50vw;
width: 150vw;
top: 0;
bottom: 0;
z-index: -1;
}
.form-item {
label,
.label {
color: $white;
}
input[type="text"],
select {
border: none;
}
button[type="submit"] {
@extend %iastate22-button--reverse;
}
}
}
.filter-form__label {
color: $white;
}
There are no notes for this item.