{% extends 'layouts/lab-side-content.html' %}

{% from 'macros/lab-example.html' import LabExample %}
{% from 'macros/lab-code.html' import LabCode %}

{% set pageType = "components" %}
{% set pageId = "slider" %}

{% block content %}
  <h1>Slider</h1>

  <h3>Usage</h3>

  {{LabExample(pageType, pageId)}}
  {{LabCode('html', '
  <div class="c-slider" data-module="Slider">
    <div class="c-slider__slides">
      <div class="c-slider__slide is-active">
        <picture class="c-slider__picture">
          <source srcset="..." media="(min-width: 768px)">
          <img class="c-slider__image" src="..." alt="">
        </picture>
        <div class="c-slider__content">
          <div class="c-slider__text">
            <h1>...</h1>
            <p>...</p>
          </div>
        </div>
      </div>
      ...
    </div>
    <div class="c-slider__controls">
      <div class="c-slider__previous">
        ...
      </div>
      <div class="c-slider__pips"></div>
      <div class="c-slider__next">
        ...
      </div>
    </div>
  </div>
  ')}}
{% endblock %}