Copy environment

Product List

Preview 
<div class="product-list  ">
    <div class="link-grid">
        <div class="h-container">
            <div class="grid">
                <h2 class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2 grid__col--bottom-gutter-xs-1 link-grid__title color-green">Meie tooted</h2>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Põlevkivikütteõli</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Vaigud</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Koks</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Killustik</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Alküülresortsiinid</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Energia</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Peenkeemiatooted</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "component": "product-list",
    "title": "Meie tooted",
    "links": [
      {
        "text": "Põlevkivikütteõli",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Vaigud",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Koks",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Killustik",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Alküülresortsiinid",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Energia",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Peenkeemiatooted",
        "ref": "#",
        "icon": "arrow"
      }
    ]
  }
}

Services

Preview 
<div class="product-list  ">
    <div class="link-grid">
        <div class="h-container">
            <div class="grid">
                <h2 class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2 grid__col--bottom-gutter-xs-1 link-grid__title color-green">Meie tooted</h2>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Tööstusautomaatika</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Võrguteenuse müük</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Elektritööd</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Tehnilise vee müük</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Projektijuhtimise teenused</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Gaaside müük</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Metallkonstruktsioonide tootmine</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Laboriteenused</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Tõsteteenused</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Lubiväetise müük</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Elektri- ja soojusenergia müük</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
                <div class="grid__col grid__col--xs-20 grid__col--left-gutter-xs-2
                    grid__col--sm-10
                    link-grid__link">
                    <div class="link-grid__button-container">
                        <a href="#" class="button button--read button--large ">
                    <span class="button__text">Tehnoloogia müük</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "component": "product-list",
    "title": "Meie tooted",
    "links": [
      {
        "text": "Tööstusautomaatika",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Võrguteenuse müük",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Elektritööd",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Tehnilise vee müük",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Projektijuhtimise teenused",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Gaaside müük",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Metallkonstruktsioonide tootmine",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Laboriteenused",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Tõsteteenused",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Lubiväetise müük",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Elektri- ja soojusenergia müük",
        "ref": "#",
        "icon": "arrow"
      },
      {
        "text": "Tehnoloogia müük",
        "ref": "#",
        "icon": "arrow"
      }
    ],
    "bottomGutter": 2
  }
}