D.School Component Library

Featured Slide: Default 

<section class="c-featured-slide">

      <div class="c-featured-slide__slide-wrapper">

          <div class="c-slide active">
              <div class="c-slide__image-wrapper">

                  <img class="o-image" loading="lazy" src="../../images/slide-example.png" alt="Alt text here" />
              </div>

              <div class="c-slide__content-wrapper">

                  <div class="c-slide__label-wrapper">
                      <span class="c-slide__label o-detail--7">Featured</span>
                  </div>

                  <div class="c-slide__inner-wrapper">

                      <h3 class="o-heading c-slide__title o-heading--h3-primary">
                          [Title 50 Char] Lorem ipsum dolor sit vulputate
                      </h3>

                      <h3 class="o-heading c-slide__subhead o-heading--h3-secondary">
                          [Subhead] Lorem ipsum dolor sit amet consectetur.
                      </h3>

                      <p class="o-body o-body--p2 c-slide__description">
                          [Description Intro 300 Char] Lorem ipsum dolor sit amet consectetur. Ut lectus eu vulputate senectus tortor hac nulla. Et semper et fermentum ut fusce enim ultricies magna arcu. Tellus eleifend lobortis pharetra sed. Quis erat facilisis vestibulum imperdiet tempor sit tortor. Non integer maecenas ul...
                      </p>

                      <a class="o-button o-button--secondary c-slide__button has-icon" href="/">
                          <span class="o-button__label">
                              [Action Text]
                          </span>
                          <span class="o-icon">
                              <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
                              </svg>
                          </span>
                      </a>
                  </div>
              </div>
          </div>
          <div class="c-slide ">
              <div class="c-slide__image-wrapper">

                  <img class="o-image" loading="lazy" src="../../images/slide-example.png" alt="Alt text here" />
              </div>

              <div class="c-slide__content-wrapper">

                  <div class="c-slide__label-wrapper">
                      <span class="c-slide__label o-detail--7">Featured</span>
                  </div>

                  <div class="c-slide__inner-wrapper">

                      <h3 class="o-heading c-slide__title o-heading--h3-primary">
                          [Title 50 Char] Another slide title
                      </h3>

                      <h3 class="o-heading c-slide__subhead o-heading--h3-secondary">
                          [Subhead] here to showcase that the slides are moving
                      </h3>

                      <p class="o-body o-body--p2 c-slide__description">
                          [Description Intro 300 Char] Lorem ipsum dolor sit amet consectetur. Ut lectus eu vulputate senectus tortor hac nulla. Et semper et fermentum ut fusce enim ultricies magna arcu. Tellus eleifend lobortis pharetra sed. Quis erat facilisis vestibulum imperdiet tempor sit tortor. Non integer maecenas ul...
                      </p>

                      <a class="o-button o-button--secondary c-slide__button has-icon" href="/">
                          <span class="o-button__label">
                              [Learn More]
                          </span>
                          <span class="o-icon">
                              <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
                              </svg>
                          </span>
                      </a>
                  </div>
              </div>
          </div>
          <div class="c-slide ">
              <div class="c-slide__image-wrapper">

                  <img class="o-image" loading="lazy" src="../../images/slide-example.png" alt="Alt text here" />
              </div>

              <div class="c-slide__content-wrapper">

                  <div class="c-slide__label-wrapper">
                      <span class="c-slide__label o-detail--7">Featured</span>
                  </div>

                  <div class="c-slide__inner-wrapper">

                      <h3 class="o-heading c-slide__title o-heading--h3-primary">
                          [Title 50 Char] Third slide title
                      </h3>

                      <h3 class="o-heading c-slide__subhead o-heading--h3-secondary">
                          [Subhead] check out this awesome slider
                      </h3>

                      <p class="o-body o-body--p2 c-slide__description">
                          [Description Intro 300 Char] Lorem ipsum dolor sit amet consectetur. Ut lectus eu vulputate senectus tortor hac nulla. Et semper et fermentum ut fusce enim ultricies magna arcu. Tellus eleifend lobortis pharetra sed. Quis erat facilisis vestibulum imperdiet tempor sit tortor. Non integer maecenas ul...
                      </p>

                      <a class="o-button o-button--secondary c-slide__button has-icon" href="/">
                          <span class="o-button__label">
                              [Helloooo nurse]
                          </span>
                          <span class="o-icon">
                              <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
                              </svg>
                          </span>
                      </a>
                  </div>
              </div>
          </div>
      </div>

      <div class="c-featured-slide__control-wrapper">
          <div class="c-featured-slide__slide-controls">

              <a class="o-link o-link--secondary c-featured-slide__prev" href="#" target="_self">
                  <span class="o-icon">
                      <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                          <path d="M11.6099 21.1203L10.5499 22.1803L1.88986 13.5203V11.4803L10.5499 2.82031L11.6099 3.88031L3.73986 11.7503H23.1099V13.2503H3.73986L11.6099 21.1203Z" />
                      </svg>
                  </span>
                  <span class="o-link__label">
                      Previous
                  </span>
              </a>

              <a class="o-link o-link--secondary c-featured-slide__next" href="#" target="_self">
                  <span class="o-link__label">
                      Next
                  </span>
                  <span class="o-icon">
                      <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                          <path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
                      </svg>
                  </span>
              </a>
          </div>
      </div>
  </section>
 
