Skip to content

Contact Info

Styles for a contact form used in contact_info module.

Structurally there is one main element .contact-info which contains following elements:

  • .contact-info__wrapper
  • .contact-info__logo-section
  • .contact-info__header
  • .contact-info__logo-text
  • .contact-info__details

Example

Here is an example of contact info element usage.

HTML
<address class="contact-info__wrapper">
    <h2 class="contact-info__header header header_h2 header_underline">
        <span class="header_highlight">Contact Us</span>
    </h2>

    <div class="contact-info__logo-section">
        <h5 class="contact-info__logo-text">
            Example Shop
        </h5>
    </div>

    <div class="contact-info">
        <div class="contact-info__details">
            <p class="contact-info__details-phone">
                <a href="tel:+123456789" class="contact-info__link">+123456789</a>
            </p>
            <p class="contact-info__details-working-hours">
                Mon-Fri: 9am - 5pm
            </p>
        </div>

        <div class="contact-info__details">
            <p class="contact-info__details-email">
                <a href="mailto:info@example.com" class="contact-info__link">info@example.com</a>
            </p>
        </div>
    </div>
</address>

Contact Info tags

The .contact_info 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 contact form less variable in your User Less section to change contact info styles.

Contact Info variables

Variables used to style a contact info.

@contactInfoPaddingVertical: @globalSpacing * 0.625;
@contactInfoPaddingHorizontal: 0;

@contactInfoLogoSectionMarginBottom: @globalSpacing;

@contactInfoHeaderMarginBottom: @globalSpacing;

@contactInfoDetailsFontSize: @fontSizeInPxS;
@contactInfoDetailsIconMarginRight: 0.75 * @globalSpacing;
@contactInfoDetailsPhoneMarginBottom: 0;

@contactInfoLogoTextFontWeight: @fontWeightSemibold;

@contactInfoFontStyle: normal;

@contactInfoDetaisGap: @globalSpacing;

@contactInfoLinkColor: @globalFontColor;

If you want to change contact info styles, you can just change the variables. To change a default margin-bottom just modify @contactInfoLogoSectionMarginBottom variable.

@contactInfoLogoSectionMarginBottom: 40;

Contact Info styles

Here are standard contact info styles.

.contact-info {
    &__wrapper{

        padding: @contactInfoPaddingVertical @contactInfoPaddingHorizontal;
        font-style: @contactInfoFontStyle;
    }

    &__logo-section {
        margin-bottom: @contactInfoLogoSectionMarginBottom;       
    }

    &__header {
        margin-bottom: @contactInfoHeaderMarginBottom;

    }

    &__logo-text {
        font-weight: @contactInfoLogoTextFontWeight;
    }

    &__details {
        .font-size(@contactInfoDetailsFontSize);
        display: flex;
        gap: @contactInfoDetailsIconMarginRight;

        &:not(:last-child) {
            margin-bottom: @contactInfoDetaisGap;
        }

        &-phone {
            &:not(:last-child) {
                margin-bottom: @contactInfoDetailsPhoneMarginBottom;
            }
        }
    }

    &__link{
        text-decoration: none;
        .link-decorate-appearance(@contactInfoLinkColor, @contactInfoLinkColor, @contactInfoLinkColor);

        &:hover {
            text-decoration: underline;
        }
    }
}

Modules reference

Macros reference