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 #

You can create your own modifiers with different caret parameters. To do this, add the necessary caret classes and their variables to your custom SCSS. See also how to customize the framework.

.caret-large {
    // vars
    --caret-size: 32px;

    // props
    top: -2px;
    margin-left: -3px;
    font-weight: bold;
}

In HTML it will look like this:

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

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.

--caret-size: 1em;