Addons

• src
• forms
• addons.scss

Class list

Description

An .addons wraps around a .textbox or .icons, and can attach extra information or controls to the sides of it, by using an .addon.

<div class="addons">
    <span class="addon">$</span>
    <input type="number" class="textbox">
    <span class="addon">.00</span>
</div>

Addon interactive

Use the .interactive class on an .addon to use either a .button or .textbox within that .addon.

<div class="addons">
    <span class="addon interactive">
        <select class="textbox">
            <option value="" selected disabled>currency</option>
            <option value="dollars">dollars</option>
            <option value="dollarydoos">dollarydoos</option>
        </select>
    </span>
    <input type="number" class="textbox">
    <span class="addon interactive">
        <button class="button primary">submit</button>
    </span>
</div>

Font size scaling

Use the font size utility classes on an .addons to scale the elements within it.

<div class="addons h6 mb-2">
    <span class="addon interactive">
        <select class="textbox">
            <option value="" selected disabled>currency</option>
            <option value="dollars">dollars</option>
            <option value="dollarydoos">dollarydoos</option>
        </select>
    </span>
    <input type="number" class="textbox">
    <span class="addon interactive">
        <button class="button primary">submit</button>
    </span>
</div>
<div class="addons h3 mb-2">
    <span class="addon interactive">
        <select class="textbox">
            <option value="" selected disabled>currency</option>
            <option value="dollars">dollars</option>
            <option value="dollarydoos">dollarydoos</option>
        </select>
    </span>
    <input type="number" class="textbox">
    <span class="addon interactive">
        <button class="button primary">submit</button>
    </span>
</div>