<section class="container value-section d-flex col-md-3 wrap">
    <div class="track d-flex">

        <div class="item center-content">
            <div class="value-card bg-primary rounded">
                <div class="cta">
                    <h4>Opportunity</h4>
                    <p>Talent is distributed equally, opportunity is not. We’re working to bridge the gap.</p>
                    <a href="Learn more"><button class="small">Learn more please</button></a>
                </div>
            </div>

            <span class="next dp-md-n">
        <svg>
          <use xlink:href="#icon-arrow"></use>
        </svg>
      </span>

        </div>

        <div class="item center-content">
            <div class="quote" id="cool">
                <img data-src="https://media.glassdoor.com/l/7c/1e/3c/21/a-store-partner.jpg" alt="" class="circle face lozad">
                <strong>a name, Location</strong>
                <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.»</p>
                <div class="socials">
                    <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tween&via=starbsCAnada&hashtags=duck,bird,quack,egg,dingo" target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
                    <div class="facebook-share" data-quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed." data-hashtag="Fun">
                        <i class="fab fa-facebook"></i>
                    </div>
                    <div href="" class="copy-clipboard">
                        <input type="text" class='target' value="www.starbucks.ca/responsibility#cool">
                        <i class="fas fa-link"></i>
                        <span class="tooltiptext">Link Copied</span>
                    </div>
                    <a href="mailto:someone@theirmail.com?subject=The%20email%20subject&body=the%20email%20body">
    <i class="fas fa-envelope"></i>
  </a>
                </div>
            </div>

            <span class="previous dp-md-n">
        <svg class="">
          <use xlink:href="#icon-arrow"></use>
        </svg>
      </span>

        </div>

    </div>
    <div class="track d-flex">

        <div class="item center-content">
            <div class="value-card bg-primary rounded">
                <div class="cta">
                    <h4>Community</h4>
                    <p>As good neighbours we get involved with local efforts to bring people together and create positive change whenever we can.</p>
                    <a href="Learn more"><button class="small">Learn more </button></a>
                </div>
            </div>

            <span class="previous dp-md-n">
        <svg class="">
          <use xlink:href="#icon-arrow"></use>
        </svg>
      </span>
        </div>

        <div class="item center-content">
            <div class="quote" id="cool">
                <img data-src="https://www.starbucks.com.sg/images/default-source/careers-at-starbucks/partner-recruitment-events/career.jpg" alt="" class="circle face lozad">
                <strong>name, France</strong>
                <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.»</p>
                <div class="socials">
                    <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tween&via=starbsCAnada&hashtags=duck,bird,quack,egg,dingo" target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
                    <div class="facebook-share" data-quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed." data-hashtag="Fun">
                        <i class="fab fa-facebook"></i>
                    </div>
                    <div href="" class="copy-clipboard">
                        <input type="text" class='target' value="www.starbucks.ca/responsibility#cool">
                        <i class="fas fa-link"></i>
                        <span class="tooltiptext">Link Copied</span>
                    </div>
                    <a href="mailto:someone@theirmail.com?subject=The%20email%20subject&body=the%20email%20body">
    <i class="fas fa-envelope"></i>
  </a>
                </div>
            </div>

            <span class="next dp-md-n">
        <svg>
          <use xlink:href="#icon-arrow"></use>
        </svg>
      </span>
        </div>

    </div>

    <div class="track d-flex">

        <div class="item center-content">
            <div class="value-card bg-primary rounded">
                <div class="cta">
                    <h4>Sustainability</h4>
                    <p>We’re finding ways to minimize our environmental footprint, tackle climate change, and inspire others to do the same.</p>
                    <a href="Learn more"><button class="small">Learn more please</button></a>
                </div>
            </div>

            <span class="next dp-md-n">
        <svg>
          <use xlink:href="#icon-arrow"></use>
        </svg>
      </span>
        </div>

        <div class="item center-content">
            <div class="quote" id="cool">
                <img data-src="https://media.npr.org/assets/img/2014/06/15/partner_experience_in-store7-c40c4644ccf25dca74db1ff8b3602ea13aca0aae-s800-c85.jpg" alt="" class="circle face lozad">
                <strong>name, Location</strong>
                <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.»</p>
                <div class="socials">
                    <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tween&via=starbsCAnada&hashtags=duck,bird,quack,egg,dingo" target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
                    <div class="facebook-share" data-quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed." data-hashtag="Fun">
                        <i class="fab fa-facebook"></i>
                    </div>
                    <div href="" class="copy-clipboard">
                        <input type="text" class='target' value="www.starbucks.ca/responsibility#cool">
                        <i class="fas fa-link"></i>
                        <span class="tooltiptext">Link Copied</span>
                    </div>
                    <a href="mailto:someone@theirmail.com?subject=The%20email%20subject&body=the%20email%20body">
    <i class="fas fa-envelope"></i>
  </a>
                </div>
            </div>
            <span class="previous dp-md-n">
        <svg class="">
          <use xlink:href="#icon-arrow"></use>
        </svg>
      </span>

        </div>

    </div>
