Product Attributes

Styles for a product attributes used in product_attributes module.

Structurally .product-attributes contains following elements:

• .product-attributes__header
• .product-attributes__groups
• .product-attributes__group
• .product-attributes__group-header
• .product-attributes__attributes
• .product-attributes__attribute
• .product-attributes__attribute-name
• .product-attributes__attribute-value

It also contains following class modifiers:

• .product-attributes__group_no-margin-bottom
• .product-attributes__attributes_one-column
• .product-attributes__attribute-name_secondary
• .product-attributes__attribute_secondary
• .product-attributes__attribute_padding-l
• .product-attributes__attribute_column-mobile

Example

Here is an example of product attributes element usage. For presentation purposes we used an h-accordion webcomponent along with it's styles.

HTML

<h-accordion class="product-attributes accordion">
    <h-accordion-group>
        <h2 class="product-attributes__header">Title</h2>
        <h-accordion-content>
            <div class="product-attributes__groups">
                <div class="product-attributes__group product-attributes__group_no-margin-bottom">
                    <p class="product-attributes__group-header">Group header</p>
                    <div class="product-attributes__attributes product-attributes__attributes_one-column">
                        <div class="product-attributes__attribute">
                            <span class="product-attributes__attribute-name">Attribute 1</span>
                            <span class="product-attributes__attribute-value">Example value 1</span>
                        </div>
                        <div class="product-attributes__attribute">
                            <span class="product-attributes__attribute-name">Attribute 2</span>
                            <span class="product-attributes__attribute-value">Example value 2</span>
                        </div>
                        <div class="product-attributes__attribute">
                            <span class="product-attributes__attribute-name">Attribute 3</span>
                            <span class="product-attributes__attribute-value">Example value 3</span>
                        </div>
                    </div>
                </div>
            </div>
        </h-accordion-content>
    </h-accordion-group>
</h-accordion>

Product Attributes tags

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

Product Attributes variables

Variables used to style product attributes.

@attributeGroupsColumns: 1;
@attributesGroupsColumnGap: @gridGutter * 2;
@attributeGroupColumns: 2;
@attributeGroupHeaderMarginBottom: 24;
@attributeGroupWidth: 100%;

@attributesColumnGap: @attributesGroupsColumnGap;

@attributesGroupMarginBottom: @gridGutter * 2;

@attributesAttributeSpacingHorizontal: @gridGutter * 0.5;
@attributesAttributeSpacingVertical: @gridGutter * 0.25;
@attributesAttributeColumnGap: @gridGutter;

@attributeNameWidth: 50%;
@attributeNameColor: @globalFontColorSecondary;
@attributeValueWidth: 50%;
@attributeValueFontWeight: @fontWeightSemibold;

@attributeNameShortWidth: 25%;

@attributeFontSize: @fontSizeInPxS;
@attributeLineHeight: @lineHeightInPxS;

@attributeIconCheckedColor: @successColors500;
@attributeIconUncheckedColor: @errorColors500;

@attributesAttributeSecondaryBackgroundColor: @neutralColors100;

@attributesAttributePaddingLSpacingHorizontal: @gridGutter * 1.25;
@attributesAttributePaddingLSpacingVertical: @gridGutter * 1.5;

@attributesAttributePaddingLSpacingHorizontalMobile: @gridGutter * 0.75;
@attributesAttributePaddingLSpacingVerticalMobile: @gridGutter * 0.5;
@attributesAttributePaddingLGapMobile: @globalSpacing * 0.25;

If you want to change product attributes styles, you can just change the variables. To change a default group attribute width just modify @attributeGroupWidth variable.

@attributeGroupWidth: 100px;

Product Attributes styles

Here are standard product attributes styles.

.product-attributes {
    &__groups {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(@attributeGroupsColumns, 1fr);
        .pixel-to-rem(column-gap, @attributesGroupsColumnGap);
    }

    &__attributes {
        display: grid;
        grid-template-columns: repeat(@attributeGroupColumns, 1fr);
        .pixel-to-rem(column-gap, @attributesColumnGap);
        align-items: stretch;

        &_one-column {
            grid-template-columns: 1fr;
        }
    }

    &__group-header {
        .weight-semibold();
        .pixel-to-rem(margin-bottom, @attributeGroupHeaderMarginBottom);
    }

    &__group {
        width: @attributeGroupWidth;
        .pixel-to-rem(margin-bottom, @attributesGroupMarginBottom);
    }

    &__attribute {
        display: flex;
        align-items: center;
        .pixel-to-rem(column-gap, @attributesAttributeColumnGap);

        .size-s(@attributeFontSize, @attributeLineHeight);

        .pixel-to-rem(padding-top, @attributesAttributeSpacingHorizontal);
        .pixel-to-rem(padding-bottom, @attributesAttributeSpacingHorizontal);
        .pixel-to-rem(padding-left, @attributesAttributeSpacingVertical);
        .pixel-to-rem(padding-right, @attributesAttributeSpacingVertical);

        &_padding {
            &-l {
                .pixel-to-rem(padding-top, @attributesAttributePaddingLSpacingHorizontal);
                .pixel-to-rem(padding-bottom, @attributesAttributePaddingLSpacingHorizontal);
                .pixel-to-rem(padding-left, @attributesAttributePaddingLSpacingVertical);
                .pixel-to-rem(padding-right, @attributesAttributePaddingLSpacingVertical);

                &-horizontal {
                    .pixel-to-rem(padding-left, @attributesAttributePaddingLSpacingVertical);
                    .pixel-to-rem(padding-right, @attributesAttributePaddingLSpacingVertical);
                }
            }
        }

        &-name {
            flex: 0 1 @attributeNameWidth;
            color: @attributeNameColor;

            &_secondary {
                display: flex;
                gap: @globalSpacing * 0.5;
                align-items: center;
                width: 100%;
            }

            &_short {
                flex: 0 1 @attributeNameShortWidth;
            }
        }

        &-value {
            flex: 0 1 @attributeValueWidth;
            display: inline-flex;

            font-weight: @attributeValueFontWeight;
        }
    }

    &__icon {
        &_checked {
            color: @attributeIconCheckedColor;
        }

        &_unchecked {
            color: @attributeIconUncheckedColor;
        }
    }
}

@media (max-width: (@breakPointSm - 1)) {
    .product-attributes {
        &__attributes {
            grid-template-columns: 1fr;
        }

        &__attribute {
            align-items: flex-start;

            &_secondary {
                border-radius: 4px;
                padding: @globalSpacing * 0.5;
                background-color: @attributesAttributeSecondaryBackgroundColor;
                margin-bottom: @globalSpacing;
                width: 100%;
            }

            &_padding {
                &-l {
                    .pixel-to-rem(padding-top, @attributesAttributePaddingLSpacingVerticalMobile);
                    .pixel-to-rem(padding-bottom, @attributesAttributePaddingLSpacingVerticalMobile);
                    .pixel-to-rem(padding-left, @attributesAttributePaddingLSpacingHorizontalMobile);
                    .pixel-to-rem(padding-right, @attributesAttributePaddingLSpacingHorizontalMobile);

                    gap: @attributesAttributePaddingLGapMobile;
                }
            }

            &_column-mobile {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                padding-bottom: @globalSpacing;
            }

            &_border-mobile {
                border-bottom: 1px solid @neutralColors100;
            }
        }
    }
}

Webcomponents reference

• h-accordion

Styles reference

• accordion

Modules reference

• product_attributes