Skip to content

Product Files

Styles for a product files used in product_files module.

Structurally .product-files contains following elements:

  • .product-files__header
  • .product-files__files-section

Example

Here is an example of product files element usage. We also use file-box styles here for presentation purposes.

HTML
<div class="product-files">
    <h2 class="product-files__header">Example header</h2>
    <div class="product-files__files-section">
        <div class="file-box">
            <a class="file-box__header">
                <img class="file-box__extension-icon" src="https://example.com/extension.png" alt="File icon"></img>
                <span class="file-box__title">
                    Title
                    <svg class="file-box__download-icon icon">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-download"></use>
                    </svg>
                    <span class="file-box__size">10 kb</span>
                </span>
            </a>

            <p class="file-box__description">File description</p>
        </div>

        <div class="file-box">
            <a class="file-box__header">
                <img class="file-box__extension-icon" src="https://example.com/extension.png" alt="File icon"></img>
                <span class="file-box__title">
                    Title
                    <svg class="file-box__download-icon icon">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-download"></use>
                    </svg>
                    <span class="file-box__size">10 kb</span>
                </span>
            </a>

            <p class="file-box__description">File description</p>
        </div>
    </div>
</div>

Product Files tags

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

Product Files variables

Variables used to style product files.

@productFilesFilesSectionPaddingHorizontal: 16;

If you want to change product files styles, you can just change the variables. To change a default horizontal padding just modify @productFilesFilesSectionPaddingHorizontal variable.

@productFilesFilesSectionPaddingHorizontal: 4;

Product Files styles

Here are standard product files styles.

.product-files {
    &__files-section {
        .pixel-to-rem(padding-left, @productFilesFilesSectionPaddingHorizontal);
        .pixel-to-rem(padding-right, @productFilesFilesSectionPaddingHorizontal);
    }
}

Styles reference

Modules reference