Brand

The brand module helps to show the logo and other brand elements.

Usage #

The brand module has the brand class with the display: flex property and positions the elements within itself horizontally centered.

The brand module can be used as an independent module.

<a href="#" class="brand">
    <span class="brand-symbol">
        <svg></svg>
    </span>
    <span class="brand-title ml-2 text-strong text-large">...</span>
</a>

Note: The brand module does not define the styles of the blocks inside, only their positioning horizontally centered. The brand-symbol and brand-title blocks are shown only as examples. You can use any other blocks or even modules instead, with any other names, depending on your needs.

Also the brand module can be used within other modules. For example, inside the Navbar module.


<div class="navbar">
    <div class="navbar-container">
        <div class="navbar-brand">
            <a href="#" class="brand">
                <span class="brand-symbol">
                    <svg></svg>
                </span>
                <span class="brand-title ml-2 text-strong text-large">...</span>
            </a>
        </div>
        <div class="navbar-nav push-right">
            <nav class="nav">
                <ul class="nav-list">
                    <li class="nav-item"><a href="#" class="nav-link">...</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.


// colors
--brand-color: var(--palette-black);
--brand-hover-color: var(--palette-black);

// params
--brand-font-size: 16px;
--brand-font-weight: bold;
--brand-text-transform: none;
--brand-letter-spacing: 0;