Caret

This module helps make a caret icon for buttons and links.

Usage #

To show a caret icon, you need to place a span tag with the caret class in an 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 with link-caret helper.

Collapse something


<a href="#" class="link-caret">... <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 push-right"></span>
            </a>
        </li>
        ...
    </ul>
</nav>

Size #

The caret module has a different size modifiers by default:

base - 14px
large - 18px
huge - 22px


<span class="caret"></span>
<span class="caret caret-large"></span>
<span class="caret caret-huge"></span>

Variants #

Use caret-strong to make the caret thickness 2px.

Learn more


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

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-mega {
    --caret-size: 32px;
    --caret-thickness: 2px
}

In HTML it will look like this:

Collapse


<a href="#" class="link-ghost link-caret">
    ...
    <span class="caret caret-mega"></span>
</a>

Variables #

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


// colors
--caret-color: currentColor;

// params
--caret-size: 14px;
--caret-thickness: 1px;