Copy environment

Card

<a href="#" class="card  " style="color:#ff452d;" data-color="#ff452d" 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">jr front-end developer</h3>
            <div class="card__meta">HTML5 / CSS3 / JAVASCRIPT / PHP</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>
{
  "language": "en-US",
  "data": {
    "color": "#ff452d",
    "title": "jr front-end developer",
    "meta": "HTML5 / CSS3 / JAVASCRIPT / PHP",
    "device": true
  }
}

Case Study

For case study use card–large modifier

<a href="#" class="card card--large " style="color:#353635;" data-color="#353635" 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">Tavex e-commerce platform</h3>
            <div class="card__meta">PHP / Wordpress</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>
{
  "language": "en-US",
  "modifier": "card--large",
  "data": {
    "color": "#353635",
    "title": "Tavex e-commerce platform",
    "meta": "PHP / Wordpress",
    "satellite1": true,
    "satellite2": true,
    "image": true
  }
}

Text Color Dark

<a href="#" class="card  " style="color:#00bf9c;" data-color="#00bf9c" data-background-color="#ffffff" data-text-color="dark" data-heading-color="primary">
    <div class="card__inner">
        <div class="card__content">
            <h3 class="h4 card__title">Tavex e-commerce platform</h3>
            <div class="card__meta">PHP / Wordpress</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__icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#arrow-right"></use>
</svg>
</a>
{
  "language": "en-US",
  "data": {
    "textColor": "dark",
    "title": "Tavex e-commerce platform",
    "meta": "PHP / Wordpress",
    "satellite1": true,
    "satellite2": true,
    "image": true
  }
}