{% set base_class = button.base_class|default('c-featured-slide') %}

<section class="{{bem(base_class)}}">
  {# Header Bar #}
  {% if custom_subhead or header_link_url %}
    <div class="{{bem(base_class, 'header')}}">
      {% if custom_subhead %}
        <span class="o-detail--2">{{custom_subhead}}</span>
      {% endif %}
      {% if header_link_url %}
        {% include "@link" with {
          "link": {
            "text": (header_link_text) ? header_link_text : 'View All',
            "url": header_link_url,
            "modifiers": "secondary",
            "extra": "o-detail--5"
          }
        } %}
      {% endif %}
    </div>
  {% endif %}

  {# Loop over slides #}
  <div class="{{bem(base_class, 'slide-wrapper')}}">
    {% for item in slides %}
      {% if loop.first %}
        {% set modifiers = {"modifiers": "active"} %}
        {% set slide = item.slide|default({})|merge(modifiers) %}
        {% set item = item|merge({"slide": slide}) %}
      {% endif %}
      {% include "@slide" with item %}
    {% endfor %}
  </div>

  {# Slide Controls #}
  {% if slides.length > 1 %}
  <div class="{{bem(base_class, 'control-wrapper')}}">
    <div class="{{bem(base_class, 'slide-controls')}}">
      {% include "@link" with {
        "link": {
          "text": "Previous",
          "url": "#",
          "modifiers": "secondary",
          "arrow": true,
          "icon_placement": "before",
          "animation": false,
          "extra": [bem(base_class, 'prev')]
        }
      } %}
      {% include "@link" with {
        "link": {
          "text": "Next",
          "url": "#",
          "modifiers": "secondary",
          "arrow": true,
          "animation": false,
          "extra": [bem(base_class, 'next')]
        }
      } %}
    </div>
  </div>
  {% endif %}
</section>
 
{
  "slides": [
    {
      "slide": {
        "image": {
          "src": "../../images/slide-example.png",
          "alt": "Alt text here"
        },
        "title": "[Title 50 Char] Lorem ipsum dolor sit vulputate",
        "subhead": "[Subhead] Lorem ipsum dolor sit amet consectetur.",
        "description": "[Description Intro 300 Char] Lorem ipsum dolor sit amet consectetur. Ut lectus eu vulputate senectus tortor hac nulla. Et semper et fermentum ut fusce enim ultricies magna arcu. Tellus eleifend lobortis pharetra sed. Quis erat facilisis vestibulum imperdiet tempor sit tortor. Non integer maecenas ullamcorper gravida consectetur.",
        "cta": {
          "text": "[Action Text]",
          "url": "/"
        },
        "label": "Featured"
      }
    },
    {
      "slide": {
        "image": {
          "src": "../../images/slide-example.png",
          "alt": "Alt text here"
        },
        "title": "[Title 50 Char] Another slide title",
        "subhead": "[Subhead] here to showcase that the slides are moving",
        "description": "[Description Intro 300 Char] Lorem ipsum dolor sit amet consectetur. Ut lectus eu vulputate senectus tortor hac nulla. Et semper et fermentum ut fusce enim ultricies magna arcu. Tellus eleifend lobortis pharetra sed. Quis erat facilisis vestibulum imperdiet tempor sit tortor. Non integer maecenas ullamcorper gravida consectetur.",
        "cta": {
          "text": "[Learn More]",
          "url": "/"
        },
        "label": "Featured"
      }
    },
    {
      "slide": {
        "image": {
          "src": "../../images/slide-example.png",
          "alt": "Alt text here"
        },
        "title": "[Title 50 Char] Third slide title",
        "subhead": "[Subhead] check out this awesome slider",
        "description": "[Description Intro 300 Char] Lorem ipsum dolor sit amet consectetur. Ut lectus eu vulputate senectus tortor hac nulla. Et semper et fermentum ut fusce enim ultricies magna arcu. Tellus eleifend lobortis pharetra sed. Quis erat facilisis vestibulum imperdiet tempor sit tortor. Non integer maecenas ullamcorper gravida consectetur.",
        "cta": {
          "text": "[Helloooo nurse]",
          "url": "/"
        },
        "label": "Featured"
      }
    }
  ]
}
  • Content: 
    /* Featured Slide */
.c-featured-slide {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-xxxl) var(--ds-space-xl);

  // Header
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--ds-space-sm);
  }

  // Slider
  &__slide-wrapper {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    position: relative;
    width: 100%;

    .c-slide {
      flex: 1;
      position: absolute;
      z-index: var(--ds-z-index-0);
      opacity: 0;
      transition: opacity var(--ds-animation-duration-long) cubic-bezier(0.4, 0.8, 0.6, 1);

      &.active {
        opacity: 1;
        position: relative;
        z-index: var(--ds-z-index-100);

        .c-slide__content-wrapper {
          animation: textIn 350ms var(--ds-animation-timing) 350ms forwards;
        }

        .c-slide__image-wrapper {
          animation: imageIn 450ms cubic-bezier(0.4, 0.8, 0.6, 1) forwards;
        }
      }

      &__content-wrapper {
        opacity: 0;
        animation: textOut 350ms cubic-bezier(0.4, 0.8, 0.6, 1) forwards;
      }

      &__image-wrapper {
        transform-origin: top left;
        animation: imageOut 450ms cubic-bezier(0.4, 0.8, 0.6, 1) forwards;
      }
    }
  }

  // Slide controls
  &__control-wrapper {
    display: block;

    @include media(">medium") {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
    }
  }

  &__slide-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-space-sm);
    padding: var(--ds-space-xs) 0;
    border-top: var(--ds-border-width) solid var(--ds-color-gray-102);

    @include media(">medium") {
      grid-column: 7 / span 5;
    }

    .o-link {
      &:not(:hover):focus {
        color: currentColor;
      }
    }
  }
}

