Tangible Pattern Library

Slider 

<div class="c-slider">

    <div class="js-splide-full">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">
                    <div class="c-card c-card--top-image">

                        <a href="#card-url" class="c-card__click-area">
                            <div class="c-card__image-block">
                                <img class="c-card__image" src="//picsum.photos/640/480" srcset="//picsum.photos/640/480" sizes="100vw" loading="lazy" alt="lorem ipsum" />
                            </div>
                        </a>

                        <div class="c-card__content">

                            <ul class="c-card__chips o-card__list">
                                <li class="o-card__list-item">
                                    <div class="c-chip">
                                        <p class="c-chip__text">Chip normal</p>
                                    </div>
                                </li>
                                <li class="o-card__list-item"><a href="#chip-click" class="c-chip c-chip--clickable">
                                        <p class="c-chip__text">Chip clickable</p>
                                    </a> </li>
                            </ul>

                            <div class="c-card__title">
                                <a href="#card-url" class="c-card__click-area"> Lorem ipsum dolor sit amet
                                </a>
                            </div>

                            <div class="c-card__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer</div>

                            <div class="c-card__body-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque nulla eligendi adipisci distinctio quis at architecto in est possimus. Vero earum dignissimos molestias quo velit quas, magnam a perspiciatis est.</div>

                            <ul class="c-card__actions o-card__list">
                                <li class="o-card__list-item">
                                    <a href="#link-1" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 1</a>
                                </li>
                                <li class="o-card__list-item">
                                    <a href="#link-2" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 2</a>
                                </li>
                                <li class="o-card__list-item">
                                    <a href="#link-3" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 3</a>
                                </li>
                            </ul>

                        </div>

                    </div>
                </li>
                <li class="splide__slide">
                    <div class="c-card c-card--top-image">

                        <a href="#card-url" class="c-card__click-area">
                            <div class="c-card__image-block">
                                <img class="c-card__image" src="//picsum.photos/640/480" srcset="//picsum.photos/640/480" sizes="100vw" loading="lazy" alt="lorem ipsum" />
                            </div>
                        </a>

                        <div class="c-card__content">

                            <ul class="c-card__chips o-card__list">
                                <li class="o-card__list-item">
                                    <div class="c-chip">
                                        <p class="c-chip__text">Chip normal</p>
                                    </div>
                                </li>
                                <li class="o-card__list-item"><a href="#chip-click" class="c-chip c-chip--clickable">
                                        <p class="c-chip__text">Chip clickable</p>
                                    </a> </li>
                            </ul>

                            <div class="c-card__title">
                                <a href="#card-url" class="c-card__click-area"> Lorem ipsum dolor sit amet
                                </a>
                            </div>

                            <div class="c-card__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer</div>

                            <div class="c-card__body-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque nulla eligendi adipisci distinctio quis at architecto in est possimus. Vero earum dignissimos molestias quo velit quas, magnam a perspiciatis est.</div>

                            <ul class="c-card__actions o-card__list">
                                <li class="o-card__list-item">
                                    <a href="#link-1" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 1</a>
                                </li>
                                <li class="o-card__list-item">
                                    <a href="#link-2" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 2</a>
                                </li>
                                <li class="o-card__list-item">
                                    <a href="#link-3" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 3</a>
                                </li>
                            </ul>

                        </div>

                    </div>
                </li>
                <li class="splide__slide">
                    <div class="c-card c-card--top-image">

                        <a href="#card-url" class="c-card__click-area">
                            <div class="c-card__image-block">
                                <img class="c-card__image" src="//picsum.photos/640/480" srcset="//picsum.photos/640/480" sizes="100vw" loading="lazy" alt="lorem ipsum" />
                            </div>
                        </a>

                        <div class="c-card__content">

                            <ul class="c-card__chips o-card__list">
                                <li class="o-card__list-item">
                                    <div class="c-chip">
                                        <p class="c-chip__text">Chip normal</p>
                                    </div>
                                </li>
                                <li class="o-card__list-item"><a href="#chip-click" class="c-chip c-chip--clickable">
                                        <p class="c-chip__text">Chip clickable</p>
                                    </a> </li>
                            </ul>

                            <div class="c-card__title">
                                <a href="#card-url" class="c-card__click-area"> Lorem ipsum dolor sit amet
                                </a>
                            </div>

                            <div class="c-card__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer</div>

                            <div class="c-card__body-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque nulla eligendi adipisci distinctio quis at architecto in est possimus. Vero earum dignissimos molestias quo velit quas, magnam a perspiciatis est.</div>

                            <ul class="c-card__actions o-card__list">
                                <li class="o-card__list-item">
                                    <a href="#link-1" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 1</a>
                                </li>
                                <li class="o-card__list-item">
                                    <a href="#link-2" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 2</a>
                                </li>
                                <li class="o-card__list-item">
                                    <a href="#link-3" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 3</a>
                                </li>
                            </ul>

                        </div>

                    </div>
                </li>
                <li class="splide__slide">
                    <div class="c-card c-card--top-image">

                        <a href="#card-url" class="c-card__click-area">
                            <div class="c-card__image-block">
                                <img class="c-card__image" src="//picsum.photos/640/480" srcset="//picsum.photos/640/480" sizes="100vw" loading="lazy" alt="lorem ipsum" />
                            </div>
                        </a>

                        <div class="c-card__content">

                            <ul class="c-card__chips o-card__list">
                                <li class="o-card__list-item">
                                    <div class="c-chip">
                                        <p class="c-chip__text">Chip normal</p>
                                    </div>
                                </li>
                                <li class="o-card__list-item"><a href="#chip-click" class="c-chip c-chip--clickable">
                                        <p class="c-chip__text">Chip clickable</p>
                                    </a> </li>
                            </ul>

                            <div class="c-card__title">
                                <a href="#card-url" class="c-card__click-area"> Lorem ipsum dolor sit amet
                                </a>
                            </div>

                            <div class="c-card__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer</div>

                            <div class="c-card__body-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque nulla eligendi adipisci distinctio quis at architecto in est possimus. Vero earum dignissimos molestias quo velit quas, magnam a perspiciatis est.</div>

                            <ul class="c-card__actions o-card__list">
                                <li class="o-card__list-item">
                                    <a href="#link-1" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 1</a>
                                </li>
                                <li class="o-card__list-item">
                                    <a href="#link-2" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 2</a>
                                </li>
                                <li class="o-card__list-item">
                                    <a href="#link-3" class="c-action c-action--small c-action--text" data-notation="underline-cta-accent">Link 3</a>
                                </li>
                            </ul>

                        </div>

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

