Side Carousel
The side carousel component is an offset carousel with information on the left and the carousel on the right.
Requires:
dist/js/slick-carousel/vendors/slick.min.jssrc/components/slick-carousel/vendors/slick.cssdist/js/side-carousel.bundle.js
Habitat ReStore locations
Habitat for Humanity ReStores are nonprofit home improvement stores and donation centers that sell new and gently used furniture, appliances, home accessories, building materials and more to the public at a fraction of the retail price.
{{ attach_library('h4h_theme/side-carousel') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<section class="side-carousel">
<div class="side-carousel__left">
<h2 class="side-carousel__heading">{{ heading }}</h2>
<p class="side-carousel__desc">{{ desc }}</p>
</div>
<div class="side-carousel__right js-side-carousel">
{% for item in items %}
<article class="side-carousel__item">
{{ icons.get('map', 'side-carousel__map') }}
<div class="side-carousel__main">
<h3 class="side-carousel__title">{{ item.title }}</h3>
<div class="side-carousel__details">
<p>{{ item.street }}</p>
<p>{{ item.city }}, {{ item.state }} {{ item.zip }}</p>
<p>{{ item.phone }}</p>
</div>
{% if item.cta.link %}
<a class="side-carousel__cta" href="{{ item.cta.link }}">{{ item.cta.text }} {{ icons.get('arrowright', 'side-carousel__arrow') }}</a>
{% endif %}
</div>
</article>
{% endfor %}
</div>
</section>