<div class="page">
    <header class="topbar" role="banner">
        <nav class="dashnav">
            <ul>
                <li class="sidebar-trigger"><a href="?sidebar=show"><svg width="30" height="30" class="icon icon-o-birdhouse"><use xlink:href="/assets/svg/core.svg#o-birdhouse" /></svg></a></li>
                <li><a href="/"><svg width="32" height="32" class="icon icon-o-dashboard"><use xlink:href="/assets/svg/core.svg#o-dashboard" /></svg></a></li>
                <li><a href="/"><svg width="32" height="32" class="icon icon-o-world"><use xlink:href="/assets/svg/core.svg#o-world" /></svg></a></li>
            </ul>
        </nav>

        <nav class="utilnav">
            <ul>
                <li><a href="/"><svg width="16" height="16" class="icon icon-search"><use xlink:href="/assets/svg/core.svg#search" /></svg> <span>Search</span></a></li>
                <li><a href="/" class="selected"><svg width="16" height="16" class="icon icon-gear"><use xlink:href="/assets/svg/core.svg#gear" /></svg> <span>Settings</span></a></li>
                <li><a href="/"><svg width="16" height="16" class="icon icon-user"><use xlink:href="/assets/svg/core.svg#user" /></svg> <span>My Account</span></a></li>
                <li><a href="/"><svg width="16" height="16" class="icon icon-question"><use xlink:href="/assets/svg/core.svg#question" /></svg> <span>Help</span></a></li>
                <li><a href="/" class="button logout ">Log out</a></li>
            </ul>
        </nav>
    </header>
    <div class="panels">
        <aside class="sidebar">

            <div class="sidebar-nav">
                <div class="appmenu-container">

                    <header>
                        <h2 class="sidebar-back"><a href="/" class="back"><svg width="12" height="12" class="icon icon-o-navigate-left"><use xlink:href="/assets/svg/core.svg#o-navigate-left" /></svg></a> <a href="/">My Site</a></h2>
                    </header>

                    <ul class="appmenu">
                        <li>
                            <a href="/" class="selected">Pages</a>
                            <a href="/pages/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li>
                            <a href="/">Blog</a>
                            <a href="/blog/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li>
                            <a href="/">Forms</a>
                            <span class="badge">22</span>
                        </li>
                        <li><a href="/">Shop</a></li>
                        <li>
                            <a href="/">Products</a>
                            <a href="/products/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li><a href="/">Orders</a></li>
                        <li><a href="/">Members</a></li>
                    </ul>

                    <h3>Organise</h3>
                    <ul class="appmenu">
                        <li><a href="/">Categories</a></li>
                        <li><a href="/">Assets</a></li>
                    </ul>

                </div>
                <div class="submenu-container">

                    <header>
                        <h2 class="sidebar-back"><a href="/" class="back"><svg width="12" height="12" class="icon icon-o-navigate-left"><use xlink:href="/assets/svg/core.svg#o-navigate-left" /></svg></a> <a href="/">My Site</a></h2>
                    </header>

                    <ul class="appmenu">
                        <li>
                            <a href="/" class="selected">Pages</a>
                            <a href="/pages/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li>
                            <a href="/">Blog</a>
                            <a href="/blog/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li>
                            <a href="/">Forms</a>
                            <span class="badge">22</span>
                        </li>
                        <li><a href="/">Shop</a></li>
                        <li>
                            <a href="/">Products</a>
                            <a href="/products/add"><svg width="8" height="8" class="icon icon-o-plus"><use xlink:href="/assets/svg/core.svg#o-plus" /></svg></a>
                        </li>
                        <li><a href="/">Orders</a></li>
                        <li><a href="/">Members</a></li>
                    </ul>

                    <h3>Organise</h3>
                    <ul class="appmenu">
                        <li><a href="/">Categories</a></li>
                        <li><a href="/">Assets</a></li>
                    </ul>

                </div>
            </div>

        </aside>

        <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
        <script src="/assets/js/sidebar.js"></script>
        <main class="main-panel">
            <div class="dashboard">
                <div class="widget ">
                    <div class="dash-content">
                        <header>
                            <h2>Widget name</h2>
                            <input type="submit" class="button button-small action-alert" value="Submit">

                        </header>

                        <div class="body  ">
                            <p>These can have anything inside them.</p>
                        </div>
                        <footer>Widget actions here</footer>
                    </div>
                </div>

                <div class="widget dash-double-width">
                    <div class="dash-content">
                        <header>
                            <h2>Widget name</h2>
                            <input type="submit" class="button button-small action-alert" value="Submit">

                        </header>

                        <div class="body dash-pad">
                            <div class="chart">
                                <div class="ct-chart ct-double-octave"></div>
                            </div>

                            <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
                            <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
                            <script>
                                var data = {
                                    series: [
                                        [6, 3, 5, 4, 7, 1, 6],
                                        [1, 2, 2, 3, 4, 7, 2]
                                    ]
                                };
                                var options = {
                                    chartPadding: 5,
                                    showPoint: false,
                                    lineSmooth: false,
                                    axisX: {
                                        offset: 0,
                                        showGrid: false,
                                        showLabel: false
                                    },
                                    axisY: {
                                        offset: 0,
                                        showGrid: false,
                                        showLabel: false
                                    }
                                };
                                new Chartist.Line('.ct-chart', data, options);
                            </script>
                        </div>
                    </div>
                </div>

                <div class="widget ">
                    <div class="dash-content">
                        <header>
                            <h2>Widget name</h2>
                            <input type="submit" class="button button-small action-alert" value="Submit">

                        </header>

                        <div class="body  ">
                            <p>These can have anything inside them.</p>
                        </div>
                        <footer>Widget actions here</footer>
                    </div>
                </div>

                <div class="widget dash-single-width dash-flip" ontouchstart="this.classList.toggle('hover');">
                    <div class="dash-flip-content">
                        <div class="dash-flip-front">
                            <header>
                                <h2>Widget 1 title</h2>
                            </header>
                            <div class="body dash-pad">
                                <p>These can have anything inside them.</p>
                            </div>
                            <footer>Widget actions here</footer>
                        </div>
                        <div class="dash-flip-back">
                            <div class="body dash-pad">
                                <p>The back</p>
                                <p>More</p>
                                <p>More</p>
                                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/18106206256_db458f0c58_z.jpg" alt="image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

    </div>
    </main>

</div>

</div>
<div class="page">
{{> @topbar }}
	<div class="panels">
		{{> @sidebar }}

		<main class="main-panel">
			<div class="dashboard">
			  {{ render "@widget" }}
			  {{ render "@widget-chart" }}
			  {{ render "@widget" }}
			  {{ render "@widget-flip" }}

			</div>
		</main>

	</div>

</div>
/* No context defined for this component. */
  • Content:
    .dashboard {
      height: 100vh;
      display: flex;
      flex-flow: row wrap;
      margin: $half-gutter 0 0 $half-gutter;
    }
    
    .widget {
      flex: 1 1 auto;
    }
    
  • URL: /components/raw/dashboard/dashboard.scss
  • Filesystem Path: src/components/99-pages/01-dashboard/dashboard.scss
  • Size: 144 Bytes

Dashboard

This works best as flex-direction column but that then requires a height in order to cause the wrapping.