Caret

Usage #

To show a caret icon, you need to place a span tag with the caret class in an element. Caret icon is built-in to the Superkube as a font, so that the icon takes on the color of the element.

<button class="button">
    Button <span class="caret"></span>
</button>

<button class="button button-primary">
    Button <span class="caret"></span>
</button>

By default the caret icon is pointing down. Other directions can be set with modifiers.

<button class="button">
    Down <span class="caret caret-down"></span>
</button>
<button class="button">
    Up <span class="caret caret-up"></span>
</button>
<button class="button">
    Left <span class="caret caret-left"></span>
</button>
<button class="button">
    Right <span class="caret caret-right"></span>
</button>

Caret icon works not only in buttons, but also in links and in any other text.

<a href="#">Collapse something <span class="caret"></span></a>

If you make the element text bold, the icon inherits this and also becomes bold.

<a href="#" class="link-strong">Collapse <span class="caret"></span></a>

Here's an example of a caret icon in the menu links. This way you can show the states of the collapsable menu items.

<nav class="menu menu-pills">
    <ul class="menu-list">
        <li class="menu-item">
            <a href="#" class="menu-link">
                News <span class="caret caret-left ml-auto"></span>
            </a>
        </li>
        ...
    </ul>
</nav>

Variants #

In Superkube you can easily create module modifiers, which will be automatically generated from the variables. See also how to work with variants for modules.

To add a new variant of the module, extend $variants and specify variants with any CSS properties.

// =Variants
$variants: map-extend($variants, (
    caret: (
        large: (
            top: -2px,
            margin-left: -3px,
            font-size: 32px,
            font-weight: bold
        )
    )
));

In this case Superkube will automatically generate the caret-large class, with the properties specified in the variables. Now you have a modifier, with which you can quickly add or change the appearance of the module.

<a href="#" class="link-ghost">Collapse <span class="caret caret-large"></span></a>