nodes-ui/doc/pages/components/app-tiles.html

UI Components for Nodes Backends

---
title: App-tiles
layout: component.html
---
<h1 id="topOfPage" class="docs--page-header">App-tiles</h1>

<p class="docs--page-description">
    Designed to be used in the block-layout lists these components are designed to act as easy launchers / shortcuts for Applications and features.
    <br>
    App-tiles uses flex-box layouts and will center content both horizontally and vertically.
    <br>
    You can put any content you want inside of app-tiles, but be aware of how the tile scales (or does not scale) to fit.
    <br>
    Read all about how to use the block-layout grid system <a href="{{rel 'block-layout.html'}}">here</a>.
</p>

<h2 id="basic" class="docs--section-header">
    Basic
</h2>
<p class="docs--section-description">
    In its most basic configuration, an app-tile does not do much. Scroll onwards to see how to combine css-classes and markup to build good looking tiles.
</p>
<div class="docs--code-example">
    <div class="docs--code-example__output">
        <ul class="small-block-layout-2 medium-block-layout-3 large-block-layout-2 x-large-block-layout-4">
            <li>
                <div class="app-tile">
                    Basic app-tile
                </div>
            </li>
        </ul>
    </div>
    <div class="docs--code-example__code">
        <p class="docs--code-example__loader">Loading...</p>
        <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
            </div>
        </div>
        <div class="tab-content docs--code-example__code-blocks">
            <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
        </div>
        <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
    </div>
</div>

<h2 id="aspectRatio" class="docs--section-header">
    Aspect Ratio
</h2>
<p class="docs--section-description">
    One common way of presenting tiles is with an intrisinct layout. Wrap an app-tile in a special aspect-ratio container to have it scale its height according to its width based on the desired aspect-ratio.
</p>
<div class="docs--panel docs--panel--warning">
    <p>
        Be aware that wrapping an app-tile in an aspect-ratio container will "lock" the height of the tile. Overflowing content will be clipped off.
    </p>
</div>
<div class="docs--code-example">
    <div class="docs--code-example__output">
        <ul class="small-block-layout-2 medium-block-layout-3 large-block-layout-2 x-large-block-layout-4">
            <li>
                <div class="app-tile-aspect-ratio app-tile-aspect-ratio--1-1">
                    <div class="app-tile">
                        App-tile 1:1
                    </div>
                </div>
            </li>
            <li>
                <div class="app-tile-aspect-ratio app-tile-aspect-ratio--2-1">
                    <div class="app-tile">
                        App-tile 2:1
                    </div>
                </div>
            </li>
            <li>
                <div class="app-tile-aspect-ratio app-tile-aspect-ratio--1-2">
                    <div class="app-tile">
                        App-tile 1:2
                    </div>
                </div>
            </li>
            <li>
                <div class="app-tile-aspect-ratio app-tile-aspect-ratio--4-3">
                    <div class="app-tile">
                        App-tile 4:3
                    </div>
                </div>
            </li>
            <li>
                <div class="app-tile-aspect-ratio app-tile-aspect-ratio--16-9">
                    <div class="app-tile">
                        App-tile 16:9
                    </div>
                </div>
            </li>
            <li>
                <div class="app-tile-aspect-ratio app-tile-aspect-ratio--16-9">
                    <div class="app-tile">
                        I am here to show you what happens when you put too much content into an aspect-ratio app-tile.
                        I am here to show you what happens when you put too much content into an aspect-ratio app-tile.
                        I am here to show you what happens when you put too much content into an aspect-ratio app-tile.
                        I am here to show you what happens when you put too much content into an aspect-ratio app-tile.
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="docs--code-example__code">
        <p class="docs--code-example__loader">Loading...</p>
        <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
            </div>
        </div>
        <div class="tab-content docs--code-example__code-blocks">
            <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
        </div>
        <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
    </div>
</div>

<h2 id="whiteSpace" class="docs--section-header">
    White-space
</h2>
<p class="docs--section-description">
    Control the padding of your app-tiles using these white-space modifier classes on the app-tile.
</p>
<div class="docs--code-example">
    <div class="docs--code-example__output">
        <ul class="small-block-layout-2 medium-block-layout-3 large-block-layout-2 x-large-block-layout-4">
            <li>
                <div class="app-tile">
                    Default padding
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--xs">
                    Extra small padding
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--sm">
                    Small padding
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--lg">
                    Large padding
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--xl">
                    Extra large padding
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--no-padding">
                    No padding
                </div>
            </li>
        </ul>
    </div>
    <div class="docs--code-example__code">
        <p class="docs--code-example__loader">Loading...</p>
        <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
            </div>
        </div>
        <div class="tab-content docs--code-example__code-blocks">
            <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
        </div>
        <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
    </div>
</div>

<h2 id="icons" class="docs--section-header">
    Using icons
</h2>
<p class="docs--section-description">
    Want to have a prominent icon on your app-tile? You can do that by adding the <code>app-tile--icon</code> modifier class to your tile.
    <br>
    Add the <code>app-tile__icon</code> to your icon-font, image or svg and control its sizing using the <code>app-tile__icon--small</code>, and <code>app-tile__icon--large</code> classes respectively.
    <br>
    We also offer the special <code>cover</code> modifier instead of the <code>icon</code>. This is very useful for thumbnails.
    <br>
    Last, but not least, you can make the entire tile clickable by nesting an <code>&lt;a&gt;</code> tag directly inside the tile and adding a <code>app-tile--link</code> modifier to the tile (works with all types of tiles).
