Header

Use .header element to style elements related to the header module.

Structurally .header has no elements but contains following modifiers:

• .header_h2
• .header_h3
• .header_h4
• .header_h5
• .header_h6
• .header_underline
• .header_highlight

Example

Here is an example of header element usage.

HTML

    <h3 class="header header_h3 header_underline">
        <span class="header_highlight">
            Header content
        </span>
    </h3>

Header tags

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

LESS

You can modify any header less variable in your User Less section to change header styles.

Header variables

Variables used to style header.

@headerFontWeight: @fontWeightSemibold;
@headerMarginBottom: @globalSpacing;

@headerH2FontSize: @h2FontSize;
@headerH2LineHeight: @h2LineHeightInPx;

@headerH3FontSize: @h3FontSize;
@headerH3LineHeight: @h3LineHeightInPx;

@headerH4FontSize: @h4FontSize;
@headerH4LineHeight: @h4LineHeightInPx;

@headerH5FontSize: @h5FontSize;
@headerH5LineHeight: @h5LineHeightInPx;

@headerH6FontSize: @h6FontSize;
@headerH6LineHeight: @h6LineHeightInPx;

@headerH2MobileFontSize: @h2MobileFontSize;
@headerH2MobileLineHeight: @h2MobileLineHeightInPx;

@headerH3MobileFontSize: @h3MobileFontSize;
@headerH3MobileLineHeight: @h3MobileLineHeightInPx;

@headerH4MobileFontSize: @h4MobileFontSize;
@headerH4MobileLineHeight: @h4MobileLineHeightInPx;

@headerH5MobileFontSize: @h5MobileFontSize;
@headerH5MobileLineHeight: @h5MobileLineHeightInPx;

@headerH6MobileFontSize: @h6MobileFontSize;
@headerH6MobileLineHeight: @h6MobileLineHeightInPx;

@headerUnderlineBorderBottomSize: 1px;
@headerUnderlineBorderBottomStyle: solid;
@headerUnderlineBorderBottomColor: @neutralColors200;
@headerUnderlineBorderBottom: @headerUnderlineBorderBottomSize @headerUnderlineBorderBottomStyle @headerUnderlineBorderBottomColor;

@headerHighlightBorderBottomSize: 3px;
@headerHighlightBorderBottomStyle: solid;
@headerHighlightBorderBottomColor: @primaryColor;
@headerHighlightBorderBottom: @headerHighlightBorderBottomSize @headerHighlightBorderBottomStyle @headerHighlightBorderBottomColor;

@headerPaddingVertical: @globalSpacing * 0.5;
@headerPaddingHorizontal: 0;

If you want to change header styles, you can just change the variables. To change a default font-size for the h3 header just modify @headerH3FontSize variable.

@headerH3FontSize: 10px;

Header standard styles

Here are standard header styles.

.header {
    width: 100%;

    font-weight: @headerFontWeight;

    margin-bottom: @headerMarginBottom;
    padding: @headerPaddingVertical @headerPaddingHorizontal;

    &_h2 {
        .font-size(@headerH2FontSize);
        .line-height(@headerH2LineHeight);
    }

    &_h3 {
        .font-size(@headerH3FontSize);
        .line-height(@headerH3LineHeight);
    }

    &_h4 {
        .font-size(@headerH4FontSize);
        .line-height(@headerH4LineHeight);
    }

    &_h5 {
        .font-size(@headerH5FontSize);
        .line-height(@headerH5LineHeight);
    }

    &_h6 {
        .font-size(@headerH6FontSize);
        .line-height(@headerH6LineHeight);
    }

    &_underline {
        border-bottom: @headerUnderlineBorderBottom;
        width: 100%;
        padding: 0;
    }

    &_highlight {
        display: inline-block;
        border-bottom: @headerHighlightBorderBottom;
        padding: @headerPaddingVertical @headerPaddingHorizontal;
    }
}

@media screen and (max-width: (@breakPointXs - 1)) {
    .header {
        &_h2 {
            .font-size(@headerH2MobileFontSize);
            .line-height(@headerH2MobileLineHeight);
        }

        &_h3 {
            .font-size(@headerH3MobileFontSize);
            .line-height(@headerH3MobileLineHeight);
        }

        &_h4 {
            .font-size(@headerH4MobileFontSize);
            .line-height(@headerH4MobileLineHeight);
        }

        &_h5 {
            .font-size(@headerH5MobileFontSize);
            .line-height(@headerH5MobileLineHeight);
        }

        &_h6 {
            .font-size(@headerH6MobileFontSize);
            .line-height(@headerH6MobileLineHeight);
        }
    }
}

Modules reference

• header