</div>
 
<div class="c-slider{% if modifier is defined %} {{ modifier }}{% endif %}">

  <div class="js-splide-full">
    <div class="splide__track">
      <ul class="splide__list">
        {% for item in items %}
          <li class="splide__slide">
            {% block slide_item %}
              {% include "@card" with item.cardProps %}
            {% endblock %}
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>

</div>
 
{
  "items": [
    {
      "cardModifier": "c-card--top-image",
      "mainCardURL": "#",
      "cardImage": {
        "src": "https://picsum.photos/640/480",
        "srcset": "https://picsum.photos/640/480",
        "alt": "Alt text"
      },
      "title": "Certified Scrum Master ",
      "subtitle": null,
      "body": "Scrumalliance.org, 2020",
      "chips": null,
      "actions": [
        {
          "text": "Link 1",
          "url": "#link-1",
          "version": "link|text-small"
        }
      ]
    },
    {
      "cardModifier": "c-card--top-image",
      "mainCardURL": null,
      "cardImage": {
        "src": "https://picsum.photos/640/480",
        "srcset": "https://picsum.photos/640/480",
        "alt": "Alt text"
      },
      "title": "Certified Scrum Master ",
      "subtitle": null,
      "body": "Scrumalliance.org, 2020",
      "chips": null,
      "actions": null
    },
    {
      "cardModifier": "c-card--top-image",
      "mainCardURL": null,
      "cardImage": {
        "src": "https://picsum.photos/640/480",
        "srcset": "https://picsum.photos/640/480",
        "alt": "Alt text"
      },
      "title": "Certified Scrum Master ",
      "subtitle": null,
      "body": "Scrumalliance.org, 2020",
      "chips": null,
      "actions": null
    },
    {
      "cardModifier": "c-card--top-image",
      "mainCardURL": "#",
      "cardImage": {
        "src": "https://picsum.photos/640/480",
        "srcset": "https://picsum.photos/640/480",
        "alt": "Alt text"
      },
      "title": "Certified Scrum Master ",
      "subtitle": null,
      "body": "Scrumalliance.org, 2020",
      "chips": null,
      "actions": [
        {
          "text": "Link 1",
          "url": "#link-1",
          "version": "link|text-small"
        }
      ]
    }
  ]
}
  • Content: 
    .c-slider {
  margin: spacing(space-48) 0;
  width: 100vw;
  margin-left: -$global-mobile-x-padding;

  @include min-screen(bp(medium)) {
    margin-left: 0;
    width: auto;
  }

  @include min-screen(bp(large)) {
    margin: spacing(space-96) 0;
  }

}

.c-slider--marginLess {
  margin: 0;
}

// .c-slider__list {
//   list-style: none;
//   display: flex;
//   overflow-x: auto;
//   width: 100%;
// }

// .c-slider__item {
//   flex: 0 0 33.3333%;
//   // margin: spacing(space-12);
// }

// .c-slider__item + .c-slider__item {
//   margin-left: remify(24px);
// }

// .c-slider__item-img {
//   // max-width: 33%;
// }
  • URL: /components/raw/slider/_slider.scss
  • Filesystem Path: src/pattern-library/02-components/slider/_slider.scss
  • Size: 624 Bytes

No notes defined.