HAS Green Academy styleguide

Logo Slider

1179 × 333 
<div class="c-logo-slider">
    <ul class="o-layout  o-layout--nowrap  o-layout--fit">
        <li class="c-logo-slider__item">
            <picture>
                <img class="c-img  lazyload  " data-srcset="https://via.placeholder.com/600x400 600w, https://via.placeholder.com/300x200 300w, " data-src="https://via.placeholder.com/300x200" alt="" sizes="auto" width="300" height="200">
            </picture>

        </li>
        <li class="c-logo-slider__item">
            <picture>
                <img class="c-img  lazyload  " data-srcset="https://via.placeholder.com/600x400 600w, https://via.placeholder.com/300x200 300w, " data-src="https://via.placeholder.com/300x200" alt="" sizes="auto" width="300" height="200">
            </picture>

        </li>
        <li class="c-logo-slider__item">
            <picture>
                <img class="c-img  lazyload  " data-srcset="https://via.placeholder.com/600x400 600w, https://via.placeholder.com/300x200 300w, " data-src="https://via.placeholder.com/300x200" alt="" sizes="auto" width="300" height="200">
            </picture>

        </li>
        <li class="c-logo-slider__item">
            <picture>
                <img class="c-img  lazyload  " data-srcset="https://via.placeholder.com/600x400 600w, https://via.placeholder.com/300x200 300w, " data-src="https://via.placeholder.com/300x200" alt="" sizes="auto" width="300" height="200">
            </picture>

        </li>
    </ul>
</div>
 
<div class="c-logo-slider">
  <ul class="o-layout  o-layout--nowrap  o-layout--fit">
    {{# each items }}
      <li class="c-logo-slider__item">
        {{ render '@atoms-image' }}
      </li>
    {{/each}}
  </ul>
</div>
 
{
  "items": [
    {},
    {},
    {},
    {}
  ]
}
  • Content: 
    /*  =========================================================================
    Components.Logo-slider
    ========================================================================= */

@use '@supple-kit/supple-css/tools/responsive';

/*  Block
    ========================================================================= */

.c-logo-slider {
  overflow: auto;
}



/*  Elements
    ========================================================================= */

.c-logo-slider__item {
  inline-size: 12rem;
}



/*  Responsive
    ========================================================================= */

@include responsive.mq(desk) {
  :where(.c-sidebar-nav__sidebar) {
    .c-logo-slider__item {
      max-inline-size: 50%;
      min-inline-size: 50%;
    }
  }
}
  • URL: /components/raw/molecules-logo-slider/_logo-slider.scss
  • Filesystem Path: src/components/molecules/logo-slider/_logo-slider.scss
  • Size: 772 Bytes

No notes defined.