Icon block: code & specs

This page documents the expected code output and structure necessary to display buttons correctly in the UI.

Icon block base code

The base code for an icon block uses the .icon-block class, containing the chosen icon inside.

    
html

<div class="icon-block">
    <i class="fa-regular fa-ghost"></i>
</div>

Size

For different size icon blocks add icon-block-xs, icon-block-sm, icon-block-lg, icon-block-xl or icon-block-xxl classes for extra small, small, large, extra large and extra extra large icon blocks.

Extra small

html

<div class="icon-block icon-block-xs">
    <i class="fa-regular fa-sparkles"></i>
</div>

Small

html

<div class="icon-block icon-block-sm">
    <i class="fa-regular fa-car"></i>
</div>

Large

html

<div class="icon-block icon-block-lg">
    <i class="fa-regular fa-phone"></i>
</div>

Extra large

html

<div class="icon-block icon-block-xl">
    <i class="fa-regular fa-flag"></i>
</div>

Extra extra large

html

<div class="icon-block icon-block-xxl">
    <i class="fa-regular fa-pizza-slice"></i>
</div>

Expressive colours

To apply the expressive colour palette, add .expressive-light or .expressive-dark to the icon block, depending on the required theme.

    
html

<div class="icon-block expressive-light">
    <i class="fa-regular fa-rocket-launch"></i>
</div>

<div class="icon-block expressive-dark">
    <i class="fa-regular fa-ufo"></i>
</div>

Expressive colour palette

The primary expressive palette is applied by default. To switch to a different expressive palette, add either .expressive-secondary, .expressive-tertiary, or .expressive-quaternary.

    
html

<div class="icon-block expressive-light expressive-secondary">
    <i class="fa-regular fa-cloud"></i>
</div>

<div class="icon-block expressive-dark expressive-secondary">
    <i class="fa-regular fa-bolt"></i>
</div>

<div class="icon-block expressive-light expressive-tertiary">
    <i class="fa-regular fa-mug-hot"></i>
</div>

<div class="icon-block expressive-dark expressive-tertiary">
    <i class="fa-regular fa-pizza-slice"></i>
</div>

<div class="icon-block expressive-light expressive-quaternary">
    <i class="fa-regular fa-file"></i>
</div>

<div class="icon-block expressive-dark expressive-quaternary">
    <i class="fa-regular fa-folders"></i>
</div>