Iconbox

Usage #

By default, Iconbox has several preset padding sizes.

// =Scales
$scales: (
    iconbox: (
        small: 4px,
        medium: 6px,
        base: 8px,
        large: 10px,
        huge: 12px
    )
);

And Superkube automatically generates modifier classes for them, where iconbox class without modifier suffix is the base size.

• iconbox-small
• iconbox-medium
• iconbox
• iconbox-large
• iconbox-huge

Use the module modifiers together with the Background utility to make a box with a background around the icon.

<span class="iconbox bg-silver radius-large">
    <span class="icon icon-16">
        <svg ...>
    </span>
</span>
<span class="iconbox iconbox-large bg-dark radius-circle">
    <span class="icon icon-light icon-16">
        <svg ...>
    </span>
</span>

Extend #

You can add your own iconbox size or override an existing one by extending $scales. See also how to work with scales for modules.

// =Scales
$scales: map-extend($scales, (
    iconbox: (
        base: 5px, // override
        mega: 20px // add new one
    )
));

Superkube will automatically create a new size class with the specified value.

<span class="iconbox iconbox-mega">...</span>

Variables #

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

// params
--iconbox-space: {space-value};