</p>
<div class="docs--code-example">
    <div class="docs--code-example__output">
        <ul class="small-block-layout-2 medium-block-layout-3 large-block-layout-2 x-large-block-layout-4">
            <li>
                <div class="app-tile app-tile--icon">
                    <a href="#">
                        <i class="fa fa-search app-tile__icon"></i>
                        Search our database...
                    </a>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--link app-tile--icon">
                    <a href="#">
                        <i class="fa fa-search app-tile__icon app-tile__icon--small"></i>
                        Search our database...
                    </a>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--link app-tile--icon">
                    <a href="#">
                        <i class="fa fa-search app-tile__icon app-tile__icon--large"></i>
                        Search our database...
                    </a>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--icon">
                    <img src="http://placehold.it/500x500" class="app-tile__icon">
                    <a href="#">Watch this video</a>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--icon">
                    <img src="http://placehold.it/500x500" class="app-tile__icon app-tile__icon--small">
                    <a href="#">Watch this video</a>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--icon">
                    <img src="http://placehold.it/500x500" class="app-tile__icon app-tile__icon--large">
                    <a href="#">Watch this video</a>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--cover">
                    <img src="http://placehold.it/500x200" class="app-tile__cover">
                    <a href="#">Watch this video</a>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--link app-tile--icon">
                    <a href="#">
                        <i class="fa fa-search app-tile__icon"></i>
                        Launch Application
                    </a>
                </div>
            </li>
        </ul>
    </div>
    <div class="docs--code-example__code">
        <p class="docs--code-example__loader">Loading...</p>
        <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
            </div>
        </div>
        <div class="tab-content docs--code-example__code-blocks">
            <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
        </div>
        <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
    </div>
</div>

<h2 id="colors" class="docs--section-header">
    Colors
</h2>
<p class="docs--section-description">
    Make app-tiles stand out and draw attention by coloring them.
</p>
<div class="docs--code-example">
    <div class="docs--code-example__output">
        <ul class="small-block-layout-2 medium-block-layout-3 large-block-layout-2 x-large-block-layout-4">
            <li>
                <div class="app-tile app-tile--primary">
                    <h2>Income</h2>
                    <p>$3.000</p>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--secondary">
                    <h2>Income</h2>
                    <p>$3.000</p>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--info">
                    <h2>Income</h2>
                    <p>$3.000</p>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--success">
                    <h2>Income</h2>
                    <p>$3.000</p>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--warning">
                    <h2>Income</h2>
                    <p>$3.000</p>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--danger">
                    <h2>Income</h2>
                    <p>$3.000</p>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--gray-dark">
                    <h2>Income</h2>
                    <p>$3.000</p>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--gray-light">
                    <h2>Income</h2>
                    <p>$3.000</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="docs--code-example__code">
        <p class="docs--code-example__loader">Loading...</p>
        <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
            </div>
        </div>
        <div class="tab-content docs--code-example__code-blocks">
            <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
        </div>
        <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
    </div>
</div>

<h2 id="banners" class="docs--section-header">
    Banners
</h2>
<p class="docs--section-description">
    Sometimes we have features or areas inside a backend that are not fully implemented, running in beta or for some other reason needs to be highlighted.
    <br>
    You can use these app-tile-banners to make your tiles stand out.
</p>
<div class="docs--code-example">
    <div class="docs--code-example__output">
        <ul class="small-block-layout-2 medium-block-layout-3 large-block-layout-2 x-large-block-layout-4">
            <li>
                <div class="app-tile">
                    <a href="#">
                        Search our database...
                    </a>
                    <div class="app-tile__banner app-tile__banner--primary">NEW!</div>
                </div>
            </li>
            <li>
                <div class="app-tile-aspect-ratio app-tile-aspect-ratio--1-1">
                    <div class="app-tile app-tile--link app-tile--icon">
                        <a href="#">
                            <i class="fa fa-search app-tile__icon app-tile__icon--small"></i>
                            Search our database...
                        </a>
                        <div class="app-tile__banner app-tile__banner--secondary">Updated</div>
                    </div>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--link app-tile--icon">
                    <a href="#">
                        <i class="fa fa-search app-tile__icon app-tile__icon--large"></i>
                        Search our database...
                    </a>
                    <div class="app-tile__banner app-tile__banner--info">On Sale!</div>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--icon">
                    <img src="http://placehold.it/500x500" class="app-tile__icon">
                    <a href="#">Watch this video</a>
                    <div class="app-tile__banner app-tile__banner--success">Success</div>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--icon">
                    <img src="http://placehold.it/500x500" class="app-tile__icon app-tile__icon--small">
                    <a href="#">Watch this video</a>
                    <div class="app-tile__banner app-tile__banner--warning">Beta</div>
                </div>
            </li>
            <li>
                <div class="app-tile app-tile--icon">
                    <img src="http://placehold.it/500x500" class="app-tile__icon app-tile__icon--large">
                    <a href="#">Watch this video</a>
                    <div class="app-tile__banner app-tile__banner--danger">Offline</div>
                </div>
            </li>
        </ul>
    </div>
    <div class="docs--code-example__code">
        <p class="docs--code-example__loader">Loading...</p>
        <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
            </div>
        </div>
        <div class="tab-content docs--code-example__code-blocks">
            <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
        </div>
        <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
    </div>
</div>