Foundation CSS Kitchen Sink Orbit

Last Updated : 02 Mar, 2022

Foundation CSS is the frontend framework of CSS, built by the ZURB foundation in September 2011, that is used to develop responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.

Kitchen Sink has the elements to work in websites and applications. The Orbit is used to create the slider that swipes the elements using the orbit class.

Foundation CSS Kitchen Sink Orbit Classes:

orbit: It is used to create the slider with some elements.
orbit-container: It is used to create a container.
orbit-previous: It is used to navigate to the previous container.
orbit-next: It is used to navigate to the next container.
orbit-slide: It is used to create an orbit container slide.

Syntax:

<div class="orbit" data-orbit>
    <ul class="orbit-container">
        <button class="orbit-previous">Content</button>
        <button class="orbit-next">Content</button>
        <li class="is-active orbit-slide"> Content </li>
    </ul>
</div>

Example 1: This example describes the Kitchen Sink Orbit Class in Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Foundation CSS Kitchen Sink Orbit</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" 
            crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </script>
</head>

<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1> 
        <strong>
            Foundation CSS Kitchen Sink Orbit
        </strong> 
    </center>
    <div class="orbit" 
         role="region" 
         data-orbit data-use-m-u-i="false">
        <ul class="orbit-container">
            <button class="orbit-previous" 
                    aria-label="previous">
                <span class="show-for-sr">Previous Slide</span>
◀ 
            </button>
            <button class="orbit-next" 
                    aria-label="next"> 
                <span class="show-for-sr">Next Slide</span>
▶ 
             </button>
            <li class="is-active orbit-slide">
                <div>
                    <h3 class="text-center">First slide</h3>
                    <p class="text-center">
                        A Computer Science portal for geeks. 
                        It contains well written, well thought 
                        and well explained computer science and 
                        programming articles 
                    </p>

                </div>
            </li>
            <li class="orbit-slide">
                <div>
                    <h3 class="text-center">Second slide</h3>
                    <p class="text-center">
                        GeeksforGeeks.org was created with 
                        a goal in mind to provide well written, 
                        well thought and well explained solutions 
                        for selected questions.
                    </p>

                </div>
            </li>
        </ul>
        <nav class="orbit-bullets">
            <button class="is-active" 
                    data-slide="0">
               <span class="show-for-sr">First slide</span>
               <span class="show-for-sr">Current Slide</span> 
            </button>
            <button data-slide="1"> 
                <span class="show-for-sr">Second slide</span>
            </button>
        </nav>
    </div>
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>

</html>

Output:

Foundation CSS Kitchen Sink Orbit — Kitchen Sink Orbit

Example 2: This example describes the orbit class that contains different contents.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Foundation CSS Kitchen Sink</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" 
            crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </script>
    <style>
        .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <strong>Foundation CSS Kitchen Sink Orbit</strong>
    </center>
    <div class="orbit" 
         role="region" 
         data-orbit data-use-m-u-i="false">
        <ul class="orbit-container">
            <button class="orbit-previous" 
                    aria-label="previous">
               <span class="show-for-sr">Previous Slide</span>
◀
            </button>
            <button class="orbit-next" 
                    aria-label="next">
                <span class="show-for-sr">Next Slide</span>
▶
            </button>
            <li class="is-active orbit-slide">
                <div>
                    <h3 class="text-center">First slide</h3>
                    <p class="text-center">
                        A Computer Science portal for geeks.
                        It contains well written, well thought
                        and well explained computer science and 
                        programming articles. Billions of Users, 
                        Millions of Articles Published, Thousands
                        Got Hired by Top Companies and the numbers
                        are still growing. Free Tutorials, Millions
                        of Articles, Live, Online and Classroom Courses,
                        Frequent Coding Competitions ,Webinars by 
                        Industry Experts, Internship opportunities 
                        and Job Opportunities.
                    </p>

                </div>
            </li>
            <li class="orbit-slide">
                <div>
                    <h3 class="text-center">Second slide</h3>
                    <p class="text-center">
                        GeeksforGeeks.org was created with 
                        a goal in mind to provide well written,
                        well thought and well explained solutions
                        for selected questions. Billions of Users,
                        Millions of Articles Published, 
                        Thousands Got Hired by Top Companies
                        and the numbers are still growing. 
                        Free Tutorials, Millions of Articles, 
                        Live, Online and Classroom Courses ,
                        Frequent Coding Competitions ,
                        Webinars by Industry Experts, Internship
                        opportunities and Job Opportunities.
                    </p>

                </div>
            </li>
            <li class="orbit-slide">
                <div>
                    <h3 class="text-center">Third slide</h3>
                    <p class="text-center">
                        GeeksforGeeks.org was created with 
                        a goal in mind to provide well written,
                        well thought and well explained solutions
                        for selected questions. Billions of Users,
                        Millions of Articles Published, 
                        Thousands Got Hired by Top Companies
                        and the numbers are still growing. 
                        Free Tutorials, Millions of Articles, 
                        Live, Online and Classroom Courses ,
                        Frequent Coding Competitions ,
                        Webinars by Industry Experts, Internship
                        opportunities and Job Opportunities.
                    </p>

                </div>
            </li>
            <li class="orbit-slide">
                <div>
                    <h3 class="text-center">Fourth slide</h3>
                    <img class="center" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                         alt="GFG_logo">
                </div>
            </li>
            <li class="orbit-slide">
                <div>
                    <h3 class="text-center">Fifth slide</h3>
                    <p class="text-center">
                        GeeksforGeeks.org was created with 
                        a goal in mind to provide well written,
                        well thought and well explained solutions
                        for selected questions. Billions of Users,
                        Millions of Articles Published, 
                        Thousands Got Hired by Top Companies
                        and the numbers are still growing. 
                        Free Tutorials, Millions of Articles, 
                        Live, Online and Classroom Courses ,
                        Frequent Coding Competitions ,
                        Webinars by Industry Experts, Internship
                        opportunities and Job Opportunities.
                    </p>

                </div>
            </li>
        </ul>
        <nav class="orbit-bullets">
            <button class="is-active" data-slide="0"> 
                <span class="show-for-sr">First slide</span> 
                <span class="show-for-sr">Current Slide</span> 
            </button>
            <button data-slide="1"> 
                <span class="show-for-sr">Second slide</span> 
            </button>
            <button data-slide="2"> 
                <span class="show-for-sr">Third slide</span> 
            </button>
            <button data-slide="3"> 
                <span class="show-for-sr">Fourth slide</span> 
            </button>
            <button data-slide="4"> 
                <span class="show-for-sr">Fifth slide</span> 
            </button>
        </nav>
    </div>
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>
</html>

Output:

Reference: https://get.foundation/sites/docs/kitchen-sink.html#orbit

harendra4373

Improve

Article Tags :

Foundation CSS Kitchen Sink Orbit

Similar Reads

Thank You!

What kind of Experience do you want to share?