Component Library

Icon Boxes 

<section>
    <div class="container">
        <div class="row">
            <div class="col-xs-4">
                <article class="icon-box ">
                    <div class="icon-box__inner">
                        <div class="icon-box__content">
                            <div class="icon-box__icon">
                                <svg class="svg-icon  ">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-shop"></use>
                                    </svg> </div>
                            <h2 class="heading heading--column ">Shop online</h2>
                            <p>Lorem ipsum dolor sit amet</p>
                        </div>
                        <a href="#shop" title="Go to shop" target="" class="link   " property="url">Go to shop</a>
                    </div>
                </article>
            </div>
            <div class="col-xs-4">
                <article class="icon-box ">
                    <div class="icon-box__inner">
                        <div class="icon-box__content">
                            <div class="icon-box__icon">
                                <svg class="svg-icon  ">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-credit-card"></use>
                                    </svg> </div>
                            <h2 class="heading heading--column ">Secure payment</h2>
                            <p>Lorem ipsum dolor sit amet</p>
                        </div>
                        <a href="#payment" title="More about payment" target="" class="link   " property="url">More about payment</a>
                    </div>
                </article>
            </div>
            <div class="col-xs-4">
                <article class="icon-box ">
                    <div class="icon-box__inner">
                        <div class="icon-box__content">
                            <div class="icon-box__icon">
                                <svg class="svg-icon  ">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-box"></use>
                                    </svg> </div>
                            <h2 class="heading heading--column ">Free delivery</h2>
                            <p>Lorem ipsum dolor sit amet</p>
                        </div>
                        <a href="#delivery" title="Buy now" target="" class="link   " property="url">Buy now</a>
                    </div>
                </article>
            </div>
        </div>
    </div>
</section>
 
<section>
    <div class="container">
        <div class="row">
            {{#each iconBoxes}}
            <div class="col-xs-4">
                {{> @icon-box this}}
            </div>
            {{/each}}
        </div>
    </div>
</section>
 
{
  "iconBoxes": [
    {
      "heading": {
        "text": "Shop online"
      },
      "iconBoxContent": "Lorem ipsum dolor sit amet",
      "svgIconName": "icon-shop",
      "link": {
        "url": "#shop",
        "text": "Go to shop",
        "target": null,
        "title": "Go to shop"
      }
    },
    {
      "heading": {
        "text": "Secure payment"
      },
      "iconBoxContent": "Lorem ipsum dolor sit amet",
      "svgIconName": "icon-credit-card",
      "link": {
        "url": "#payment",
        "text": "More about payment",
        "target": null,
        "title": "More about payment"
      }
    },
    {
      "heading": {
        "text": "Free delivery"
      },
      "iconBoxContent": "Lorem ipsum dolor sit amet",
      "svgIconName": "icon-box",
      "link": {
        "url": "#delivery",
        "text": "Buy now",
        "target": null,
        "title": "Buy now"
      }
    }
  ]
}

There are no notes for this item.