Skip to content

Product Codes

Styles for a product codes used in product_codes module.

Structurally .product-codes contains one element:

  • .product-codes__code

Example

Here is an example of product codes element usage. For presentation purposes we also used property styles.

HTML
<div class="product-codes">
    <p class="property">
        <span class="property__key">Producer code:</span>
        <span class="product-codes__code property__value">12345</span>
    </p>

    <p class="property">
        <span class="property__key">Product code</span>
        <span class="product-codes__code property__value">12345</span>
    </p>
</div>

Product Codes tags

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

Product Codes variables

Variables used to style product codes.

@productCodesColumnGap: @gridGutter;

If you want to change product codes styles, you can just change the variables. To change a default column gap width just modify @productCodesColumnGap variable.

@productCodesColumnGap: 20;

Product Codes styles

Here are standard product codes styles.

.product-codes {
    .size-xs();

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    .pixel-to-rem(column-gap, @productCodesColumnGap);
    width: fit-content;
}

@media screen and (max-width: (@breakPointXs - 1)) {
    .product-codes {
        &__code {
            display: block;
        }
    }
}

Styles reference

Modules reference