<template>
  <div class="home">
    <h1>Choose components to test (H1)</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
    <table class="maintable" cellpadding="5" cellspacing="2">
        <tr>
            <td><router-link to="/grids">Responsive Grid System</router-link></td>
            <td><router-link to="/input">Text Input</router-link></td>
            <td><router-link to="/switch">Switch and Loaders</router-link></td>
            <td><router-link to="/carousel">Carousel</router-link></td>
            <td><router-link to="/contextMenu">ContextMenu</router-link></td>
        </tr>
        <tr>
            <td><router-link to="/selectize">Selectize</router-link></td>
            <td><router-link to="/datatable">Data Table</router-link></td>
            <td><router-link to="/slider">Slider</router-link></td>
            <td><router-link to="/accord">Accordion</router-link></td>
        </tr>
        <tr>
            <td><router-link to="/tabs">Tabs</router-link></td>
            <td><router-link to="/buttons">Buttons</router-link></td>
            <td><router-link to="/section">Form Section</router-link></td>
            <td><router-link to="/step">Stepper</router-link></td>
        </tr>
    </table>
  </div>
</template>
<style lang="scss">
.maintable {
	text-align: center;
	width: 100%;
}
</style>
