Copy environment

Card List

<section class="section section--page-intro card-list ">
    <div class="section__inner">
        <div class="section__content">
            <div class="h-container">

                <h1 class="heading  h2 card-list__heading">
                    <span class="heading__small">check out our</span>
                    <span class="heading__main">
                    open positions
            </span>
                </h1>
                <hr class="separator separator--small ">
                <div class="card-list__inner">
                    <div class="card-list__aside">
                        <aside class="sidebar  card-list__sidebar">
                            <h4 class="sidebar__title">overview</h4>
                            <ul class="sidebar__list">
                                <li class="sidebar__list-item is-current">
                                    <a href="#front-end-developer" class="sidebar__link ">front-end developer</a>
                                </li>
                                <li class="sidebar__list-item">
                                    <a href="#front-end-developer" class="sidebar__link ">back-end developer</a>
                                </li>
                                <li class="sidebar__list-item">
                                    <a href="#front-end-developer" class="sidebar__link ">front-end developer</a>
                                </li>
                                <li class="sidebar__list-item">
                                    <a href="#front-end-developer" class="sidebar__link ">back-end developer</a>
                                </li>
                            </ul>
                        </aside>
                    </div>
                    <div class="card-list__main">
                        <a href="#" class="card  card-list__card" id="front-end-developer" style="color:#000000;" data-color="#000000" data-background-color="#ffffff" data-text-color="light" data-heading-color="primary">
                            <div class="card__inner">
                                <div class="card__content">
                                    <h3 class="h4 card__title">Front end developer</h3>
                                    <div class="card__meta">PHP7 / HTML5 / CSS3</div>
                                </div>
                                <div class="image  card__device">
                                    <div class="image__inner">
                                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20175%20325%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/175x325 175w, //placehold.it/350x650 350w" data-sizes="auto" alt="" class="image__img lazyload">
                                        <noscript>
                <img src="//placehold.it/175x325" srcset="//placehold.it/175x325 175w, //placehold.it/350x650 350w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                    </div>
                                </div>
                            </div>
                            <svg class="icon  card__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
                        </a>
                        <a href="#" class="card  card-list__card" id="front-end-developer" style="color:#000000;" data-color="#000000" data-background-color="#ffffff" data-text-color="light" data-heading-color="primary">
                            <div class="card__inner">
                                <div class="card__content">
                                    <h3 class="h4 card__title">Front end developer</h3>
                                    <div class="card__meta">PHP7 / HTML5 / CSS3</div>
                                </div>
                                <div class="image  card__device">
                                    <div class="image__inner">
                                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20175%20325%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/175x325 175w, //placehold.it/350x650 350w" data-sizes="auto" alt="" class="image__img lazyload">
                                        <noscript>
                <img src="//placehold.it/175x325" srcset="//placehold.it/175x325 175w, //placehold.it/350x650 350w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                    </div>
                                </div>
                            </div>
                            <svg class="icon  card__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
                        </a>
                        <a href="#" class="card  card-list__card" id="front-end-developer" style="color:#000000;" data-color="#000000" data-background-color="#ffffff" data-text-color="light" data-heading-color="primary">
                            <div class="card__inner">
                                <div class="card__content">
                                    <h3 class="h4 card__title">Front end developer</h3>
                                    <div class="card__meta">PHP7 / HTML5 / CSS3</div>
                                </div>
                                <div class="image  card__device">
                                    <div class="image__inner">
                                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20175%20325%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/175x325 175w, //placehold.it/350x650 350w" data-sizes="auto" alt="" class="image__img lazyload">
                                        <noscript>
                <img src="//placehold.it/175x325" srcset="//placehold.it/175x325 175w, //placehold.it/350x650 350w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                    </div>
                                </div>
                            </div>
                            <svg class="icon  card__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
                        </a>
                        <a href="#" class="card  card-list__card" id="front-end-developer" style="color:#000000;" data-color="#000000" data-background-color="#ffffff" data-text-color="light" data-heading-color="primary">
                            <div class="card__inner">
                                <div class="card__content">
                                    <h3 class="h4 card__title">Front end developer</h3>
                                    <div class="card__meta">PHP7 / HTML5 / CSS3</div>
                                </div>
                                <div class="image  card__device">
                                    <div class="image__inner">
                                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20175%20325%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/175x325 175w, //placehold.it/350x650 350w" data-sizes="auto" alt="" class="image__img lazyload">
                                        <noscript>
                <img src="//placehold.it/175x325" srcset="//placehold.it/175x325 175w, //placehold.it/350x650 350w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                    </div>
                                </div>
                            </div>
                            <svg class="icon  card__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "heading": {
      "prefix": "check out our",
      "text": "open positions"
    },
    "sidebar": {
      "title": "overview",
      "list": [
        {
          "link": "#front-end-developer",
          "text": "front-end developer",
          "current": true
        },
        {
          "link": "#front-end-developer",
          "text": "back-end developer"
        },
        {
          "link": "#front-end-developer",
          "text": "front-end developer"
        },
        {
          "link": "#front-end-developer",
          "text": "back-end developer"
        }
      ]
    },
    "items": [
      {
        "color": "#000000",
        "title": "Front end developer",
        "meta": "PHP7 / HTML5 / CSS3",
        "id": "front-end-developer",
        "device": true
      },
      {
        "color": "#000000",
        "title": "Front end developer",
        "meta": "PHP7 / HTML5 / CSS3",
        "id": "front-end-developer",
        "device": true
      },
      {
        "color": "#000000",
        "title": "Front end developer",
        "meta": "PHP7 / HTML5 / CSS3",
        "id": "front-end-developer",
        "device": true
      },
      {
        "color": "#000000",
        "title": "Front end developer",
        "meta": "PHP7 / HTML5 / CSS3",
        "id": "front-end-developer",
        "device": true
      }
    ]
  }
}

