Icon With Text¶

Styles for Icon With Text used in icon-with-text module.

Structurally there is one main element .icon-with-text which contains following elements:

.icon-with-text__item
.icon-with-text__wrapper
.icon-with-text__image
.icon-with-text__content
.icon-with-text__title

It also contains following class modifiers:

.icon-with-text__position_below
.icon-with-text__position_above
.icon-with-text__position_right
.icon-with-text__position_left

Example¶

Here is an example of Icon With Text element usage.

HTML

<div class="icon-with-text" style="--iconWithTextPadding: 10px; --iconWithTextBgColor: rgba(255, 255, 255, 0); --iconWithTextBorderRadius: 0; --iconWithTextBorderWidth: 0px; --iconWithTextTextColor: #121212;  --iconWithTextBorderColor: #121212;">
    <a href="http://example.com/" class="icon-with-text__item icon-with-text__position_below link link_no-underline " aria-label="meaingful description">
        <picture class="image">
            <img width="20" height="20" src="/link/to/my-image.svg" id="picture-914770f2-7247-48b1-a7e9-b7a4f602d80a.svg" alt="" class="icon-with-text__image" decoding="async" loading="lazy">
        </picture>
        <div class="icon-with-text__wrapper align-items-center">
            <p class="icon-with-text__content icon-with-text__title text-align-center">first line - bold text</p>
            <p class="icon-with-text__content icon-with-text__subtitle text-align-center">second line regular text</p>
        </div>
    </a>
</div>

LESS¶

You can modify any Iwont With Text less variable in your User Less section to change Icon With Text styles.

Icon With Text variables¶

Variables used to style Icon With Text.

@iconWithTextItemGap: @globalSpacing;
@iconWithTextItemLineGap: @iconWithTextItemGap / 4;

@iconWithTextPadding: var(--iconWithTextPadding, 10px);
@iconWithTextBgColor: var(--iconWithTextBgColor, @globalBodyBackgroundColor);
@iconWithTextTextColor: var(--iconWithTextTextColor, @globalFontColor);
@iconWithTextBorderRadius: var(--iconWithTextBorderRadius, @globalBorderRadius);
@iconWithTextBorderWidth: var(--iconWithTextBorderWidth, 1px);
@iconWithTextBorderStyle: var(--iconWithTextBorderStyle, solid);
@iconWithTextBorderColor: var(--iconWithTextBorderColor, #000);
@iconWithTextBorderRadius: var(--iconWithTextBorderRadius, 0);

If you want to change Icon With Text styles, you can just change the variables. To change a default spacing between text lines in the moudle, just modify @iconWithTextItemLineGap variable.

@iconWithTextItemLineGap: 8px;

Icon With Text standard styles¶

Here are standard Icon With Text styles.

.icon-with-text {
    .generate-borders(@iconWithTextBorderWidth, @iconWithTextBorderStyle, @iconWithTextBorderColor);

    &__item {
        display: flex;
        flex-direction: column;
        text-align: center;
        width: fit-content;
        place-self: center;
        padding: @iconWithTextPadding;
        gap: @iconWithTextItemGap;
        background-color: @iconWithTextBgColor;
        border-radius: ~'calc(@{iconWithTextBorderRadius} * 1%)';
        overflow: hidden;
    }
    &__position {
        &_left {
            flex-direction: row-reverse;
            justify-content: flex-start;
            align-items: center;
        }
        &_right {
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
        }
        &_above {
            justify-content: center;
            flex-direction: column-reverse;
        }
        &_below {
            justify-content: center;
        }
    }

    &__wrapper {
        display: flex;
        flex-direction: column;
        gap: @iconWithTextItemLineGap;
        p:not(:last-child) {
            margin-bottom: 0;
        }
    }

    &__image {
        display: block;
        margin-inline: auto;
    }
    &__content {
        display: block;
        color: @iconWithTextTextColor;
    }
    &__title {
        font-weight: @fontWeightBold;
    }
}

Modules reference¶

Icon With Text