Table

Comparison Topic Column Topic Column Topic Column Topic Column Topic
Comparison Topic Here Yes No Yes No
Comparison Topic Here No Yes No Yes
Comparison Topic Here Yes No Yes No
Comparison Topic Here No Yes No Yes
i Table Marks

Markup

<div class="table-wrapper">
	
	<table class="table-block">
		
		<thead>
			<tr>
				<th>Comparison Topic</th>
				<th>Column Topic</th>
				<th>Column Topic</th>
				<th>Column Topic</th>
				<th>Column Topic</th>
			</tr>
		</thead>
		
		<tbody>
			
			<tr>
				<td>Comparison Topic Here
					<i class="icon icon-arrow-circle">
			        	<svg>
			        		<use xlink:href="img/spritemap.svg#icon-arrow-circle"></use>
			        	</svg>
			        </i>
				</td>
				<td data-label="Column Topic" class="selected">
					<i class="icon icon-mark">
						<svg><use xlink:href="img/spritemap.svg#icon-cancel"></use><svg>
					</i>
					<span class="visuallyhidden">Yes</span>
				</td>
				<td data-label="Column Topic">
					<span class="visuallyhidden">No</span>
				</td>
				<td data-label="Column Topic" class="selected">
					<i class="icon icon-mark">
						<svg><use xlink:href="img/spritemap.svg#icon-cancel"></use><svg>
					</i>
					<span class="visuallyhidden">Yes</span>
				</td>
				<td data-label="Column Topic">
					<span class="visuallyhidden">No</span>
				</td>
			</tr>
			
			<tr>
				<td>Comparison Topic Here
					<i class="icon icon-arrow-circle">
			        	<svg>
			        		<use xlink:href="img/spritemap.svg#icon-arrow-circle"></use>
			        	</svg>
			        </i>
				</td>
				<td data-label="Column Topic">
					<span class="visuallyhidden">No</span>
				</td>
				<td data-label="Column Topic" class="selected">
					<i class="icon icon-mark">
						<svg><use xlink:href="img/spritemap.svg#icon-cancel"></use><svg>
					</i>
					<span class="visuallyhidden">Yes</span>
				</td>
				<td data-label="Column Topic">
					<span class="visuallyhidden">No</span>
				</td>
				<td data-label="Column Topic" class="selected">
					<i class="icon icon-mark">
						<svg><use xlink:href="img/spritemap.svg#icon-cancel"></use><svg>
					</i>
					<span class="visuallyhidden">Yes</span>
				</td>
			</tr>

			<tr>
				<td>Comparison Topic Here
					<i class="icon icon-arrow-circle">
			        	<svg>
			        		<use xlink:href="img/spritemap.svg#icon-arrow-circle"></use>
			        	</svg>
			        </i>
				</td>
				<td data-label="Column Topic" class="selected">
					<i class="icon icon-mark">
						<svg><use xlink:href="img/spritemap.svg#icon-cancel"></use><svg>
					</i>
					<span class="visuallyhidden">Yes</span>
				</td>
				<td data-label="Column Topic">
					<span class="visuallyhidden">No</span>
				</td>
				<td data-label="Column Topic" class="selected">
					<i class="icon icon-mark">
						<svg><use xlink:href="img/spritemap.svg#icon-cancel"></use><svg>
					</i>
					<span class="visuallyhidden">Yes</span>
				</td>
				<td data-label="Column Topic">
					<span class="visuallyhidden">No</span>
				</td>
			</tr>

			<tr>
				<td>Comparison Topic Here
					<i class="icon icon-arrow-circle">
			        	<svg>
			        		<use xlink:href="img/spritemap.svg#icon-arrow-circle"></use>
			        	</svg>
			        </i>
				</td>
				<td data-label="Column Topic">
					<span class="visuallyhidden">No</span>
				</td>
				<td data-label="Column Topic" class="selected">
					<i class="icon icon-mark">
						<svg><use xlink:href="img/spritemap.svg#icon-cancel"></use><svg>
					</i>
					<span class="visuallyhidden">Yes</span>
				</td>
				<td data-label="Column Topic">
					<span class="visuallyhidden">No</span>
				</td>
				<td data-label="Column Topic" class="selected">
					<i class="icon icon-mark">
						<svg><use xlink:href="img/spritemap.svg#icon-cancel"></use><svg>
					</i>
					<span class="visuallyhidden">Yes</span>
				</td>
			</tr>

		</tbody>

	</table>

	<!-- Do not implement this link -->
	<a href="/inc/modules/?module=table" class="module-link">
		<i class="icon info-icon">i</i>
		<span class="tool-tip">Table Marks</span>
	</a>
	<!-- Do not implement this link -->

