<div class="section case-study">
<div class="section__inner ">
<div class="section__content ">
<div class="h-container">
<div class="grid case-study__grid">
<div class="grid__col grid__col--md-5 grid__col--offset-md-1 case-study__col case-study__col--content">
<div class="case-study__details animation__target">
<div class="case-study__details-item animation__target">
<div class="case-study__details-label">Role</div>
<div class="case-study__details-data animation__target">
UI/UX, Brand, Website
</div>
</div>
<div class="case-study__details-item animation__target">
<div class="case-study__details-label">Website</div>
<div class="case-study__details-data animation__target">
<a href="https://elblox.com" class="link case-study__details-link" target="_blank" rel="noreferrer noopener">elblox.com<svg class="icon link__icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-right-top-24"></use>
</svg></a>
</div>
</div>
</div>
<div class="case-study__content text animation__target js-more">
<p>Elblox.com is now a significant sales and marketing channel for businesses, private producers and energy utilities. In the case of elblox.com the information architecture and the visual language helps to explain the nature of the service.</p>
<p>Elblox.com is now a significant sales and marketing channel for businesses, private producers and energy utilities. In the case of elblox.com the information architecture and the visual language helps to explain the nature of the service.</p>
<button type="button" class="button button--magnetic case-study__more-button h-hidden-sm h-hidden-md h-hidden-lg">
<span class="button__filler"></span>
<span class="button__inner">
<span class="button__text">Read more</span>
</span>
</button>
</div>
</div>
<div class="grid__col grid__col--md-6 case-study__col animation__target">
<div class="case-study__gallery">
<div class="modal " id="case-study-image-modal">
<div class="case-study__modal-content">
<p class="case-study__modal-title">Website for the pioneer in the world of renewable energy.</p>
<figure class="image image--fluid case-study__modal-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201440%22%3E%3C%2Fsvg%3E" data-srcset="https://placehold.it/1920x1080" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<figure class="image image--fluid case-study__modal-image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201440%22%3E%3C%2Fsvg%3E" data-srcset="https://placehold.it/1080x1920" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
<a class="case-study__image-link" href="#case-study-image-modal" data-js="open-modal">
<figure class="image image--fluid case-study__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201440%22%3E%3C%2Fsvg%3E" data-srcset="https://placehold.it/1920x1080" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
<a class="case-study__image-link" href="#case-study-image-modal" data-js="open-modal">
<figure class="image image--fluid case-study__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201440%22%3E%3C%2Fsvg%3E" data-srcset="https://placehold.it/1080x1920" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</a>
</div>
<a href="#" class="button button--block-xs case-study__cta-button h-hidden-sm h-hidden-md h-hidden-lg">
<span class="button__inner">
<span class="button__text">Lets start a project</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% set content %}
<div class="h-container">
<div class="grid case-study__grid">
<div class="grid__col grid__col--md-5 grid__col--offset-md-1 case-study__col case-study__col--content">
{% if data.details %}
<div class="case-study__details animation__target">
{% for item in data.details %}
<div class="case-study__details-item animation__target">
{% if item.label %}
<div class="case-study__details-label">{{ item.label }}</div>
{% endif %}
{% if item.data %}
<div class="case-study__details-data animation__target">
{% set itemElement %}
{% apply spaceless %}
{% if item.link %}
<a href="{{ item.link }}" class="link case-study__details-link" {% if item.newtab %}target="_blank" rel="noreferrer noopener"{% endif %}>{{ item.data }}{% include '@icon' with {name: 'tiny-right-top-24', modifier: '', class: 'link__icon'} %}</a>
{% else %}
{{ item.data }}
{% endif %}
{% endapply %}
{% endset %}
{{ itemElement }}
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
{% if data.content %}
<div class="case-study__content text animation__target {% if data.moreButton %}js-more{% endif %}">
{{ data.content }}
{% if data.moreButton %}
{% include '@button' with { data: data.moreButton, class: 'case-study__more-button h-hidden-sm h-hidden-md h-hidden-lg', modifier: 'button--magnetic' } %}
{% endif %}
</div>
{% endif %}
</div>
<div class="grid__col grid__col--md-6 case-study__col animation__target">
{% if data.images %}
<div class="case-study__gallery">
{% set modalContent %}
<div class="case-study__modal-content">
{% if data.modalTitle %}
<p class="case-study__modal-title">{{ data.modalTitle }}</p>
{% endif %}
{% for image in data.images %}
{% include '@image' with {
data: image|srcset('1440x1440f'),
class: 'case-study__modal-image',
modifier: 'image--fluid'
}
%}
{% endfor %}
</div>
{% endset %}
{% include '@modal' with {
data: {
content: modalContent
},
id: 'case-study-image-modal',
class: '',
modifier: ''
} %}
{% for image in data.images %}
<a class="case-study__image-link" href="#case-study-image-modal" data-js="open-modal">
{% include '@image' with {
data: image|srcset('1440x1440f'),
class: 'case-study__image',
modifier: 'image--fluid'
}
%}
</a>
{% endfor %}
</div>
{% if data.ctaButton %}
{% include '@button' with { data: data.ctaButton, class: 'case-study__cta-button h-hidden-sm h-hidden-md h-hidden-lg', modifier: 'button--block-xs' } %}
{% endif %}
{% endif %}
{% if data.videos %}
{% for video in data.videos %}
{% include '@video' with {
data: {
poster: video.poster,
videos: video.videoSources,
vimeo: video.vimeo
},
controls: true,
loop: false,
modifier: '',
class: 'case-study__video'
} %}
{% endfor %}
{% endif %}
{% if data.videosAndPhotos is not empty %}
<div class="case-study__gallery case-study__gallery--secondary">
{% set modalContent %}
<div class="case-study__modal-content">
{% if data.modalTitle %}
<p class="case-study__modal-title">{{ data.modalTitle }}</p>
{% endif %}
{% for item in data.videosAndPhotos %}
{% if item.poster and not item.videoSources %}
{% include '@image' with {
data: item.poster|srcset('1440x1440f'),
class: 'case-study__modal-image',
modifier: 'image--fluid'
} %}
{% endif %}
{% if item.videoSources %}
{% include '@video' with {
data: {
poster: item.poster.imageUrl,
videos: item.videoSources,
vimeo: item.vimeo
},
controls: true,
loop: false,
modifier: 'case-study__modal-image case-study__modal-video',
class: 'case-study__video'
} %}
{% endif %}
{% if item.lottie %}
{% include '@lottie' with {
data: {
image: item.lottie.image,
lottieSrc: item.lottie.lottieMedia,
loadWhenInView: item.lottie.loadWhenInView,
altText: item.lottie.altText,
attributes: 'data-modal-lottie="true"'
},
class: 'case-study__modal-image case-study__modal-lottie',
modifier: 'lottie--fluid',
} %}
{% endif %}
{% endfor %}
</div>
{% endset %}
{% include '@modal' with {
data: {
content: modalContent
},
id: 'case-study-media-modal',
class: '',
modifier: ''
} %}
{% for item in data.videosAndPhotos %}
{% if item.poster and not item.videoSources %}
<a class="case-study__image-link" href="#case-study-media-modal" data-js="open-modal">
{% include '@image' with {
data: item.poster|srcset('1440x1440f'),
class: 'case-study__image',
modifier: 'image--fluid'
} %}
</a>
{% endif %}
{% if item.videoSources %}
<a class="case-study__image-link case-study__video-link" href="#case-study-media-modal" data-js="open-modal">
{% include '@video' with {
data: {
poster: item.poster.imageUrl,
videos: item.videoSources,
vimeo: item.vimeo
},
controls: true,
loop: false,
modifier: '',
class: 'case-study__video'
} %}
</a>
{% endif %}
{% if item.lottie %}
<a class="case-study__image-link case-study__lottie-link" href="#case-study-media-modal" data-js="open-modal">
{% include '@lottie' with {
data: {
image:item.lottie.image,
lottieMedia: item.lottie.lottieMedia,
loadWhenInView: item.lottie.loadWhenInView,
altText: item.lottie.altText,
},
class: 'case-study__lottie',
modifier: 'lottie--fluid'
} %}
</a>
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
{% endset %}
{% include '@section' with { modifier: modifier ~ '', class: class ~ 'case-study', data: { content: content } } %}
{
"language": "en-US",
"data": {
"details": [
{
"label": "Role",
"data": "UI/UX, Brand, Website"
},
{
"label": "Website",
"data": "elblox.com",
"link": "https://elblox.com",
"newtab": true
}
],
"content": "<p>Elblox.com is now a significant sales and marketing channel for businesses, private producers and energy utilities. In the case of elblox.com the information architecture and the visual language helps to explain the nature of the service.</p><p>Elblox.com is now a significant sales and marketing channel for businesses, private producers and energy utilities. In the case of elblox.com the information architecture and the visual language helps to explain the nature of the service.</p>",
"moreButton": {
"text": "Read more"
},
"ctaButton": {
"text": "Lets start a project",
"link": "#"
},
"modalTitle": "Website for the pioneer in the world of renewable energy.",
"images": [
{
"srcset": "https://placehold.it/1920x1080"
},
{
"srcset": "https://placehold.it/1080x1920"
}
]
}
}
.case-study {
position: relative;
z-index: map-get($zindex, 'case-study');
}
.case-study__grid {
margin-bottom: -48px;
}
.case-study__col {
margin-bottom: 48px;
}
.case-study__col--content {
padding-right: 45px;
}
.case-study__details {
> * + * {
margin-top: 48px;
}
}
.case-study__details-label {
font-weight: $font-weight-bold;
margin-bottom: 16px;
}
.case-study__gallery {
@include bp(md-min) {
margin-top: -497px; // manually calculated (hero height, hero padding top, section top spacing)
}
}
.case-study__content {
position: relative;
margin-top: 48px;
max-height: 460px;
height: 100%;
overflow: hidden;
transition: max-height $transition-duration $transition-easing;
@include bp(sm-min) {
max-height: 100%;
height: auto;
overflow: visible;
}
&:after {
content: '';
height: 144px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 1;
pointer-events: none;
opacity: 1;
background: linear-gradient(0deg, rgba($color-ui-01, 1) 25%, rgba($color-ui-01, 0) 100%); /* stylelint-disable-line plugin/no-unsupported-browser-features */
transition-property: opacity;
transition-timing-function: $transition-easing;
transition-duration: $transition-duration;
@include bp(sm-min) {
display: none;
}
&.is-expanded {
opacity: 0;
}
}
&.is-expanded {
max-height: 19999px;
&:after {
opacity: 0;
}
}
}
.case-study__image-link {
display: block;
& + & {
margin-top: 20px;
@include bp(sm-min) {
margin-top: 32px;
}
}
}
.case-study__video {
margin-top: 20px;
@include bp(sm-min) {
margin-top: 32px;
}
}
.case-study__more-button {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: 2;
.case-study__content.is-expanded & {
display: none;
}
}
.case-study__cta-button {
margin-top: 48px;
}
.image__img {
.case-study__image & {
width: 100%;
}
}
.link {
.case-study__details-item & {
font-weight: $font-weight-regular;
}
}
.case-study__modal-title {
color: $color-text-03;
display: none;
@include bp(md-min) {
display: block;
margin: 32px 0;
}
}
.case-study__modal-image {
& + & {
margin-top: 16px;
@include bp(md-min) {
margin-top: 32px;
}
}
}
import Component from '../../components/component/component';
import './case-study.scss';
export default class CaseStudy extends Component {
static initSelector: string = '.case-study__grid';
public button: JQuery;
public gallery: JQuery<HTMLElement>;
constructor(target: HTMLElement) {
super(target);
this.button = this.element.find('.case-study__more-button');
this.gallery = this.element.find('.case-study__gallery--secondary');
this.init();
}
init(): void {
this.button.on('click', (event: JQuery.TriggeredEvent): void => {
event.preventDefault();
if (this.element.hasClass('is-expanded')) {
this.element.removeClass('is-expanded');
} else {
this.element.addClass('is-expanded');
}
});
this.gallery.find('.video__play').each((index: number, playButton: HTMLElement): void => {
$(playButton).on('click', (event: Event): void => {
const videoLink: HTMLElement | null = (event.target as HTMLElement).closest('.case-study__video-link');
if (videoLink) {
$(videoLink).removeAttr('data-js');
}
});
});
}
}