Image Specifications Style Guide Menu

Results Form

Results 1-10 of 100

Markup

<div class="card results-form">

	<div class="copy-wrap cf">

		<div class="search-field">

			<form action="#">

				<div class="form-group">

					<label class="visuallyhidden" for="results-search">Search Topic:</label>

					<input id="results-search" class="form-input" type="search" placeholder="Search Topic">

					<button type="submit" class="button-link">
	                	<svg><use xlink:href="img/spritemap.svg#icon-search"></use><svg>
	            	</button>

				</div>

			</form>

		</div>

		<div class="results-amount">
			<p>Results <strong>1-10 of 100</strong></p>
		</div>

		<div class="search-toggles">

			<div class="radio">
				<label>
					<input type="radio" value="value" name="radio-group"> Radio Sample
					<div class="control-indicator"></div>
				</label>
			</div>

			<div class="radio">
				<label>
					<input type="radio" value="value" name="radio-group"> Radio Sample
					<div class="control-indicator"></div>
				</label>
			</div>

		</div>

	</div>

</div>

This form is designated to be used when displaying the search results. It should always be displayed with both the search list/results, and pagination (Pagination) should it be needed. Ideally no more than 10 results would be displayed on the search results page.