</div>
Comparison Topic Column Topic Column Topic Column Topic Column Topic
Comparison Topic Here Lorem ipsum dolor sit Mauris ac mi Cras ut blandit lorem. Donec suscipit feugiat lectus nec imperdiet.
Comparison Topic Here Suspendisse rutrum Fusce elementum tincidunt tellus venenatis adipiscing. Lorem Nullam eget egestas orci. Aenean pretium scelerisque
Comparison Topic Here Fusce sit amet Maecenas consequat interdum nibh, Aliquam erat volutpat. Nunc at viverra Suspendisse condimentum leo
Comparison Topic Here Quisque dictum Nunc vitae nulla et Cras dignissim accumsan tellus, Mauris ac mi
i Table Text

Markup

<div class="table-wrapper">
	
	<table class="table-block">
		
		<thead>
			<tr>
				<th>Comparison Topic</th>
				<th>Column Topic</th>
				<th>Column Topic</th>
				<th>Column Topic</th>
				<th>Column Topic</th>
			</tr>
		</thead>
		
		<tbody>
			
			<tr>
				<td>Comparison Topic Here
					<i class="icon icon-arrow-circle">
			        	<svg>
			        		<use xlink:href="img/spritemap.svg#icon-arrow-circle"></use>
			        	</svg>
			        </i>
				</td>
				<td data-label="Column Topic" class="selected">
					Lorem ipsum dolor sit
				</td>
				<td data-label="Column Topic">
					Mauris ac mi
				</td>
				<td data-label="Column Topic" class="selected">
					Cras ut blandit lorem.
				</td>
				<td data-label="Column Topic">
					Donec suscipit feugiat lectus nec imperdiet.
				</td>
			</tr>
			
			<tr>
				<td>Comparison Topic Here
					<i class="icon icon-arrow-circle">
			        	<svg>
			        		<use xlink:href="img/spritemap.svg#icon-arrow-circle"></use>
			        	</svg>
			        </i>
				</td>
				<td data-label="Column Topic">
					Suspendisse rutrum
				</td>
				<td data-label="Column Topic" class="selected">
					Fusce elementum tincidunt tellus venenatis adipiscing. Lorem
				</td>
				<td data-label="Column Topic">
					Nullam eget egestas orci.
				</td>
				<td data-label="Column Topic" class="selected">
					Aenean pretium scelerisque
				</td>
			</tr>

			<tr>
				<td>Comparison Topic Here
					<i class="icon icon-arrow-circle">
			        	<svg>
			        		<use xlink:href="img/spritemap.svg#icon-arrow-circle"></use>
			        	</svg>
			        </i>
				</td>
				<td data-label="Column Topic" class="selected">
					Fusce sit amet
				</td>
				<td data-label="Column Topic">
					Maecenas consequat interdum nibh,
				</td>
				<td data-label="Column Topic" class="selected">
					Aliquam erat volutpat. Nunc at viverra
				</td>
				<td data-label="Column Topic">
					Suspendisse condimentum leo
				</td>
			</tr>

			<tr>
				<td>Comparison Topic Here
					<i class="icon icon-arrow-circle">
			        	<svg>
			        		<use xlink:href="img/spritemap.svg#icon-arrow-circle"></use>
			        	</svg>
			        </i>
				</td>
				<td data-label="Column Topic">
					Quisque dictum
				</td>
				<td data-label="Column Topic" class="selected">
					Nunc vitae nulla et
				</td>
				<td data-label="Column Topic">
					Cras dignissim accumsan tellus,
				</td>
				<td data-label="Column Topic" class="selected">
					Mauris ac mi
				</td>
			</tr>

		</tbody>

	</table>

	<!-- Do not implement this link -->
	<a href="/inc/modules/?module=table" class="module-link">
		<i class="icon info-icon">i</i>
		<span class="tool-tip">Table Text</span>
	</a>
	<!-- Do not implement this link -->

</div>

May be used on any page to highlight or compare important information categorically. On mobile devices the table readjust to a vertical orientation and collapses content into a drawer system.

Variants: Title container color is set to red, but may be adjusted to suit content