Case Studies

<section class="section section--page-intro card-list js-card-list">
    <div class="section__inner">
        <div class="section__content">
            <div class="h-container">

                <h1 class="heading  h2 card-list__heading">
                    <span class="heading__small">take a look at our</span>
                    <span class="heading__main">
                    case studies
            </span>
                </h1>
                <hr class="separator separator--small js-card-list">
                <div class="card-list__inner">
                    <div class="card-list__aside">
                        <aside class="sidebar  card-list__sidebar">
                            <h4 class="sidebar__title">clients</h4>
                            <ul class="sidebar__list">
                                <li class="sidebar__list-item">
                                    <a href="#tavex-0" class="sidebar__link ">Tavex</a>
                                </li>
                                <li class="sidebar__list-item">
                                    <a href="#tavex-1" class="sidebar__link ">Tavex</a>
                                </li>
                                <li class="sidebar__list-item">
                                    <a href="#tavex-2" class="sidebar__link ">Telia</a>
                                </li>
                                <li class="sidebar__list-item">
                                    <a href="#tavex-3" class="sidebar__link ">Diapol Granite</a>
                                </li>
                                <li class="sidebar__list-item">
                                    <a href="#tavex-4" class="sidebar__link ">Maikrahv</a>
                                </li>
                            </ul>
                        </aside>
                    </div>
                    <div class="card-list__main">
                        <a href="#" class="card card--large card-list__card" id="tavex-0" style="color:#000000;" data-color="#000000" data-background-color="#e5e5e5" data-text-color="light" data-heading-color="primary">
                            <div class="card__inner">
                                <div class="card__content">
                                    <h3 class="h4 card__title">Award winning website for 21st century home</h3>
                                    <div class="card__meta">PHP7 / HTML5 / CSS3</div>
                                </div>
                                <div class="card__background">
                                    <div class="image image--fluid card__image">
                                        <div class="image__inner">
                                            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20240%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/300x240 300w, //placehold.it/600x480 600w" data-sizes="auto" alt="" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/300x240" srcset="//placehold.it/300x240 300w, //placehold.it/600x480 600w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="image image--fluid card__satellite card__satellite--one">
                                <div class="image__inner">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2070%2070%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                    <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                </div>
                            </div>
                            <div class="image image--fluid card__satellite card__satellite--two">
                                <div class="image__inner">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2070%2070%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                    <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                </div>
                            </div>
                            <svg class="icon card--large card__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
                        </a>
                        <a href="#" class="card card--large card-list__card" id="tavex-1" style="color:#00bf9c;" data-color="#00bf9c" data-background-color="#d0fff6" data-text-color="light" data-heading-color="secondary">
                            <div class="card__inner">
                                <div class="card__content">
                                    <h3 class="h4 card__title">Tavex e-commerce</h3>
                                    <div class="card__meta">PHP7 / HTML5 / CSS3</div>
                                </div>
                                <div class="card__background">
                                    <div class="image image--fluid card__image">
                                        <div class="image__inner">
                                            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20240%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/300x240 300w, //placehold.it/600x480 600w" data-sizes="auto" alt="" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/300x240" srcset="//placehold.it/300x240 300w, //placehold.it/600x480 600w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="image image--fluid card__satellite card__satellite--one">
                                <div class="image__inner">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2070%2070%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                    <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                </div>
                            </div>
                            <div class="image image--fluid card__satellite card__satellite--two">
                                <div class="image__inner">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2070%2070%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                    <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                </div>
                            </div>
                            <svg class="icon card--large card__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
                        </a>
                        <a href="#" class="card card--large card-list__card" id="tavex-2" style="color:#ffc400;" data-color="#ffc400" data-background-color="#fff3cc" data-text-color="light" data-heading-color="tertiary">
                            <div class="card__inner">
                                <div class="card__content">
                                    <h3 class="h4 card__title">Tavex e-commerce</h3>
                                    <div class="card__meta">PHP7 / HTML5 / CSS3</div>
                                </div>
                            </div>
                            <div class="image image--fluid card__satellite card__satellite--one">
                                <div class="image__inner">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2070%2070%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                    <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                </div>
                            </div>
                            <svg class="icon card--large card__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
                        </a>
                        <a href="#" class="card card--large card-list__card" id="tavex-3" style="color:#ff452d;" data-color="#ff452d" data-background-color="#ffccc6" data-text-color="light" data-heading-color="primary">
                            <div class="card__inner">
                                <div class="card__content">
                                    <h3 class="h4 card__title">Tavex e-commerce</h3>
                                    <div class="card__meta">PHP7 / HTML5 / CSS3</div>
                                </div>
                                <div class="card__background">
                                    <div class="image image--fluid card__image">
                                        <div class="image__inner">
                                            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20240%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/300x240 300w, //placehold.it/600x480 600w" data-sizes="auto" alt="" class="image__img lazyload">
                                            <noscript>
                <img src="//placehold.it/300x240" srcset="//placehold.it/300x240 300w, //placehold.it/600x480 600w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="image image--fluid card__satellite card__satellite--two">
                                <div class="image__inner">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2070%2070%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                    <noscript>
                <img src="//placehold.it/320x320" srcset="//placehold.it/320x320 320w, //placehold.it/640x640 640w, //placehold.it/960x960 960w, //placehold.it/1280x1280 1280w, //placehold.it/1600x1600 1600w, //placehold.it/70x70 70w, //placehold.it/140x140 140w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                </div>
                            </div>
                            <svg class="icon card--large card__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
                        </a>
                        <a href="#" class="card card--large card-list__card" id="tavex-4" style="color:#e8fefb;" data-color="#e8fefb" data-background-color="#f8fffe" data-text-color="dark" data-heading-color="primary">
                            <div class="card__inner">
                                <div class="card__content">
                                    <h3 class="h4 card__title">Tavex e-commerce</h3>
                                    <div class="card__meta">PHP7 / HTML5 / CSS3</div>
                                </div>
                            </div>
                            <svg class="icon card--large card__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
{
  "language": "en-US",
  "class": "js-card-list",
  "cardModifier": "card--large",
  "data": {
    "heading": {
      "prefix": "take a look at our",
      "text": "case studies"
    },
    "sidebar": {
      "title": "clients",
      "list": [
        {
          "link": "#tavex-0",
          "text": "Tavex"
        },
        {
          "link": "#tavex-1",
          "text": "Tavex"
        },
        {
          "link": "#tavex-2",
          "text": "Telia"
        },
        {
          "link": "#tavex-3",
          "text": "Diapol Granite"
        },
        {
          "link": "#tavex-4",
          "text": "Maikrahv"
        }
      ]
    },
    "items": [
      {
        "color": "#000000",
        "backgroundColor": "#e5e5e5",
        "headingColor": "primary",
        "title": "Award winning website for 21st century home",
        "meta": "PHP7 / HTML5 / CSS3",
        "id": "tavex-0",
        "image": true,
        "satellite1": true,
        "satellite2": true
      },
      {
        "color": "#00bf9c",
        "backgroundColor": "#d0fff6",
        "headingColor": "secondary",
        "title": "Tavex e-commerce",
        "meta": "PHP7 / HTML5 / CSS3",
        "id": "tavex-1",
        "image": true,
        "satellite1": true,
        "satellite2": true
      },
      {
        "color": "#ffc400",
        "backgroundColor": "#fff3cc",
        "headingColor": "tertiary",
        "title": "Tavex e-commerce",
        "meta": "PHP7 / HTML5 / CSS3",
        "id": "tavex-2",
        "satellite1": true
      },
      {
        "color": "#ff452d",
        "backgroundColor": "#ffccc6",
        "headingColor": "primary",
        "title": "Tavex e-commerce",
        "meta": "PHP7 / HTML5 / CSS3",
        "id": "tavex-3",
        "image": true,
        "satellite2": true
      },
      {
        "color": "#e8fefb",
        "backgroundColor": "#f8fffe",
        "textColor": "dark",
        "title": "Tavex e-commerce",
        "meta": "PHP7 / HTML5 / CSS3",
        "id": "tavex-4"
      }
    ]
  }
}