Blog

<div class="page-wrapper">
    <a href="#maincontent" id="skip-nav-top" class="skip-nav">
        Skip to content
    </a>
    <script src="/components/raw/skip-nav/skip-nav.js" defer></script>

    <div class="marketing-bar marketing-bar--closed" data-type="marketing-bar">
        <div class="container marketing-bar__container">
            <div class="marketing-bar__text">
                Subscribe and get 10$ for Shopping! Lorem ipsum text in marketing bar.
            </div>
            <button class="button button--icon button--rotate-icon marketing-bar__close" type="button" aria-label="Close marketing bar">
                <svg class="icon button__icon marketing-bar__close-icon" role="img">
                    <title>Close</title>
                    <use href="/images/icons-sprite.svg#close"></use>
                </svg>

            </button>

        </div>
    </div>
    <script src="/components/raw/marketing-bar/marketing-bar.js"></script>

    <div class="contact-bar ">
        <div class="contact-bar__wrapper">
            <div class="contact-bar__container container">
                <ul class="list contact-bar__list">
                    <li class="list-item contact-bar__item">
                        <a href="#" class="
                                contact-bar__link
                                
                            ">
                            <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                Account
                            </span>
                        </a>
                    </li>
                    <li class="list-item contact-bar__item">
                        <a href="#" class="
                                contact-bar__link
                                
                            ">
                            <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                Blog
                            </span>
                        </a>
                    </li>
                    <li class="list-item contact-bar__item">
                        <a href="#" class="
                                contact-bar__link
                                
                            ">
                            <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                Contact
                            </span>
                        </a>
                    </li>
                </ul>
                <ul class="list contact-bar__list contact-bar__list--icons">
                    <li class="list-item contact-bar__item">
                        <a href="tel:8002669590" class="
                            contact-bar__link
                            
                        ">
                            <span class="
                                icon
                                contact-bar__icon
                            " aria-label="">
                                <svg class="icon " role="img">
                                    <title>Phone</title>
                                    <use href="/images/icons-sprite.svg#phone"></use>
                                </svg>

                            </span>
                            <span class="
                                button__text
                                contact-bar__text
                            ">
                                Call us for free 800 - 266 - 9590
                            </span>
                        </a>
                    </li>
                    <li class="contact-bar__item">
                        <a href="mailto:test@test.com" class="
                            contact-bar__link
                            
                        ">
                            <span class="
                                icon
                                contact-bar__icon
                            " aria-label="">
                                <svg class="icon " role="img">
                                    <title>Email</title>
                                    <use href="/images/icons-sprite.svg#envelope"></use>
                                </svg>

                            </span>
                            <span class="
                                button__text
                                contact-bar__text
                            ">
                                Email Us
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <header class="header ">
        <div class="container">
            <div class="header__wrapper">
                <a class="logo header__logo" href="#" aria-label="Homepage">
                    <img class="logo__image " src="/images/logo/logo.svg" alt="Alpaca Logo">
                </a>

                <div class="side-menu ">
                    <button class="button button--icon modal-trigger side-menu__trigger" type="button" data-modal-trigger="side-menu" aria-label="Open menu">
                        <svg class="icon side-menu__trigger-icon" role="presentation" focusable="false">
                            <title>Mobile-menu</title>
                            <use href="/images/icons-sprite.svg#mobile-menu"></use>
                        </svg>

                    </button>

                    <div role="dialog" aria-hidden="true" id="side-menu" data-modal="side-menu" class="modal modal--tertiary side-menu__modal">
                        <div role="document" class="modal__container side-menu__container" tabindex="0">
                            <div class="modal__content side-menu__content">

                                <div class="modal__middle side-menu__content-middle">

                                    <div id="dropdown-default" class="dropdown-list dropdown-list--with-nested">
                                        <ul class="dropdown-list__list">
                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-1">
                                                    dropdown title

                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                        <title>Arrow Down</title>
                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                    </svg>

                                                </button>

                                                <div id="dropdown-1" class="dropdown-list__content " aria-hidden="true">
                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                        <ul class="dropdown-list__list">
                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-1">
                                                                    Item name

                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                        <title>Arrow Down</title>
                                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                                    </svg>

                                                                </a>

                                                                <div id="dropdown-1-1" class="dropdown-list__content " aria-hidden="true">
                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                        <ul class="dropdown-list__list">
                                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-2">
                                                                                    sublist item name

                                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                                        <title>Arrow Down</title>
                                                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                                                    </svg>

                                                                                </a>

                                                                                <div id="dropdown-1-2" class="dropdown-list__content " aria-hidden="true">
                                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                                        <ul class="dropdown-list__list">
                                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                                <a class="dropdown-list__label " href="#">
                                                                                                    sub sublist item name

                                                                                                </a>

                                                                                            </li>
                                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                                <a class="dropdown-list__label " href="#">
                                                                                                    sub sublist item name

                                                                                                </a>

                                                                                            </li>
                                                                                        </ul>
                                                                                    </div>

                                                                                </div>
                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </li>
                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2-2">
                                                                    Item name

                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                        <title>Arrow Down</title>
                                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                                    </svg>

                                                                </a>

                                                                <div id="dropdown-2-2" class="dropdown-list__content " aria-hidden="true">
                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                        <ul class="dropdown-list__list">
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    Item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    Item name

                                                                </a>

                                                            </li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </li>
                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2">
                                                    dropdown title

                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                        <title>Arrow Down</title>
                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                    </svg>

                                                </a>

                                                <div id="dropdown-2" class="dropdown-list__content " aria-hidden="true">
                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                        <ul class="dropdown-list__list">
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    Item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    Item name

                                                                </a>

                                                            </li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </li>
                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3">
                                                    dropdown title

                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                        <title>Arrow Down</title>
                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                    </svg>

                                                </a>

                                                <div id="dropdown-3" class="dropdown-list__content " aria-hidden="true">
                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                        <ul class="dropdown-list__list">
                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-1">
                                                                    Item name

                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                        <title>Arrow Down</title>
                                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                                    </svg>

                                                                </a>

                                                                <div id="dropdown-3-1" class="dropdown-list__content " aria-hidden="true">
                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                        <ul class="dropdown-list__list">
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </li>
                                                            <li class="
                    dropdown-list__item
                ">
                                                                <a class="dropdown-list__label " href="#">
                                                                    Item name

                                                                </a>

                                                            </li>
                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-2">
                                                                    Item name

                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                        <title>Arrow Down</title>
                                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                                    </svg>

                                                                </a>

                                                                <div id="dropdown-3-2" class="dropdown-list__content " aria-hidden="true">
                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                        <ul class="dropdown-list__list">
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </li>
                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-3">
                                                                    Item name

                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                        <title>Arrow Down</title>
                                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                                    </svg>

                                                                </a>

                                                                <div id="dropdown-3-3" class="dropdown-list__content " aria-hidden="true">
                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                        <ul class="dropdown-list__list">
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </li>
                                                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-4">
                                                                    item name

                                                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                        <title>Arrow Down</title>
                                                                        <use href="/images/icons-sprite.svg#angle-down"></use>
                                                                    </svg>

                                                                </a>

                                                                <div id="dropdown-3-4" class="dropdown-list__content " aria-hidden="true">
                                                                    <div id="" class="dropdown-list dropdown-list--inner">
                                                                        <ul class="dropdown-list__list">
                                                                            <li class="
                    dropdown-list__item
                ">
                                                                                <a class="dropdown-list__label " href="#">
                                                                                    sublist item name

                                                                                </a>

                                                                            </li>
                                                                        </ul>
                                                                    </div>

                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </li>
                                        </ul>
                                    </div>

                                    <script type="text/javascript">
                                        new DropdownList(document.getElementById('dropdown-default'));
                                    </script>

                                </div>

                                <div class="modal__bottom side-menu__content-bottom">
                                    <div class="modal__bottom-actions side-menu__bottom-actions">
                                        <div class="
                                    modal__bottom-action
                                    side-menu__bottom-action
                                ">
                                            <div class="contact-bar contact-bar--vertical">
                                                <div class="contact-bar__wrapper">
                                                    <div class="contact-bar__container ">
                                                        <ul class="list contact-bar__list">
                                                            <li class="list-item contact-bar__item">
                                                                <a href="#" class="
                                contact-bar__link
                                
                            ">
                                                                    <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                                                        Account
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="list-item contact-bar__item">
                                                                <a href="#" class="
                                contact-bar__link
                                
                            ">
                                                                    <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                                                        Blog
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="list-item contact-bar__item">
                                                                <a href="#" class="
                                contact-bar__link
                                
                            ">
                                                                    <span class="
                                    button__text
                                    contact-bar__text
                                ">
                                                                        Contact
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                        <ul class="list contact-bar__list contact-bar__list--icons">
                                                            <li class="list-item contact-bar__item">
                                                                <a href="tel:8002669590" class="
                            contact-bar__link
                            
                        ">
                                                                    <span class="
                                icon
                                contact-bar__icon
                            " aria-label="">
                                                                        <svg class="icon " role="img">
                                                                            <title>Phone</title>
                                                                            <use href="/images/icons-sprite.svg#phone"></use>
                                                                        </svg>

                                                                    </span>
                                                                    <span class="
                                button__text
                                contact-bar__text
                            ">
                                                                        Call us for free 800 - 266 - 9590
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="contact-bar__item">
                                                                <a href="mailto:test@test.com" class="
                            contact-bar__link
                            
                        ">
                                                                    <span class="
                                icon
                                contact-bar__icon
                            " aria-label="">
                                                                        <svg class="icon " role="img">
                                                                            <title>Email</title>
                                                                            <use href="/images/icons-sprite.svg#envelope"></use>
                                                                        </svg>

                                                                    </span>
                                                                    <span class="
                                button__text
                                contact-bar__text
                            ">
                                                                        Email Us
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <button class="button button--icon button--rotate-icon modal__close-button side-menu__close-button" type="button" aria-label="click to close the modal">
                                <svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
                                    <title>Close</title>
                                    <use href="/images/icons-sprite.svg#close"></use>
                                </svg>

                            </button>

                        </div>
                    </div>
                    <script type="text/javascript">
                        new Modal(document.querySelector('[data-modal-trigger="side-menu"]'));
                    </script>

                </div>

                <div class="header__brief-info">
                    <div class="brief-info brief-info--link">
                        <ul class="list brief-info__items-container">
                            <li class="brief-info__list-item list__item">
                                <a class="
                        brief-info__link
                        
                    ">
                                    <span class="
                            brief-info__icon-wrapper
                            
                        ">
                                        <svg class="icon brief-info__icon" role="presentation" focusable="false">
                                            <title>Free shipping icon</title>
                                            <use href="/images/icons-sprite.svg#delivery-truck"></use>
                                        </svg>

                                    </span>

                                    <span class="brief-info__title ">
                                        Free Shipping
                                    </span>
                                    <span class="brief-info__subtitle
                                
                            ">
                                        On Hundreds of Products
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>

                </div>

                <div class="header__buttons">
                    <a class="
                                header-button
                                button
                                button--icon
                                button--icon-light
                                button--icon-fill
                            " href="#" aria-label="Wishlist">
                        <svg class="icon header-button__icon" role="presentation" focusable="false">
                            <title>Heart</title>
                            <use href="/images/icons-sprite.svg#heart"></use>
                        </svg>

                    </a>

                    <div class="header__minicart">
                        <button type="button" class="
                                    header-button
                                    button
                                    button--icon
                                    button--icon-light
                                    modal-trigger
                                " aria-label="Shopping cart dropdown trigger" data-modal-trigger="modal-minicart">
                            <svg class="icon header-button__icon" role="presentation" focusable="false">
                                <title>Shopping cart</title>
                                <use href="/images/icons-sprite.svg#shopping-cart"></use>
                            </svg>

                            <span class="header-button__counter">
                                <span class="header-button__counter-dot"></span>
                            </span>
                        </button>
                    </div>

                    <div role="dialog" aria-hidden="true" id="modal-minicart" data-modal="modal-minicart" class="modal modal--secondary" aria-labelledby="minicart-title" aria-describedby="minicart-products">
                        <div role="document" class="modal__container " tabindex="0">
                            <div class="modal__content modal__content--block">

                                <div class="minicart-content ">
                                    <div class="minicart-content__top" id="minicart-title">
                                        <h2 class="minicart-content__heading">
                                            Shopping cart
                                        </h2>

                                        <div class="minicart-content__counter">
                                            2 items
                                        </div>
                                    </div>
                                    <div class="minicart-content__middle" id="minicart-products">
                                        <div class="minicart-content__products-list">
                                            <div class="minicart-product">
                                                <div class="minicart-product__image">
                                                    <div class="lazyload-wrapper ">
                                                        <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/minicart-product-64x96.jpeg" alt="product name goes here">
                                                    </div>

                                                </div>
                                                <div class="minicart-product__data">
                                                    <div class="minicart-product__info">
                                                        <div class="minicart-product__name-wrapper">
                                                            <h3 class="minicart-product__name">
                                                                <a class="
                            link
                            link--invert
                            minicart-product__link
                        " href="#">
                                                                    Some product name
                                                                </a>
                                                            </h3>
                                                            <div class="minicart-product__price margin-bottom-xs">
                                                                <div class="price  ">
                                                                    <span class="price__value price__value--old ">
                                                                        <del aria-label="Price reduced from: $249.95">
                                                                            $
                                                                            249.95

                                                                        </del>
                                                                    </span>
                                                                    <span class="price__value price__value--special ">
                                                                        <ins aria-label="On sale at: $159.95">

                                                                            $

                                                                            159.95

                                                                        </ins>
                                                                    </span>
                                                                </div>

                                                            </div>
                                                        </div>
                                                        <dl class="list list--description minicart-product__attributes-list" title="Alpaca description list">
                                                            <dt class="list__label">
                                                                Lorem ipsum
                                                            </dt>
                                                            <dd class="list__value">
                                                                Lorem ipsum Value
                                                            </dd>
                                                            <dt class="list__label">
                                                                Lorem ipsum
                                                            </dt>
                                                            <dd class="list__value">
                                                                Lorem ipsum Value
                                                            </dd>
                                                        </dl>

                                                    </div>

                                                    <div class="minicart-product__bottom">
                                                        <div class="minicart-product__qty">

                                                        </div>

                                                        <div class="minicart-product__actions">
                                                            <a class="button button--icon " href="#" aria-label="edit product in your shopping cart">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Edit pencil</title>
                                                                    <use href="/images/icons-sprite.svg#edit"></use>
                                                                </svg>

                                                            </a>

                                                            <a class="button button--icon " href="#" aria-label="remove this product from your shopping cart">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Trash bin</title>
                                                                    <use href="/images/icons-sprite.svg#remove"></use>
                                                                </svg>

                                                            </a>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="minicart-product">
                                                <div class="minicart-product__image">
                                                    <div class="lazyload-wrapper ">
                                                        <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/minicart-product-64x96.jpeg" alt="product name goes here">
                                                    </div>

                                                </div>
                                                <div class="minicart-product__data">
                                                    <div class="minicart-product__info">
                                                        <div class="minicart-product__name-wrapper">
                                                            <h3 class="minicart-product__name">
                                                                <a class="
                            link
                            link--invert
                            minicart-product__link
                        " href="#">
                                                                    Some product 2 name
                                                                </a>
                                                            </h3>
                                                            <div class="minicart-product__price margin-bottom-xs">
                                                                <div class="price  ">
                                                                    <span class="price__value price__value--old ">
                                                                        <del aria-label="Price reduced from: $249.95">
                                                                            $
                                                                            249.95

                                                                        </del>
                                                                    </span>
                                                                    <span class="price__value price__value--special ">
                                                                        <ins aria-label="On sale at: $159.95">

                                                                            $

                                                                            159.95

                                                                        </ins>
                                                                    </span>
                                                                </div>

                                                            </div>
                                                        </div>
                                                        <dl class="list list--description minicart-product__attributes-list" title="Alpaca description list">
                                                            <dt class="list__label">
                                                                Lorem ipsum
                                                            </dt>
                                                            <dd class="list__value">
                                                                Lorem ipsum Value
                                                            </dd>
                                                            <dt class="list__label">
                                                                Lorem ipsum
                                                            </dt>
                                                            <dd class="list__value">
                                                                Lorem ipsum Value
                                                            </dd>
                                                        </dl>

                                                    </div>

                                                    <div class="minicart-product__bottom">
                                                        <div class="minicart-product__qty">

                                                        </div>

                                                        <div class="minicart-product__actions">
                                                            <a class="button button--icon " href="#" aria-label="edit product in your shopping cart">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Edit pencil</title>
                                                                    <use href="/images/icons-sprite.svg#edit"></use>
                                                                </svg>

                                                            </a>

                                                            <a class="button button--icon " href="#" aria-label="remove this product from your shopping cart">
                                                                <svg class="icon button__icon" role="presentation" focusable="false">
                                                                    <title>Trash bin</title>
                                                                    <use href="/images/icons-sprite.svg#remove"></use>
                                                                </svg>

                                                            </a>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="minicart-content__bottom">
                                        <div class="minicart-content__summary">
                                            <div class="minicart-content__summary-label">
                                                Cart Subtotal
                                            </div>
                                            <div class="minicart-content__summary-value">
                                                $ 200.00
                                            </div>
                                        </div>
                                        <div class="minicart-content__actions">
                                            <a href="/edit" class="
                    button
                    button--secondary
                    minicart-content__edit
                    minicart-content__action-button
                ">
                                                View and edit cart
                                            </a>
                                            <button class="button minicart-content__action-button minicart-content__checkout" type="button">
                                                Go to Checkout
                                            </button>

                                        </div>
                                    </div>
                                </div>

                            </div>

                            <button class="button button--icon button--rotate-icon modal__close-button" type="button" aria-label="click to close the modal">
                                <svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
                                    <title>Close</title>
                                    <use href="/images/icons-sprite.svg#close"></use>
                                </svg>

                            </button>

                        </div>
                    </div>
                    <script type="text/javascript">
                        new Modal(document.querySelector('[data-modal-trigger="modal-minicart"]'));
                    </script>

                </div>

                <div class="header__search-wrapper">
                    <form class="search-form">
                        <div class="search-form__wrapper">
                            <div class="input search-form__input-wrapper margin-0">
                                <label class="
            label
            input__label
                label--hidden
            
        " for="search">
                                    Search products
                                </label>
                                <input class="input__field search-form__input" id="search" name="search" type="search" placeholder="Search entire store here...">
                            </div>

                            <button class="button button--icon button--icon search-form__button" type="button" aria-label="Search">
                                <svg class="icon button__icon" role="presentation" focusable="false">
                                    <title>Search</title>
                                    <use href="/images/icons-sprite.svg#search"></use>
                                </svg>

                            </button>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </header>

    <div class="mega-menu ">
        <ul class="mega-menu__list container ">
            <li class="mega-menu__item mega-menu__item--parent mega-menu__item--secondary">
                <a href="/new-in" class="mega-menu__link">
                    New In
                </a>

                <ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            View all
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Clothing
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Shoes
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Accessories
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Face + Body
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Living + Gifts
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Back in stock
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Trending now
                        </a>
                    </li>
                </ul>

            </li>
            <li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
                <a href="/clothing" class="mega-menu__link">
                    Clothing
                </a>

                <ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--inline mega-menu__column-hidden">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Row one
                        </a>
                        <ul class="list mega-menu__inner-list">
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    columns one item
                                </a>
                            </li>
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    columns one item 2
                                </a>
                            </li>
                        </ul>

                    </li>
                    <li class="list__item mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--images">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Row two
                        </a>
                        <ul class="list mega-menu__inner-list">
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                    <div class="lazyload-wrapper ">
                                        <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                    </div>

                                    Summer
                                </a>
                            </li>
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                    <div class="lazyload-wrapper ">
                                        <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                    </div>

                                    Spring
                                </a>
                            </li>
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                    <div class="lazyload-wrapper ">
                                        <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                    </div>

                                    Autumn
                                </a>
                            </li>
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                    <div class="lazyload-wrapper ">
                                        <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                    </div>

                                    Winter
                                </a>
                            </li>
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                    <div class="lazyload-wrapper ">
                                        <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                    </div>

                                    View all
                                </a>
                            </li>
                            <li class="list__item mega-menu__inner-item">
                                <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                    <div class="lazyload-wrapper ">
                                        <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                    </div>

                                    lorem ipsum
                                </a>
                            </li>
                        </ul>

                    </li>
                    <li class="list__item mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--columns">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Row three
                        </a>
                        <ul class="list mega-menu__inner-list">
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 c 1
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Men
                                        </a>
                                        <ul class="list mega-menu__inner-list">
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Elegant
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Casual
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Active
                                                </a>
                                            </li>
                                        </ul>

                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Wallets
                                        </a>
                                    </li>
                                </ul>

                            </li>
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 column 2
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Women
                                        </a>
                                        <ul class="list mega-menu__inner-list">
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Elegant
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Casual
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Active
                                                </a>
                                            </li>
                                        </ul>

                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Bags
                                        </a>
                                    </li>
                                </ul>

                            </li>
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 column 3
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Kids
                                        </a>
                                        <ul class="list mega-menu__inner-list">
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Pijamas
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    School Days
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Kids Fance Dress
                                                </a>
                                                <ul class="list mega-menu__inner-list">
                                                    <li class="list__item mega-menu__inner-item">
                                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                            Hats
                                                        </a>
                                                    </li>
                                                    <li class="list__item mega-menu__inner-item">
                                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                            Special Ocassions
                                                        </a>
                                                    </li>
                                                </ul>

                                            </li>
                                        </ul>

                                    </li>
                                </ul>

                            </li>
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 column 4
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Jackets
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Shirts
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Dresses
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Trousers
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Hats
                                        </a>
                                    </li>
                                </ul>

                            </li>
                        </ul>

                    </li>
                </ul>

            </li>
            <li class="mega-menu__item ">
                <a href="/shoes" class="mega-menu__link">
                    Shoes
                </a>

            </li>
            <li class="mega-menu__item ">
                <a href="/furniture" class="mega-menu__link">
                    Furniture
                </a>

            </li>
            <li class="mega-menu__item ">
                <a href="/accessories" class="mega-menu__link">
                    Accessories
                </a>

            </li>
            <li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
                <a href="/activewear" class="mega-menu__link">
                    Activewear
                </a>

                <ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--columns mega-menu__column-hidden">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Row one
                        </a>
                        <ul class="list mega-menu__inner-list">
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 c 1
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Men
                                        </a>
                                        <ul class="list mega-menu__inner-list">
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Elegant
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Casual
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Active
                                                </a>
                                            </li>
                                        </ul>

                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Wallets
                                        </a>
                                    </li>
                                </ul>

                            </li>
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 column 2
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Women
                                        </a>
                                        <ul class="list mega-menu__inner-list">
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Elegant
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Casual
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Active
                                                </a>
                                            </li>
                                        </ul>

                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Bags
                                        </a>
                                    </li>
                                </ul>

                            </li>
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 column 3
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Kids
                                        </a>
                                        <ul class="list mega-menu__inner-list">
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Pijamas
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    School Days
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Fance Dress
                                                </a>
                                            </li>
                                            <li class="list__item mega-menu__inner-item">
                                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                                    Special Occasion
                                                </a>
                                            </li>
                                        </ul>

                                    </li>
                                </ul>

                            </li>
                            <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                                <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                    row 3 column 4
                                </a>
                                <ul class="list mega-menu__inner-list">
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Jackets
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Shirts
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Dresses
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Trousers
                                        </a>
                                    </li>
                                    <li class="list__item mega-menu__inner-item">
                                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                                            Hats
                                        </a>
                                    </li>
                                </ul>

                            </li>
                        </ul>

                    </li>
                </ul>

            </li>
            <li class="mega-menu__item mega-menu__item--parent mega-menu__item--secondary">
                <a href="/brands" class="mega-menu__link">
                    Brands Brands
                </a>

                <ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            View all
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Clothing
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Shoes
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Accessories
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Face + Body
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Living + Gifts
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Back in stock
                        </a>
                    </li>
                    <li class="list__item mega-menu__inner-item">
                        <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                            Trending now
                        </a>
                    </li>
                </ul>

            </li>
        </ul>
    </div>
    <script src="/components/raw/mega-menu/mega-menu.js"></script>

    <nav class="breadcrumbs " aria-label="" role="navigation">
        <ol class="breadcrumbs__list ">
            <li class="breadcrumbs__item">
                <a href="#" class="breadcrumbs__link">
                    Home
                </a>
            </li>
            <li class="breadcrumbs__item" aria-current="true">
                Blog
            </li>
        </ol>
    </nav>

    <main id="maincontent" class="container">
        <div class="blog row between-lg">
            <div class="blog__articles col-md-8">
                <ul class="list blog__articles-list">
                    <li class="list__item blog__article-item">

                        <article class="
        article-item
        
    ">
                            <header class="article-item__header ">
                                <h2 class="article-item__title heading--font-secondary">
                                    Lorem Ipsum is simply dummy text of the printing
                                </h2>

                                <span class="article-item__sub-title heading--font-secondary">
                                    August 8, 2019
                                </span>

                            </header>
                            <section class="article-item__container row">
                                <div class="article-item__media col-lg-4">
                                    <a href="" class="banner article-item__banner">
                                        <picture class="image article-item__image">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-768_402.png" media="(max-width: 768px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-320_176.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-320_176.jpg" alt="article banner image" />
                                        </picture>

                                    </a>

                                </div>
                                <div class="article-item__body col-lg-8">
                                    <div class="article-item__content">
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                                    </div>
                                    <footer class="article-item__footer ">
                                        <a class="link article-item__footer-link" href="#" title="Read more">
                                            Read more
                                        </a>

                                    </footer>
                                </div>
                            </section>

                        </article>

                    </li>
                    <li class="list__item blog__article-item">

                        <article class="
        article-item
        
    ">
                            <header class="article-item__header ">
                                <h2 class="article-item__title heading--font-secondary">
                                    Lorem Ipsum is simply dummy text of the printing
                                </h2>

                                <span class="article-item__sub-title heading--font-secondary">
                                    August 8, 2019
                                </span>

                            </header>
                            <section class="article-item__container row">
                                <div class="article-item__media col-lg-4">
                                    <a href="" class="banner article-item__banner">
                                        <picture class="image article-item__image">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-768_402.png" media="(max-width: 768px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-320_176.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-320_176.jpg" alt="article banner image" />
                                        </picture>

                                    </a>

                                </div>
                                <div class="article-item__body col-lg-8">
                                    <div class="article-item__content">
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                                    </div>
                                    <footer class="article-item__footer ">
                                        <a class="link article-item__footer-link" href="#" title="Read more">
                                            Read more
                                        </a>

                                    </footer>
                                </div>
                            </section>

                        </article>

                    </li>
                    <li class="list__item blog__article-item">

                        <article class="
        article-item
        
    ">
                            <header class="article-item__header ">
                                <h2 class="article-item__title heading--font-secondary">
                                    Lorem Ipsum is simply dummy text of the printing
                                </h2>

                                <span class="article-item__sub-title heading--font-secondary">
                                    August 8, 2019
                                </span>

                            </header>
                            <section class="article-item__container row">
                                <div class="article-item__media col-lg-4">
                                    <a href="" class="banner article-item__banner">
                                        <picture class="image article-item__image">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-768_402.png" media="(max-width: 768px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-320_176.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-320_176.jpg" alt="article banner image" />
                                        </picture>

                                    </a>

                                </div>
                                <div class="article-item__body col-lg-8">
                                    <div class="article-item__content">
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                                    </div>
                                    <footer class="article-item__footer ">
                                        <a class="link article-item__footer-link" href="#" title="Read more">
                                            Read more
                                        </a>

                                    </footer>
                                </div>
                            </section>

                        </article>

                    </li>
                    <li class="list__item blog__article-item">

                        <article class="
        article-item
        
    ">
                            <header class="article-item__header ">
                                <h2 class="article-item__title heading--font-secondary">
                                    Lorem Ipsum is simply dummy text of the printing
                                </h2>

                                <span class="article-item__sub-title heading--font-secondary">
                                    August 8, 2019
                                </span>

                            </header>
                            <section class="article-item__container row">
                                <div class="article-item__media col-lg-4">
                                    <a href="" class="banner article-item__banner">
                                        <picture class="image article-item__image">
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-768_402.png" media="(max-width: 768px)" />
                                            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-320_176.jpg" media="" />

                                            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-320_176.jpg" alt="article banner image" />
                                        </picture>

                                    </a>

                                </div>
                                <div class="article-item__body col-lg-8">
                                    <div class="article-item__content">
                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                                    </div>
                                    <footer class="article-item__footer ">
                                        <a class="link article-item__footer-link" href="#" title="Read more">
                                            Read more
                                        </a>

                                    </footer>
                                </div>
                            </section>

                        </article>

                    </li>
                </ul>

                <nav class="pager " role="navigation" aria-label="Pagination navigation">
                    <ul class="pager__list">
                        <li class="pager__item">
                            <a href="#" class="
                    pager__link
                    pager__link--prev
                    button button--icon
                " aria-label="Link to previous page, disabled" disabled tabindex="-1">
                                <svg class="icon pager__link-prev" role="presentation" focusable="false">
                                    <use href="/images/icons-sprite.svg#arrow-left"></use>
                                </svg>

                            </a>
                        </li>

                        <li class="pager__item pager__item--current" aria-current="page" aria-label="Page 1, current page">
                            1
                        </li>
                        <li class="pager__item">
                            <a href="#" class="pager__link link" aria-label="Link to page 2">
                                2
                            </a>
                        </li>
                        <li class="pager__item">
                            <a href="#" class="pager__link link" aria-label="Link to page 3">
                                3
                            </a>
                        </li>
                        <li class="pager__item">
                            <a href="#" class="pager__link link" aria-label="Link to page 4">
                                4
                            </a>
                        </li>
                        <li class="pager__item">
                            <a href="#" class="pager__link link" aria-label="Link to page 5">
                                5
                            </a>
                        </li>

                        <li class="pager__item">
                            <a href="#" class="
                    pager__link
                    pager__link--next
                    button button--icon
                " aria-label="Link to next page">
                                <svg class="icon pager__link-next" role="presentation" focusable="false">
                                    <use href="/images/icons-sprite.svg#arrow-right"></use>
                                </svg>

                            </a>
                        </li>
                    </ul>
                </nav>

            </div>
            <nav class="blog__nav col-md-4 col-lg-3">
                <div class="blog__recommended">
                    <h3 class="blog__nav-heading heading--font-secondary">
                        Recent Posts
                    </h3>

                    <ul class="list blog__nav-list">
                        <li class="list__item ">
                            <a href="#" class="
                        link
                        
                    ">
                                Lorem ipsum
                            </a>
                        </li>
                        <li class="list__item ">
                            <a href="#" class="
                        link
                        
                    ">
                                Lorem ipsum
                            </a>
                        </li>
                    </ul>

                </div>
                <div class="blog__categories">
                    <h3 class="blog__nav-heading heading--font-secondary">
                        Categories
                    </h3>

                    <ul class="list blog__nav-list">
                        <li class="list__item ">
                            <a href="#" class="
                        link
                        
                    ">
                                Lorem ipsum
                            </a>
                        </li>
                        <li class="list__item ">
                            <a href="#" class="
                        link
                        
                    ">
                                Lorem ipsum
                            </a>
                        </li>
                    </ul>

                </div>
            </nav>
        </div>
    </main>
</div>

<footer class="footer margin-top-xl">
    <div class="footer__handler container">
        <button class="button button--icon footer__scroll-top" type="button" data-focus-top="skip-nav-top" aria-label="scroll to top">
            <svg class="icon " role="presentation" focusable="false">
                <title>Scroll to top</title>
                <use href="/images/icons-sprite.svg#arrow-up"></use>
            </svg>

        </button>

        <section class="footer__newsletter">
            <div class="newsletter ">
                <div class="newsletter__heading ">
                    <h2 class="newsletter__title">
                        JOIN OUR EMAIL LIST
                    </h2>
                    <p class="newsletter__subtitle">
                        Sign up for savings and product announcements
                    </p>
                </div>
                <form class="newsletter__form">
                    <div class="newsletter__controls">
                        <div class="input newsletter__input">
                            <label class="
            label
            input__label
                label--hidden
            newsletter__label
        " for="newsletterEmail">
                                Email for newsletter subscription
                            </label>
                            <input class="input__field newsletter__field" id="newsletterEmail" name="newsletterEamil" type="" placeholder="Enter your email">
                        </div>

                        <button class="button button--secondary newsletter__button">
                            Sign Up
                        </button>

                    </div>
                    <div class="newsletter__agreements">
                        <div class="checkbox newsletter__checkbox">
                            <input type="checkbox" id="newsletter" name="" class="checkbox__field ">
                            <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                                <use href="/images/icons-sprite.svg#checked"></use>
                            </svg>
                            <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                                <use href="/images/icons-sprite.svg#unchecked"></use>
                            </svg>
                            <label for="newsletter" class="checkbox__label ">
                                <span class="checkbox__text">
                                    I agree to <a href="#" title="Terms and conditions">Terms & Conditions</a> and I am happy to receive your newsletter with all your promotions.
                                </span>
                            </label>
                        </div>

                    </div>
                </form>
            </div>

        </section>

        <div class="footer__social-handler ">
            <h3 class="footer__social-list-title">
                Let&#x27;s get social!
            </h3>

            <ul class="list list--with-icon list--horizontal footer__social-list">
                <li class="list__item ">
                    <a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Go to Our Facebook Page">
                        <svg class="icon footer__social-icon" role="img">
                            <title>Facebook logo</title>
                            <use href="/images/icons-sprite.svg#facebook"></use>
                        </svg>

                    </a>
                </li>
                <li class="list__item ">
                    <a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Check Our on Twitter">
                        <svg class="icon footer__social-icon" role="img">
                            <title>Twitter logo</title>
                            <use href="/images/icons-sprite.svg#twitter"></use>
                        </svg>

                    </a>
                </li>
            </ul>

        </div>

        <section class="footer__links">
            <div id="dropdown-footer" class="dropdown-list dropdown-list--with-breakpoint">
                <ul class="dropdown-list__list">
                    <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                        <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-customers" aria-controls="dropdown-customers">
                            Customers

                            <svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="presentation" focusable="false">
                                <title>Arrow down</title>
                                <use href="/images/icons-sprite.svg#angle-down"></use>
                            </svg>

                        </button>

                        <div id="dropdown-customers" class="dropdown-list__content " aria-hidden="true">
                            <ul class="
        list
        list__columns
        footer__links-list
    ">
                                <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                    <a href="" class="
                    link
                    
                ">
                                        Column 1
                                    </a>
                                    <ul class="list">
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Sign in">
                                                Login to My Account
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Sign up">
                                                Create an Account
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="My Orders">
                                                My Orders
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                    <a href="" class="
                    link
                    
                ">
                                        Column 2
                                    </a>
                                    <ul class="list">
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="My Cart">
                                                My Cart
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Checkout">
                                                Checkout
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>

                        </div>
                    </li>
                    <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                        <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-information" aria-controls="dropdown-information">
                            Information

                            <svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="img">
                                <title>Arrow down</title>
                                <use href="/images/icons-sprite.svg#angle-down"></use>
                            </svg>

                        </button>

                        <div id="dropdown-information" class="dropdown-list__content " aria-hidden="true">
                            <ul class="
        list
        list__columns
        footer__links-list
    ">
                                <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                    <a href="" class="
                    link
                    
                ">
                                        Column 1
                                    </a>
                                    <ul class="list">
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Hours">
                                                Hours
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="About Us">
                                                About Us
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Contact Us">
                                                Contact Us
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                    <a href="" class="
                    link
                    
                ">
                                        Column 2
                                    </a>
                                    <ul class="list">
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Job Openings">
                                                Job Openings
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Returns">
                                                Returns
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Shipping">
                                                Shipping
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                    <a href="" class="
                    link
                    
                ">
                                        Column 3
                                    </a>
                                    <ul class="list">
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Privacy Policy">
                                                Privacy Policy
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Terms & Conditions">
                                                Terms &amp; Conditions
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Site Map">
                                                Site Map
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                    <a href="" class="
                    link
                    
                ">
                                        Column 4
                                    </a>
                                    <ul class="list">
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Reviews">
                                                Reviews
                                            </a>
                                        </li>
                                        <li class="
                            list__item
                            list__column-item
                            
                        ">
                                            <a href="#" class="
                                link
                                footer__link
                            " title="Email Us!">
                                                Email Us!
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>

                        </div>
                    </li>
                </ul>
            </div>

            <script type="text/javascript">
                new DropdownList(document.getElementById('dropdown-footer'));
            </script>

        </section>
    </div>

    <section class="footer__bottom-bar ">
        <div class="footer__bottom-bar-handler container">
            <div class="footer__copyright">
                <small>
                    Copyright © 2019 Alpaca
                </small>
            </div>

            <ul class="
                        footer__payments-list
                        list
                        list--horizontal
                        
                    ">
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon footer__payments-list-icon--visa" role="img">
                        <title>Visa</title>
                        <use href="/images/icons-sprite.svg#visa"></use>
                    </svg>

                </li>
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon" role="img">
                        <title>Master Card</title>
                        <use href="/images/icons-sprite.svg#master-card"></use>
                    </svg>

                </li>
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon" role="img">
                        <title>Discover</title>
                        <use href="/images/icons-sprite.svg#discover"></use>
                    </svg>

                </li>
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon" role="img">
                        <title>American Express</title>
                        <use href="/images/icons-sprite.svg#american-express"></use>
                    </svg>

                </li>
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon footer__payments-list-icon--paypal" role="img">
                        <title>PayPal</title>
                        <use href="/images/icons-sprite.svg#paypal"></use>
                    </svg>

                </li>
            </ul>

            <div class="footer__switchers">
                <div id="language-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher">
                    <ul class="dropdown-list__list">
                        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                            <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content1">
                                German

                                <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                    <title>Arrow Down</title>
                                    <use href="/images/icons-sprite.svg#angle-down"></use>
                                </svg>

                            </a>

                            <div id="dropdown-detailed-content1" class="dropdown-list__content " aria-hidden="true">
                                <ul class="list ">
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                </ul>

                            </div>
                        </li>
                    </ul>
                </div>

                <script type="text/javascript">
                    new DropdownList(document.getElementById('language-dropdown'));
                </script>

                <div id="currency-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs">
                    <ul class="dropdown-list__list">
                        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                            <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content2">
                                USD - US Dollar

                                <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                    <title>Arrow Down</title>
                                    <use href="/images/icons-sprite.svg#angle-down"></use>
                                </svg>

                            </a>

                            <div id="dropdown-detailed-content2" class="dropdown-list__content " aria-hidden="true">
                                <ul class="list ">
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                </ul>

                            </div>
                        </li>
                    </ul>
                </div>

                <script type="text/javascript">
                    new DropdownList(document.getElementById('currency-dropdown'));
                </script>

            </div>
        </div>
    </section>

    <div class="cookie-message cookie-message" data-type="cookie" tabindex="0" aria-label="Cookie policy message">
        <div class="cookie-message__container">
            <p class="cookie-message__text">
                <a href="#" class="link--invert">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.
            </p>

            <button class="
                button
                button--icon
                cookie-message__close
                cookie-message__button
                button--rotate-icon
            " type="button" aria-label="Close cookie message">
                <svg class="icon button__icon cookie-message__button-icon" role="presentation" focusable="false">
                    <title>Close</title>
                    <use href="/images/icons-sprite.svg#close"></use>
                </svg>

            </button>
        </div>
    </div>
    <script src="/components/raw/cookie-message/cookie-message.js"></script>

</footer>

<script src="/components/raw/footer/footer.js"></script>
<div class="page-wrapper">
    {{ render '@header' }}
    {{ render '@breadcrumbs' breadcrumbs }}
    <main
        id="maincontent"
        class="container"
    >
        <div class="blog row between-lg">
            <div class="blog__articles {{ articlesClass }}">
                {{ render '@list' articlesList }}
                {{ render '@pager' }}
            </div>
            <nav class="blog__nav {{ navClass }}">
                <div class="blog__recommended">
                    {{ render '@heading' recommendedHeading }}
                    {{ render '@list--link' recommendedList merge=true }}
                </div>
                <div class="blog__categories">
                    {{ render '@heading' categoryHeading }}
                    {{ render '@list--link' categoriesList merge=true }}
                </div>
            </nav>
        </div>
    </main>
</div>

{{ render '@footer' }}
{
  "breadcrumbs": {
    "categories": [
      {
        "name": "Home",
        "href": "#",
        "linkClass": "breadcrumbs__link"
      },
      {
        "name": "Blog",
        "href": "#",
        "linkClass": "breadcrumbs__link"
      }
    ]
  },
  "articlesClass": "col-md-8",
  "navClass": "col-md-4 col-lg-3",
  "articlesList": {
    "listTag": "ul",
    "elementTag": "li",
    "class": "blog__articles-list",
    "elements": [
      {
        "text": false,
        "class": "blog__article-item",
        "component": {
          "content": "article-item"
        }
      },
      {
        "text": false,
        "class": "blog__article-item",
        "component": {
          "content": "article-item"
        }
      },
      {
        "text": false,
        "class": "blog__article-item",
        "component": {
          "content": "article-item"
        }
      },
      {
        "text": false,
        "class": "blog__article-item",
        "component": {
          "content": "article-item"
        }
      }
    ]
  },
  "recommendedHeading": {
    "tag": "h3",
    "class": "blog__nav-heading heading--font-secondary",
    "text": "Recent Posts"
  },
  "recommendedList": {
    "class": "blog__nav-list"
  },
  "categoryHeading": {
    "tag": "h3",
    "class": "blog__nav-heading heading--font-secondary",
    "text": "Categories"
  },
  "categoriesList": {
    "class": "blog__nav-list"
  }
}
  • Content:
    $blog__articles-margin             : 0 0 112px !default;
    $blog__articles-margin\@medium     : 0 !default;
    
    //articles-list
    $blog__articles-list-margin        : 0 0 72px !default;
    
    //article-item
    $blog__article-item-padding        : 0 !default;
    $blog__article-item-margin         : 0 0 $spacer--semi-medium !default;
    $blog__article-item-border         : $border-base !default;
    $blog__article-item-border-width   : 0 0 $border-width-base 0 !default;
    
    //aside-heading
    $blog__nav-heading-font-size       : $font-size-large !default;
    $blog__nav-heading-font-weight     : $font-weight-bold !default;
    $blog__nav-heading-margin          : 0 0 $spacer--semi-medium !default;
    $blog__nav-heading-text-transform  : none !default;
    $blog__nav-heading-height          : 48px !default;
    
    //aside-list-item
    $blog__nav-list-item-padding       : 0 !default;
    $blog__nav-list-item-margin        : 0 !default;
    
    //aside-list-link
    $blog__nav-list-link-text-transform: uppercase !default;
    $blog__nav-list-link-font-size     : $font-size-medium !default;
    $blog__nav-list-link-height        : 48px !default;
    
    //recommended
    $blog__recommended-margin          : 0 0 72px !default;
    $blog__recommended-margin\@medium  : 0 0 72px $spacer--medium !default;
    $blog__recommended-margin\@large   : 0 0 72px !default;
    
    //categories
    $blog__categories-margin           : 0 !default;
    $blog__categories-margin\@medium   : 0 0 0 $spacer--medium !default;
    $blog__categories-margin\@large    : 0 !default;
    
  • URL: /components/raw/blog/_blog-variables.scss
  • Filesystem Path: build/components/Templates/blog/_blog-variables.scss
  • Size: 1.5 KB
  • Content:
    @import 'blog-variables';
    
    .blog {
        &__articles {
            margin: $blog__articles-margin;
    
            @include mq($screen-m) {
                margin: $blog__articles-margin\@medium;
            }
        }
    
        &__articles-list {
            margin: $blog__articles-list-margin;
        }
    
        &__article-item {
            padding: $blog__article-item-padding;
            margin: $blog__article-item-margin;
            border: $blog__article-item-border;
            border-width: $blog__article-item-border-width;
    
            &:last-child {
                margin-bottom: 0;
            }
        }
    
        &__nav-heading {
            font-size: $blog__nav-heading-font-size;
            font-weight: $blog__nav-heading-font-weight;
            margin: $blog__nav-heading-margin;
            text-transform: $blog__nav-heading-text-transform;
    
            @include font-padding($blog__nav-heading-font-size, $blog__nav-heading-height);
        }
    
        &__nav-list {
            .list__item {
                padding: $blog__nav-list-item-padding;
                margin: $blog__nav-list-item-margin;
            }
    
            .link {
                display: block;
                text-transform: $blog__nav-list-link-text-transform;
                font-size: $blog__nav-list-link-font-size;
    
                @include font-padding($blog__nav-list-link-font-size, $blog__nav-list-link-height);
            }
        }
    
        &__recommended {
            margin: $blog__recommended-margin;
    
            @include mq($screen-m) {
                margin: $blog__recommended-margin\@medium;
            }
    
            @include mq($screen-l) {
                margin: $blog__recommended-margin\@large;
            }
        }
    
        &__categories {
            margin: $blog__categories-margin;
    
            @include mq($screen-m) {
                margin: $blog__categories-margin\@medium;
            }
    
            @include mq($screen-l) {
                margin: $blog__categories-margin\@large;
            }
        }
    }
    
  • URL: /components/raw/blog/_blog.scss
  • Filesystem Path: build/components/Templates/blog/_blog.scss
  • Size: 1.8 KB

No notes defined.