---
title: Logos
layout: nested-component.html
---
<h1 class="docs--page-header">
    Logos
</h1>

<p class="docs--page-description">
    The "nStack" logo is used throughout the backends and inherits the <code>$primary</code> or <code>$secondary</code> colors.
    <br>
    You can combine any of the classes listed below to modify the look of the logo, eg. <code>&lt;div class="logo logo-secondary logo-flat"&gt;</code>.
</p>

<table class="docs--configuration-options">
    <thead>
        <tr>
            <th>
                Class
            </th>
            <th>
                Description
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <code>.logo</code>
            </td>
            <td>
                <code>Default logo size and primary gradient color</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>.logo-small</code>
            </td>
            <td>
                <code>Small logo size</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>.logo-large</code>
            </td>
            <td>
                <code>Large logo size</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>.logo-xlarge</code>
            </td>
            <td>
                <code>Extra large logo size</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>.logo-secondary</code>
            </td>
            <td>
                <code>Secondary logo color</code>
            </td>
        </tr>
        <tr>
            <td>
                <code>.logo-flat</code>
            </td>
            <td>
                <code>Non-gradient color (primary or secondary)</code>
            </td>
        </tr>
    </tbody>
</table>

<div class="docs--logo-selector">
    <p class="text-warning-dark">
        Note: Because we use inline SVG's and Gradients you can only have <strong>one</strong> logo variation per page.
    </p>
    <label>
        Logo Sizes:
        <select id="logoSizePicker">
            <option value="" selected>Default Logo</option>
            <option value="logo-small">Small Logo</option>
            <option value="logo-large">Large Logo</option>
            <option value="logo-xlarge">Extra Large Logo</option>
        </select>
    </label>
    <label>
        Logo Colors:
        <select id="logoColorPicker">
            <option value="" selected>Flat Logo Color</option>
            <option value="logo-flat">Flat Logo Color</option>
            <option value="logo-secondary">Secondary Logo Color</option>
            <option value="logo-secondary logo-flat">Secondary Flat Color</option>
        </select>
    </label>
</div>
<div class="docs--logo-example">
    <div class="logo" id="sgLogo">
        <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
            <defs>
                <linearGradient x1="0%" y1="100%" x2="100%" y2="0%" id="logoGradient">
                    <stop class="logo-gradient__0"  offset="0%"></stop>
                    <stop class="logo-gradient__100" stop-color="#37EF81" offset="100%"></stop>
                </linearGradient>
            </defs>
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g fill="url(#logoGradient)">
                    <g>
                        <path d="M32,35.7206969 L40,31.1024111 L16,17.2464111 L20,14.9366969 L16,12.6269826 L8,17.2464111 L32,31.1024111 L28,33.4121254 L32,35.7206969 Z M36,0.829268293 L28,5.44755401 L32,7.75726829 L36,5.44755401 L44,10.0669826 L44,37.7789826 L36,42.3984111 L16,30.8509826 L20,28.5412683 L16,26.2326969 L8,30.8509826 L36,47.0166969 L48,40.0886969 L48,7.75726829 L36,0.829268293 Z M12,42.6486969 L4,38.0304111 L4,10.3172683 L12,5.69898258 L32,17.2464111 L28,19.5549826 L32,21.8646969 L40,17.2464111 L12,1.07955401 L0,8.00869686 L0,40.3401254 L12,47.2681254 L20,42.6486969 L16,40.3401254 L12,42.6486969 Z"></path>
                    </g>
                </g>
            </g>
        </svg>
    </div>
</div>

<script>
    (function() {
        var sizeSelect = document.getElementById('logoSizePicker');
        var colorSelect = document.getElementById('logoColorPicker');
        
        var logo = document.getElementById('sgLogo');
    
        sizeSelect.onchange = function() {
            console.log('1');
            logo.classList = 'logo ' + this.value + ' ' + colorSelect.value;
        };
        colorSelect.onchange = function() {
            console.log('2');
            logo.classList = 'logo ' + this.value + ' ' + sizeSelect.value;
        };
    })();
</script>

<div class="docs--code-example">
    <div class="docs--code-example__output">
        
    </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="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
            </div>
        </div>
        <div class="tab-content docs--code-example__code-blocks">
            <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane active" id="outputBLADE">
<pre><code class="language-php">&lt;div class="logo ..."&gt;@include('nodes.backend::partials.elements.logo-svg')&lt;/div&gt;
</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>