</section>
<section class="container value-section d-flex col-md-3 wrap">
  <div class="track d-flex">

    <div class="item center-content">
      <div class="value-card bg-primary rounded">
        {{render '@cta-small' valueCard.0.valueData merge=true}}
      </div>

      <span class="next dp-md-n">
        <svg>
          <use xlink:href="#icon-arrow"></use>
        </svg>
      </span>

    </div>

    <div class="item center-content">
      {{render '@quote--fr' quoteData.0.partnerData merge=true}}

      <span class="previous dp-md-n">
        <svg class="">
          <use xlink:href="#icon-arrow"></use>
        </svg>
      </span>

    </div>

  </div>
  <div class="track d-flex">

    <div class="item center-content">
      <div class="value-card bg-primary rounded">
        {{render '@cta-small' valueCard.1.valueData merge=true}}
      </div>

      <span class="previous dp-md-n">
        <svg class="">
          <use xlink:href="#icon-arrow"></use>
        </svg>
      </span>
    </div>

    <div class="item center-content">
      {{render '@quote--fr' quoteData.1.partnerData merge=true}}

      <span class="next dp-md-n">
        <svg>
          <use xlink:href="#icon-arrow"></use>
        </svg>
      </span>
  </div>

  </div>

  <div class="track d-flex">

    <div class="item center-content">
      <div class="value-card bg-primary rounded">
        {{render '@cta-small' valueCard.2.valueData merge=true}}
      </div>

      <span class="next dp-md-n">
        <svg>
          <use xlink:href="#icon-arrow"></use>
        </svg>
      </span>
    </div>

    <div class="item center-content">
      {{render '@quote--fr' quoteData.2.partnerData merge=true}}
      <span class="previous dp-md-n">
        <svg class="">
          <use xlink:href="#icon-arrow"></use>
        </svg>
      </span>

    </div>

  </div>
