<div id="shortcuts" class="page-layout simple fullwidth" perfect-scrollbar>

    <!-- HEADER -->
    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
        <div fxLayout="column" fxLayoutAlign="center start">
            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
                <md-icon class="secondary-text s-16">home</md-icon>
                <md-icon class="secondary-text s-16">chevron_right</md-icon>
                <span class="secondary-text">Components</span>
            </div>
            <div class="h2 mt-16">Shortcuts</div>
        </div>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content p-24">

        <p>
            <code>fuse-shortcuts</code> is a custom built Fuse component allows you to create and save shortcuts from
            the navigation model.
        </p>

        <div class="my-48">
            <h2>Usage</h2>
            <p class="md-grey-200-bg py-8">
                <fuse-hljs lang="html" class="source-code">
                    <textarea #source hidden="hidden">
                        <fuse-shortcuts></fuse-shortcuts>
                    </textarea>
                </fuse-hljs>
            </p>
        </div>

        <div class="my-48">
            <h2>Model</h2>
            <p class="py-8">
                <code>&lt;fuse-shortcuts&gt;&lt;/fuse-shortcuts&gt;</code> uses the same service with navigation
                component to populate the shortcuts. It can search the navigation items as well as pin and unpin them as
                shortcuts. It uses browser cookies to store the shortcuts.
            </p>
        </div>

    </div>

</div>