| 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 |
<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 |
<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