HAS Green Academy styleguide

Card Slider: With Few Items

1179 × 333 
<div>
    <card-slider>
        <div class="c-slider">
            <div class="o-retain  o-retain--default  ">
                <div class="o-flow">
                    <div class="swiper  c-slider__container" data-module-bind="slider">
                        <ul class="swiper-wrapper  o-list-clean  c-slider__wrapper">
                            <li class="swiper-slide  c-slider__slide">
                                <article class="c-card  t-bg--page-theme-dark  t-color--light  o-clickable  ">
                                    <picture>
                                        <img class="c-img  lazyload  " data-srcset="https://via.placeholder.com/320x180 320w, https://via.placeholder.com/640x360 640w, " data-src="https://via.placeholder.com/320x180" alt="" sizes="auto" width="320" height="180">
                                    </picture>

                                    <div class="c-card__content">
                                        <div class="o-flow  o-flow--tiny">

                                            <h3 class="u-h4">
                                                <a href="#">
                                                    Card heading
                                                </a>

                                            </h3>

                                        </div>
                                    </div>
                                </article>

                            </li>
                            <li class="swiper-slide  c-slider__slide">
                                <article class="c-card  t-bg--page-theme-dark  t-color--light  o-clickable  ">
                                    <picture>
                                        <img class="c-img  lazyload  " data-srcset="https://via.placeholder.com/320x180 320w, https://via.placeholder.com/640x360 640w, " data-src="https://via.placeholder.com/320x180" alt="" sizes="auto" width="320" height="180">
                                    </picture>

                                    <div class="c-card__content">
                                        <div class="o-flow  o-flow--tiny">

                                            <h3 class="u-h4">
                                                <a href="#">
                                                    Card heading
                                                </a>

                                            </h3>

                                        </div>
                                    </div>
                                </article>

                            </li>
                        </ul>
                    </div>

                    <div class="o-layout  o-layout--gap-base  o-layout--align-block-center  t-color--light" hidden data-card-slider-controls>
                        <div class="o-layout__fill">
                            <progress data-slider-progress class="c-progress" max="1" value="0"></progress>
                        </div>
                        <div class="o-layout__fit">
                            <button type="button" class="o-button-clean c-slider__button-clean" data-button-prev>
                                <span class="u-visually-hidden">Vorige</span>
                                <svg class="c-icon    " aria-hidden="true">
                                    <use xlink:href="../../dist/sprite.svg#icon-arrow-left" />
                                </svg>

                            </button>
                        </div>
                        <div class="o-layout__fit">
                            <button type="button" class="o-button-clean c-slider__button-clean" data-button-next>
                                <span class="u-visually-hidden">Volgende</span>
                                <svg class="c-icon    " aria-hidden="true">
                                    <use xlink:href="../../dist/sprite.svg#icon-arrow-right" />
                                </svg>

                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </card-slider>
</div>
 
<div>
  <card-slider>
    <div class="c-slider">
      <div class="o-retain  o-retain--default  {{#if inset }}o-retain--inset{{/if}}">
        <div class="o-flow">
          <div class="swiper  c-slider__container" data-module-bind="slider">
            <ul class="swiper-wrapper  o-list-clean  c-slider__wrapper">
              {{#each items }}
                <li class="swiper-slide  c-slider__slide">
                  {{#if isTypeNumber }}
                    {{ render '@molecules-card-number' this }}
                  {{ else }}
                    {{ render '@molecules-card' this merge=true }}
                  {{/if}}
                </li>
              {{/each}}
            </ul>
          </div>

          <div class="o-layout  o-layout--gap-base  o-layout--align-block-center  t-color--light" hidden data-card-slider-controls>
            <div class="o-layout__fill">
              {{> '@atoms-progress' data='data-slider-progress' }}
            </div>
            <div class="o-layout__fit">
              <button
                type="button"
                class="o-button-clean c-slider__button-clean"
                data-button-prev
              >
                <span class="u-visually-hidden">Vorige</span>
                {{> '@atoms-icon' icon='arrow-left' }}
              </button>
            </div>
            <div class="o-layout__fit">
              <button
                type="button"
                class="o-button-clean c-slider__button-clean"
                data-button-next
              >
                <span class="u-visually-hidden">Volgende</span>
                {{> '@atoms-icon' icon='arrow-right' }}
              </button>
            </div>
          </div>
        </div>

      </div>
    </div>
  </card-slider>
</div>
 
{
  "inset": false,
  "items": [
    {},
    {}
  ]
}

No notes defined.