@keyframes imageOut {
  0% {
    opacity: 1;
    transform: rotate(0);
  }
  100% {
    opacity: 0;
    transform: rotate(-60deg);
  }
}

@keyframes imageIn {
  0% {
    opacity: 0;
    transform: rotate(60deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0);
  }
}

@keyframes textIn {
  0% {
    opacity: 0;
    transform: translateY(var(--ds-space-md));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes textOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
  • URL: /components/raw/featured-slide/_featured-slide.scss
  • Filesystem Path: components/03-organisms/featured-slide/_featured-slide.scss
  • Size: 2.4 KB
  • Content: 
    /******************************
** Featured Slide Functionality
******************************/
class Slider {
  constructor(slider) {
    this.slider = slider;
    this.nextBtn = slider.querySelector('.c-featured-slide__next');
    this.prevBtn = slider.querySelector('.c-featured-slide__prev');
    this.slides = slider.querySelectorAll('.c-slide');
    this.totalSlides = this.slides.length;
    this.currentSlide = 0;
  }

  nextSlide() {
    this.slides[this.currentSlide].classList.remove('active');
    this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
    this.slides[this.currentSlide].classList.add('active');
  }

  prevSlide() {
    this.slides[this.currentSlide].classList.remove('active');
    this.currentSlide = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
    this.slides[this.currentSlide].classList.add('active');
  }

  init() {
    this.nextBtn.addEventListener('click', () => this.nextSlide());
    this.prevBtn.addEventListener('click', () => this.prevSlide());
  }
}

// Find all sliders and initialize them
const featuredSliders = document.querySelectorAll('.c-featured-slide');

featuredSliders.forEach(slider => {
  const featuredSlide = new Slider(slider);
  featuredSlide.init();
});
  • URL: /components/raw/featured-slide/featured-slide.js
  • Filesystem Path: components/03-organisms/featured-slide/featured-slide.js
  • Size: 1.2 KB

The featured slider