<html>
<head>
<title>Pattern</title>
</head>
<body data-prismjs-copy-timeout="1500">
<div class="tab-group" id="status-report">
<div class="status-report status-report-structure" data-tab="by&nbsp;structure">
<table class="custom" role="presentation">
<tbody>
<tr>
<td colspan="2">This pattern doesn't exist (1)</td>
</tr>
<tr>
<td><a href="./?p=this pattern doesn't exist"> This pattern doesn't exist</a></td>
<td><span class="status-deprecated">Deprecated</span></td>
</tr>
<tr>
<td colspan="2">Colours (1)</td>
</tr>
<tr>
<td><a href="./?p=colours"> Colours</a></td>
<td><span class="status-complete">Complete</span></td>
</tr>
<tr>
<td colspan="2">Components (4)</td>
</tr>
<tr>
<td><a href="./?p=components"> Components</a></td>
<td><span class="status-complete">Complete</span></td>
<tr>
<td><a href="./?p=components/sticky-note"> Sticky note</a></td>
<td><span class="status-complete">Complete</span></td>
</tr>
<tr>
<td><a href="./?p=components/switch"> Switch</a></td>
<td><span class="status-in-progress">In progress</span></td>
</tr>
<tr>
<td><a href="./?p=components/tooltip"> Tooltip</a></td>
<td><span class="status-in-progress">In progress</span></td>
</tr>
</tr>
<tr>
<td colspan="2">Layouts (4)</td>
</tr>
<tr>
<td><a href="./?p=layouts"> Layouts</a></td>
<td><span class="status-complete">Complete</span></td>
<tr>
<td><a href="./?p=layouts/header"> Header</a></td>
<td><span class="status-in-progress">In progress</span></td>
</tr>
<tr>
<td><a href="./?p=layouts/breakpoints"> Breakpoints</a></td>
<td><span class="status-in-progress">In progress</span></td>
</tr>
<tr>
<td><a href="./?p=layouts/tabs"> Tabs</a></td>
<td><span class="status-in-progress">In progress</span></td>
</tr>
</tr>
<tr>
<td colspan="2">Status (1)</td>
</tr>
<tr>
<td><a href="./?p=status"> Status</a></td>
<td><span class="status-complete">Complete</span></td>
</tr>
</tbody>
</table>
</div>
<div class="status-report status-report-status" data-tab="by&nbsp;status">
<table role="presentation">
<tbody>
<tr>
<td colspan="2"><span class="status-not-started">Not started (0)</span></td>
</tr>
<tr>
<td colspan="2"><span class="status-in-progress">In progress (5)</span></td>
</tr>
<tr>
<td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
<td>Layouts</td>
</tr>
<tr>
<td> <a href="./?p=layouts/header">Header</a></td>
<td>Layouts</td>
</tr>
<tr>
<td> <a href="./?p=components/switch">Switch</a></td>
<td>Components</td>
</tr>
<tr>
<td> <a href="./?p=layouts/tabs">Tabs</a></td>
<td>Layouts</td>
</tr>
<tr>
<td> <a href="./?p=components/tooltip">Tooltip</a></td>
<td>Components</td>
</tr>
<tr>
<td colspan="2"><span class="status-complete">Complete (5)</span></td>
</tr>
<tr>
<td> <a href="./?p=colours">Colours</a></td>
<td></td>
</tr>
<tr>
<td> <a href="./?p=components">Components</a></td>
<td></td>
</tr>
<tr>
<td> <a href="./?p=layouts">Layouts</a></td>
<td></td>
</tr>
<tr>
<td> <a href="./?p=status">Status</a></td>
<td></td>
</tr>
<tr>
<td> <a href="./?p=components/sticky-note">Sticky note</a></td>
<td>Components</td>
</tr>
<tr>
<td colspan="2"><span class="status-deprecated">Deprecated (1)</span></td>
</tr>
<tr>
<td> <a href="./?p=this pattern doesn't exist">This pattern doesn't exist</a></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="status-report status-report-alpha" data-tab="alphabetical">
<table role="presentation">
<tbody>
<tr>
<td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
<td><span><span class="status-in-progress">In Progress</span></span></td>
<td>Layouts</td>
</tr>
<tr>
<td> <a href="./?p=colours">Colours</a></td>
<td><span><span class="status-complete">Complete</span></span></td>
<td></td>
</tr>
<tr>
<td> <a href="./?p=components">Components</a></td>
<td><span><span class="status-complete">Complete</span></span></td>
<td></td>
</tr>
<tr>
<td> <a href="./?p=layouts/header">Header</a></td>
<td><span><span class="status-in-progress">In Progress</span></span></td>
<td>Layouts</td>
</tr>
<tr>
<td> <a href="./?p=layouts">Layouts</a></td>
<td><span><span class="status-complete">Complete</span></span></td>
<td></td>
</tr>
<tr>
<td> <a href="./?p=status">Status</a></td>
<td><span><span class="status-complete">Complete</span></span></td>
<td></td>
</tr>
<tr>
<td> <a href="./?p=components/sticky-note">Sticky note</a></td>
<td><span><span class="status-complete">Complete</span></span></td>
<td>Components</td>
</tr>
<tr>
<td> <a href="./?p=components/switch">Switch</a></td>
<td><span><span class="status-in-progress">In Progress</span></span></td>
<td>Components</td>
</tr>
<tr>
<td> <a href="./?p=layouts/tabs">Tabs</a></td>
<td><span><span class="status-in-progress">In Progress</span></span></td>
<td>Layouts</td>
</tr>
<tr>
<td> <a href="./?p=this pattern doesn't exist">This pattern doesn't exist</a></td>
<td><span><span class="status-deprecated">Deprecated</span></span></td>
<td></td>
</tr>
<tr>
<td> <a href="./?p=components/tooltip">Tooltip</a></td>
<td><span><span class="status-in-progress">In Progress</span></span></td>
<td>Components</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>