Data display widget

		<div class="cui content-lookup bg-medium mb-lg ">
			<div class="row">
				<div class="cui col-md-6">
					<h2> {{ Content Title }}</h2>
					<label for="sub-search">Search</label>
					
					<!-- Search bar option for content lookup-->
					<div class="cui input-group">
						<input name="sub-search" type="search" class="form-control" aria-describedby="t-ex-group-Lorem"
						aria-required="true">
						<button class="cui btn-md primary">
							<span class="btn-wrapper">
								<span class="btn-text">Go</span>
							</span>
						</button>
					</div>	

					<!-- Dropdown option for content lookup -->
					<div class="cui input-group">
						<select class="form-control" aria-describedby="t-ex-group-Lorem" aria-required="true">
							<!-- repeat options as necessay -->
							<!-- Option value should start at 0 and count up for each option -->
							<option value="{{ 0 }}">{{ Option One }} </option>
						</select>
					
						<button class="cui btn-md primary">
							<span class="btn-wrapper">
								<span class="btn-text">Go</span>
							</span>
						</button>
					</div>	

					<p class="details" id="t-ex-group-Lorem">{{ Content Search Instruction }}</p>
					
				</div>
			</div>	

			<div class="row content-lookup-results">
				<div class="col-md-10">		
					<!-- List results option code -->
					<div class="subtitle-block cui">
						<h2> {{ Main Category Title }} </h2>
						<hr aria-hidden="true">
					</div>
					<div class="p-xxs">
						<h3> {{ Sub Category Title }} </h3>
						<ul>
							<!-- repeat list as necessary -->
							<li class="mb-xs ml-xs">
								<div> {{ Listing Title }} </div>
								<div class="ml-xs"> {{ Listing Paragraph }} </div>
							</li>
					</div>	

					<!-- Table results option code -->		
					<div class=" {{ table-responsive-md }} ">
						<!-- 'normal-view' class is to be added for the normal table view -->
						<table class="cui {{ normal-view }} bordered striped dark-header">
							<thead>
								<tr>
									<!-- repeat heading as necessary -->
									<th>{{ Heading }}</th>									
								</tr>
							</thead>
							<tbody>
								<tr>
									<!-- repeat table cell as necessary -->
									<td>{{ Content }}</td>
								</tr>
							</tbody>
						</table>
					</div>	
				</div>	

				<div class="cui col-md-10">
					<!-- Optional Load more code -->
					<button class="cui btn-md utility-btn mt-sm mb-md">Load More<span class="cicon-angle-right right" aria-hidden="true"></span></button>

					<!-- Optional Pagination Code -->
					<!-- Add a descriptive label for screen readers. -->
					<nav aria-label="label for Assistive Technology users">
					<!-- The `justify-content-center` class can be used to center the pagination. -->
						<ul class="pagination justify-content-center ">
							<!-- Previous page link -->
							<li class="page-item prev d-none">
								<a class="page-link" href="#">
									<span class="cui cicon-angle-left left" aria-hidden="true"></span>
									<span class="text">Prev</span>
								</a>
							</li>
		
							<!-- Numerical page items -->
							<!-- Mark the current page with the `active` class -->
							<!-- Mark the other numerical items with the `inactive` class -->
							<li class="page-item active">
								<a class="page-link" href="#">1</a>
							</li>
							<!-- repeat pages as necessary -->
							<li class="page-item inactive">
								<a class="page-link" href="#">{{ Page Number }}</a>
							</li>
		
							<!-- Next page link -->
							<li class="page-item next">
								<a class="page-link" href="#">
									<span class="text">Next</span>
									<span class="cui cicon-angle-right right" aria-hidden="true"></span>
								</a>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</div>