Payroc Design logo
  • Our brand
    Mission statement Personality Values Assets
  • Content guidelines
    Voice and tone Grammar and formatting Inclusive language Writing style guides
  • Design system
    Get started Essentials Components Patterns
Submit a design request
  1. Payroc design
  2. Design system
  3. Components
  4. Carousel

Carousel

Enable more than one piece of content to occupy the same piece of prime real estate.

Anatomy

Diagram of a carousel component.
  1. Title
  2. Subheading
  3. Body Copy
  4. Card
  5. Carousel controls
  6. Carousel indicator

Example

The carousel component is powered by Slick. To see documentation visit the site.

Coded example

June 2021

Payroc acquires Beanstalk Payment Technologies

Beanstalk Payment Technologies reinforces Payroc’s capabilities to provide industry leading cost-saving capabilities.” said Jim Oberman, Chief Executive Officer at Payroc. “Merging Payroc’s full-stack processing platform with Beanstalk’s debit routing intelligence solution will help merchants, payfacs, and independent software vendors reduce the costs associated with debit card transactions.

April 2021

Payroc acquires Retriever Merchant Systems

Payroc and Retriever will launch this partnership by focusing efforts in multiple strategic areas: common sense underwriting and Risk management, modern APIs, global device connectivity, and Payroc’s flagship Consumer Choice program. Brian Kamstra, President of Retriever said "There's not a better company in the industry right now, than Payroc, and we are blessed.”

October 2020

Payroc acquires Bluestone Payments

Founded by Linda Rossetti, Bluestone was an Independent Sales Organization launched in 2006. Payroc welcomed Bluestone's payment programs for merchants through referral relationships in niche markets.

July 2020

A fourth example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

June 2020

A fifth example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

May 2020

A sixth example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Code snippet

HTML JavaScript
									
<div class="wrapper">
  <div class="carousel">
    <div>
      <div class="card h-100">
        <div class="card-body">
          <div class="card-content">
            <h4 class="text-primary">June 2021</h4>
            <h5>Payroc acquires Beanstalk Payment Technologies</h5>
            <div class="card-text">
              <p>Beanstalk Payment Technologies reinforces Payroc’s capabilities to provide industry leading cost-saving capabilities.” said Jim Oberman, Chief Executive Officer at Payroc. “Merging Payroc’s full-stack processing platform with Beanstalk’s debit routing intelligence solution will help merchants, payfacs, and independent software vendors reduce the costs associated with debit card transactions.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="card h-100">
        <div class="card-body">
          <div class="card-content">
            <h4 class="text-primary">April 2021</h4>
            <h5>Payroc acquires Retriever Merchant Systems</h5>
            <div class="card-text">
              <p>Payroc and Retriever will launch this partnership by focusing efforts in multiple strategic areas: common sense underwriting and Risk management, modern APIs, global device connectivity, and Payroc’s flagship Consumer Choice program. Brian Kamstra, President of Retriever said "There's not a better company in the industry right now, than Payroc, and we are blessed.”</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="card h-100">
        <div class="card-body">
          <div class="card-content">
            <h4 class="text-primary">October 2020</h4>
            <h5>Payroc acquires Bluestone Payments</h5>
            <div class="card-text">
              <p>Founded by Linda Rossetti, Bluestone was an Independent Sales Organization launched in 2006. Payroc welcomed Bluestone's payment programs for merchants through referral relationships in niche markets.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="card h-100">
        <div class="card-body">
          <div class="card-content">
            <h4 class="text-primary">July 2020</h4>
            <h5>A fourth example</h5>
            <div class="card-text">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="card h-100">
        <div class="card-body">
          <div class="card-content">
            <h4 class="text-primary">June 2020</h4>
            <h5>A fifth example</h5>
            <div class="card-text">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="card h-100">
        <div class="card-body">
          <div class="card-content">
            <h4 class="text-primary">May 2020</h4>
            <h5>A sixth example</h5>
            <div class="card-text">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="carousel-controls">
    <button type="button" class="slick-prev btn btn-circle-secondary" id="prev"><i class="fa-regular fa-arrow-left"></i><span class="sr-only">Previous</span></button>
    <button type="button" class="slick-next btn btn-circle-secondary" id="next"><i class="fa-regular fa-arrow-right"></i><span class="sr-only">Next</span></button>
    <div class="carousel-dots"></div>
  </div>
</div>
          
								
									
$(document).ready(function(){
  $('.carousel').slick({
    speed: 500,
    slidesToShow: 2,
    slidesToScroll: 1,
    autoplay: false,
    dots:true,
    initialSlide: 0,
    nextArrow: $('#next'),
    prevArrow: $('#prev'),
    responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
        // centerMode: true,

      }

    }, {
      breakpoint: 800,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        dots: true,
        infinite: true,

      }
    },  {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 2000,
      }
    }]
  });
});
          
								

Figma prototype

Usage guide

Dos and don'ts

Make links and buttons large enough to decipher and click.

Keep content simple.

Focus on one message per slide.

Don’t overload it with too many slides.

Payroc Design logo

Copyright © Payroc

    Our brand
  • Mission statement
  • Personality
  • Values
  • Assets
  • Brand Guide for Sales Partners
    Content guidelines
  • Voice and tone
  • Grammar and formatting
  • Inclusive lanugage
  • Writing style guides
    Design system
  • Get started
  • Essentials
  • Components
  • Patterns