Text/Carousel

Feature customer testimonials, images and more alongside a text area.

319

Happy customers and counting

Our agency switched to zenCSS last quarter, and we've seen a noticeable improvement in both productivity and the quality of our web projects. It's incredible how much difference a good design framework can make.

- Sarah, Project Manager

Using zenCSS has been a game-changer for our team. The simplicity and elegance of the framework allowed us to cut down development time significantly. Highly recommended for any serious web developer!

-Alex, front-end developer

As a freelancer, I always look for tools that make my work efficient and high-quality. zenCSS fits the bill perfectly with its intuitive design and robust features.

- Maria, Web Designer

As an educator, I recommend zenCSS to my students as a great starting point for learning modern web design practices. It's accessible yet powerful enough for creating professional-grade websites.

- Tony, Computer Science Professor

Code Example Shortcut: z-text-carousel-1

<z-container>
  <z-row>
    <z-col class="card theme-dark center justify-content-center">
      <p class="text-xxl headline">319</p>
      <p>Happy customers and counting</p>
    </z-col>
    <z-col class="theme-light h-300 card">
      <div class="slider  flex-grow-1" data-auto-rotate="true">
        <div class="slides-container">

          <div class="slide">
            <div class="card center">
              <img src=".image-1.jpg" class="w-75 center-me img-round" alt="">
              <star-component stars="5"></star-component>
              <p>Testimonial text here.</p>
              <small class="signature smaller">Signature here</small>
            </div>
          </div>

          <div class="slide">
            <div class="card center">
              <img src=".image-1.jpg" class="w-75 center-me img-round" alt="">
              <star-component stars="5"></star-component>
              <p>Testimonial text here.</p>
              <small class="signature smaller">Signature here</small>
            </div>
          </div>

          ...

        </div>
        <div class="prev arrow bottom right theme-dark"><i class="zenicon-arrow-back-ios up-1 right-7"></i></div>
        <div class="next arrow bottom theme-dark"><i class="zenicon-arrow-forward-ios up-1 right-9"></i></div>
      </div>
    </z-col>
  </z-row>
</z-container>

Photo Montage

Code Example Shortcut: z-text-carousel-2

<z-container>
  <z-row>
    <z-col class="d-flex flex-direction-column justify-content-center theme-dark center">
      <img src="../../docs/images/white-tree.png" class="w-50 center-me pb-3 pt-3" alt="">
      <p>Photo Montage</p>
    </z-col>
    <z-col class="p-0 feature-md">
      <div class="slider" data-auto-rotate="true">
        <div class="slides-container"> 
          <div class="slide"><img src="../../docs/images/misc/slider/1.jpg" alt="Slide 1" ></div> 
          <div class="slide"><img src="../../docs/images/misc/slider/2.jpg" alt="Slide 2"></div>
          <div class="slide"><img src="../../docs/images/misc/slider/3.jpg" alt="Slide 3"></div>
          <div class="slide"><img src="../../docs/images/misc/slider/4.jpg" alt="Slide 4"></div>
        </div>
        <div class="prev arrow theme-dark"><i class="zenicon-arrow-back-ios up-1 left-1"></i></div>
        <div class="next arrow theme-dark"><i class="zenicon-arrow-forward-ios up-1 right-1"></i></div>
      </div>
    </z-col>
  </z-row>
</z-container>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.