Info Box¶

Styles for an info box used in product_review module.

Structurally .info-box contains following elements:

.info-box__header
.info-box__content

And following class modifiers:

.info-box_full-width-mobile
.info-box__content_flex

Example¶

Here is an example of info box element usage.

HTML

<div class="info-box">
    <header class="info-box__header">Info box header</header>
    <p class="info-box__content">Info box content</p>
</div>

Info Box tags¶

The .info-box classes were designed to be used with block elements like <div>. However, you can use them with any other element and customize it to your own needs.

LESS¶

You can modify any info box less variable in your User Less section to change a info box styles.

Info Box variables¶

Variables used to style an info box.

@infoBoxBorder: 1px solid @neutralColors100;
@infoBoxBorderRadius: 4px;
@infoBoxBgColor: @neutralColors50;
@infoBoxColor: @globalFontColorTertiary;
@infoBoxHeaderFontSize: 14;
@infoBoxContentFontSize: 12;
@infoBoxPadding: @globalSpacing;
@infoBoxHeaderMarginBottom: @globalSpacing * 0.25;
@infoBoxMinWidth: 288px;
@infoBoxFlexGap: @globalSpacing;
@infoBoxFullWidthMobileHorizontalSpacing: @globalSpacing * 3;
@infoBoxMaxWidth: 512px;

@infoBoxBorderSecondary: 1px solid @neutralColors200;
@infoBoxBgColorSecondary: transparent;
@infoBoxColorSecondary: @neutralColors900;

@infoBoxSPaddingVertical: @globalSpacing * 0.5;
@infoBoxSPaddingHorizontal: @globalSpacing * 0.5;

@infoBoxMPaddingVertical: @globalSpacing * 2;
@infoBoxMPaddingHorizontal: @globalSpacing * 1.5;

@infoBoxLPaddingVertical: @globalSpacing * 3;
@infoBoxLPaddingHorizontal: @globalSpacing * 4;

@infoBoxLPaddingVerticalMobile: @globalSpacing * 1.5;
@infoBoxLPaddingHorizontalMobile: @globalSpacing;

If you want to change info box styles, you can just change the variables. To change a default color just modify @infoBoxColor variable.

@infoBoxColor: red;

Info Box styles¶

Here are standard info box styles.

.info-box {
    min-width: @infoBoxMinWidth;
    border: @infoBoxBorder;
    border-radius: @infoBoxBorderRadius;
    background-color: @infoBoxBgColor;
    color: @infoBoxColor;
    padding: @infoBoxPadding;
    text-align: center;

    &_secondary {
        border: @infoBoxBorderSecondary;
        background-color: @infoBoxBgColorSecondary;
        color: @infoBoxColorSecondary;
    }

    &_s {
        padding: @infoBoxSPaddingVertical @infoBoxSPaddingHorizontal;
    }

    &_m {
        padding: @infoBoxMPaddingVertical @infoBoxMPaddingHorizontal;
    }

    &_l {
        padding: @infoBoxLPaddingVertical @infoBoxLPaddingHorizontal;
    }

    &_no-vertical-padding {
        padding-top: 0;
        padding-bottom: 0;
    }

    &_no-padding {
        padding: 0;
    }

    &_full-width {
        width: 100%;
    }

    &_full-height {
        height: 100%;
    }

    &__header {
        .font-size(@infoBoxHeaderFontSize);
        .weight-semibold();
        margin-bottom: @infoBoxHeaderMarginBottom;

        &_secondary {
            display: flex;
            align-items: center;
            gap: @globalSpacing / 2;
        }
    }

    &__content {
        .font-size(@infoBoxContentFontSize);

        &_flex {
            display: flex;
            gap: @infoBoxFlexGap;
        }
    }
}

@media screen and (max-width: @breakPointXs) {
    .info-box {
        min-width: unset;

        &_l {
            padding: @infoBoxLPaddingVerticalMobile @infoBoxLPaddingHorizontalMobile;
        }

        &_full-width-mobile {
            width: ~"calc(100vw - @{infoBoxFullWidthMobileHorizontalSpacing})";
        }

        &__content {
            &_flex {
                flex-direction: column;
            }
        }

        &_width {
            &_l {
                min-width: @infoBoxMinWidth;
            }
        }
    }
}

Modules reference¶

product_review