</section>
{
  "valueCard": [
    {
      "valueData": {
        "subHeader": "Opportunity",
        "copyText": "Talent is distributed equally, opportunity is not. We’re working to bridge the gap.",
        "mediaSrc": "Learn more",
        "mediaButtonText": "Learn more please"
      }
    },
    {
      "valueData": {
        "subHeader": "Community",
        "copyText": "As good neighbours we get involved with local efforts to bring people together and create positive change whenever we can.",
        "mediaSrc": "Learn more",
        "mediaButtonText": "Learn more "
      }
    },
    {
      "valueData": {
        "subHeader": "Sustainability",
        "copyText": "We’re finding ways to minimize our environmental footprint, tackle climate change, and inspire others to do the same.",
        "mediaSrc": "Learn more",
        "mediaButtonText": "Learn more please"
      }
    }
  ],
  "quoteData": [
    {
      "partnerData": {
        "partnerImgSrc": "https://media.glassdoor.com/l/7c/1e/3c/21/a-store-partner.jpg",
        "partnerName": "a name",
        "partnerLocation": "Location",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "socialBar": {
          "id": "cool",
          "twitter": {
            "url": "www.starbucks.ca",
            "text": "This is a tween",
            "via": "starbsCAnada",
            "hashtag-1": "duck",
            "hashtag-2": "bird",
            "hashtag-3": "quack",
            "hashtag-4": "egg",
            "hashtag-5": "dingo"
          },
          "facebook": {
            "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
            "hashtag": "Fun"
          },
          "email": {
            "subject": "The email subject",
            "body": "the email body"
          }
        }
      }
    },
    {
      "partnerData": {
        "partnerImgSrc": "https://www.starbucks.com.sg/images/default-source/careers-at-starbucks/partner-recruitment-events/career.jpg",
        "partnerName": "name",
        "partnerLocation": "France",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "socialBar": {
          "id": "cool",
          "twitter": {
            "url": "www.starbucks.ca",
            "text": "This is a tween",
            "via": "starbsCAnada",
            "hashtag-1": "duck",
            "hashtag-2": "bird",
            "hashtag-3": "quack",
            "hashtag-4": "egg",
            "hashtag-5": "dingo"
          },
          "facebook": {
            "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
            "hashtag": "Fun"
          },
          "email": {
            "subject": "The email subject",
            "body": "the email body"
          }
        }
      }
    },
    {
      "partnerData": {
        "partnerImgSrc": "https://media.npr.org/assets/img/2014/06/15/partner_experience_in-store7-c40c4644ccf25dca74db1ff8b3602ea13aca0aae-s800-c85.jpg",
        "partnerName": "name",
        "partnerLocation": "Location",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "socialBar": {
          "id": "cool",
          "twitter": {
            "url": "www.starbucks.ca",
            "text": "This is a tween",
            "via": "starbsCAnada",
            "hashtag-1": "duck",
            "hashtag-2": "bird",
            "hashtag-3": "quack",
            "hashtag-4": "egg",
            "hashtag-5": "dingo"
          },
          "facebook": {
            "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
            "hashtag": "Fun"
          },
          "email": {
            "subject": "The email subject",
            "body": "the email body"
          }
        }
      }
    }
  ]
}
  • Content:
    .value-section {
    
      .next,
      .previous {
        $size: 50px;
        width: $size;
        height: $size;
        position: absolute;
        top: -5px;
        display: flex;
        align-items: center;
        justify-content: center;
    
        svg {
          fill: $green;
          width: 18px;
          height: 10px;
        }
      }
    
      .next {
        left: 10vw;
      }
    
      .previous {
        right: 10vw;
    
        svg {
          transform: rotate(180deg);
        }
      }
    
      .item {
        flex: 1 0 calc(100vw - 10px);
        min-width: 275px;
        position: relative;
        scroll-snap-align: center;
        background-color: white;
        padding: 33px 0 20px;
    
        &:first-of-type {
          margin-left: 15px;
    
    
    
          .value-card {
            margin-left: -15px;
          }
        }
    
        &:last-of-type {
          padding-right: 20px;
    
    
          >div {
            padding-right: 20px;
          }
        }
    
        .quote {
          max-width: 275px;
        }
      }
    
      .track {
        width: 100vw;
        margin-bottom: 94px;
        overflow: -moz-scrollbars-none;
        overflow-y: hidden;
        overflow-x: scroll;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
    
    
        &:nth-of-type(even) {
          flex-direction: row-reverse;
    
          .item {
            &:first-of-type {
              margin-right: 15px;
              margin-left: 0;
    
              >div {
                margin-right: -15px;
                margin-left: 0;
              }
            }
    
            &:last-of-type {
              padding-left: 20px;
              margin-right: unset;
    
    
              >div {
                padding-left: 20px;
    
              }
            }
          }
        }
    
        &::-webkit-scrollbar {
          height: 0 !important;
        }
      }
    
      @media all and (min-width: 375px) {
        .item {
          min-width: 330px;
        }
      }
    
      @include respond-above(md) {
        flex-direction: column;
    
        .item {
          width: 100%;
          background-color: unset;
          flex: 0 0 320px;
          transform: scale(0.8);
          transition: transform 200ms ease-out;
          overflow: hidden;
          padding: 0px;
    
    
          .next,
          .previous {
           display: none;
          }
    
            .next .quote {
              margin: 0;
            }
    
          //   &:first-of-type {
          //     margin-left: 0;
    
          //     >div {
          //       margin-left: 0;
          //     }
          //   }
    
          //   &:last-of-type {
          //     margin-right: 0;
    
          //     >div {
          //       margin-right: 0;
          //     }
          //   }
          }
    
          .track {
            width: auto;
            padding-bottom: 0;
            max-width: 100vw;
            align-items: center;
            justify-content: center;
            margin-bottom: 4px;
    
            &:nth-of-type(2) {
              flex-direction: row-reverse;
            }
          }
        }
    
        @media all and (min-width: 920px) {
          .track {
            .item {
              transform: scale(1);
              margin: 60px !important;
              padding-right: 0;
              padding-left: 0;
    
              .quote {
                padding-right: 0;
                padding-left: 0 !important;
              }
            }
          }
        }
      }
  • URL: /components/raw/values-section/_values-section.scss
  • Filesystem Path: structures/04-templates/values-section/_values-section.scss
  • Size: 3 KB

There are no notes for this item.