Product Producer¶

Styles for a product producer used in product_producer module.

Structurally .product-producer contains following elements:

.product-producer__link
.product-producer__image

Example¶

Here is an example of product producer element usage.

HTML

<div class="product-producer__link">
    <img class="product-producer__image" src="https://example.com/producer.png"/>
</div>

Product Producer tags¶

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

Product Producer variables¶

Variables used to style a product producer.

@productProducerLinkSize: 14;

If you want to change product producer styles, you can just change the variables. To change a default producer link font-size just modify @productProducerLinkSize variable.

@productProducerLinkSize: 4;

Product Producer styles¶

Here are standard product producer styles.

.product-producer {
    &__link {
        .pixel-to-rem(font-size, @productProducerLinkSize);
        color: @globalFontColorSecondary;

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

    &__image {
        max-height: 24px;
    }
}

Modules reference¶

product_producer