Box¶

Styles for a box used in file_box macro.

Structurally .box contains following elements:

.box__header
.box__content

Example¶

Here is an example of a box element usage.

HTML

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

Box tags¶

The .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 box less variable in your User Less section to change a box styles.

Box variables¶

Variables used to style a box.

@boxPadding: 24;
@boxPaddingS: 8;
@boxBorderRadius: 4px;

@boxBorderWidth: 1px;
@boxBorderStyle: solid;
@boxBorderColor: @neutralColors100;

@boxHeaderTitleColor: @globalFontColor;

@boxDescriptionColor: @globalFontColor;

@boxPrimaryBgColor: @neutralColors50;
@boxPrimaryBorderColor: @neutralColors100;

If you want to change box styles, you can just change the variables. To change a default padding just modify @boxPadding variable.

@boxPadding: 10;

Box mixins¶

Here are mixins are used to create boxes:

.link-decorate-appearance (@color: @linkColorPrimary, @colorHover: @linkColorPrimaryHover, @colorActive: @linkColorPrimaryActive) {
    color: @color;

    &:hover {
        color: @colorHover;
    }

    &:active {
        color: @colorActive;
    }
}

Box styles¶

Here are standard box styles.

.box {
    .box();

    &__header {
        .box-header();
    }

    &__content {
        .box-content();
    }

    &_spacing-s {
        .padding-to-unit(@boxPaddingS, @boxPaddingS, @boxPaddingS, @boxPaddingS);
    }

    &_primary {
        background-color: @boxPrimaryBgColor;
        border-color: @boxPrimaryBorderColor;
    }
}

Macros reference¶

file_box