Modules

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 ml-auto">
            <nav class="nav">
                <ul class="nav-list">
                    <li class="nav-item"><a href="#" class="nav-link">...</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>

Variables #

The default properties and colors of the module are shown below. These are all specified in the source of framework. This is here for clarity and to simplify modification and overriding of values.


// colors
--brand-color: var(--text-default);
--brand-hover-color: var(--text-default);

// vars
--brand-font-size: var(--type-scale-16);
--brand-font-weight: bold;
--brand-text-transform: none;
--brand-letter-spacing: 0;