SP-CSS
Library

Build fast, responsive websites with SP's powerful grid and pre-designed components.

Download Now 661

Utilities | Layout | Components

Carousel

A rotating slideshow component that smoothly cycles through images or text slides, with navigation controls.

◁

▷

Copy Example


            <div class="sp-carousel">

              <div class="sp-slides">

                <img src="..." alt="slide image" class="sp-slide sp-img-fluid" />

                <img src="..." alt="slide image" class="sp-slide sp-img-fluid" />

                <img src="..." alt="slide image" class="sp-slide sp-img-fluid" />

              </div>

              <div class="sp-controls">

                <div class="sp-control sp-prev-slide">◁</div>

                <div class="sp-control sp-next-slide">▷</div>

              </div>

            </div>

Autoplay Carousel

A rotating slideshow component that smoothly cycles through images or text slides, with automatic movement and navigation controls.

◁

▷

Copy Example


            <div class="sp-carousel sp-carousel-delay-2000">

              <div class="sp-slides">

                <img src="..." alt="slide image" class="sp-slide" />

                <img src="..." alt="slide image" class="sp-slide" />

                <img src="..." alt="slide image" class="sp-slide" />

              </div>

              <div class="sp-controls">

                <div class="sp-control sp-prev-slide">◁</div>

                <div class="sp-control sp-next-slide">▷</div>

              </div>

            </div>

Card

SP cards provide a flexible and extensible content container with multiple variants and options.

Card Title

A brief description that enhances the card title and provides meaningful context for the content inside.

Button

Copy Example


            <div class="sp-card">

              <img class="sp-img-fluid" src="..." alt="Placeholder Image">

              <div class="sp-card-body">

                <h5 class="sp-card-title sp-text-primary">Card Title</h5>

                <p class="sp-card-text sp-text-primary">

                  A brief description that enhances the card title and provides meaningful context for the content inside.

                </p>

                <a href="#" class="sp-btn sp-btn-secondary">Button</a>

              </div>

            </div>

Navbar

A responsive navigation header, or navbar, that supports branding, navigation, and more.

Copy Example


            <nav class="sp-navbar">

              <div class="sp-navbar-container ">

                <a href="#" class="sp-brand">BrandName</a>

                <button class="sp-navbar-toggle" aria-label="Toggle navigation">

                  ☰

                </button>

                <div class="sp-navbar-menu">

                  <ul class="sp-navbar-links sp-mb-0">

                    <li><a class="sp-sm-hidden sp-md-hidden" href="#">Home</a></li>

                    <li><a class="sp-sm-hidden sp-md-hidden" href="#">About</a></li>

                    <li><a class="sp-sm-hidden sp-md-hidden" href="#">Services</a></li>

                    <li><a class="sp-sm-hidden sp-md-hidden" href="#">Contact</a></li>

                  </ul>

                </div>

              </div>

            </nav>

Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Copy Example


            <nav class="sp-breadcrumb">

              <ul>

                <li><a href="#">Home</a></li>

                <li><a href="#">Category</a></li>

                <li><a href="#">Subcategory</a></li>

                <li class="active">Current</li>

              </ul>

            </nav>

Dropdown

Toggle contextual overlays to display lists of links and more using the SP dropdown plugin.

Copy Example


            <div class="sp-dropdown">

              <button class="sp-btn sp-btn-secondary sp-dropdown-toggle" type="button">

                Dropdown button 

                  <i class="fa-solid fa-angle-down sp-px-1"></i>
            

              </button>

              <ul class="sp-dropdown-menu sp-p-2">

                <li><a class="sp-dropdown-item" href="#">Option A</a></li>

                <li><a class="sp-dropdown-item" href="#">Option B</a></li>

                <li><a class="sp-dropdown-item" href="#">Option C</a></li>

              </ul>

            </div>

Buttons

SP includes several predefined button styles!

Copy Example


            <button type="button" class="sp-btn sp-btn-primary">Primary</button>

            <button type="button" class="sp-btn sp-btn-secondary">Secondary</button>

            <button type="button" class="sp-btn sp-btn-success">Success</button>

            <button type="button" class="sp-btn sp-btn-danger">Danger</button>

            <button type="button" class="sp-btn sp-btn-warning">Warning</button>

هل تفكر في مشروع
جديد؟

اتصل بنا

SP-CSS
Library

Carousel

A rotating slideshow component that smoothly cycles through images or text slides, with navigation controls.

Autoplay Carousel

A rotating slideshow component that smoothly cycles through images or text slides, with automatic movement and navigation controls.

Card

SP cards provide a flexible and extensible content container with multiple variants and options.

Card Title

Navbar

A responsive navigation header, or navbar, that supports branding, navigation, and more.

Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Dropdown

Toggle contextual overlays to display lists of links and more using the SP dropdown plugin.

Buttons

SP includes several predefined button styles!

هل تفكر في مشروع جديد؟

اتصل بنا

SP-CSS Library

Carousel

A rotating slideshow component that smoothly cycles through images or text slides, with navigation controls.

Autoplay Carousel

A rotating slideshow component that smoothly cycles through images or text slides, with automatic movement and navigation controls.

Card

SP cards provide a flexible and extensible content container with multiple variants and options.

Card Title

Navbar

A responsive navigation header, or navbar, that supports branding, navigation, and more.

Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Dropdown

Toggle contextual overlays to display lists of links and more using the SP dropdown plugin.

Buttons

SP includes several predefined button styles!

هل تفكر في مشروع
جديد؟

SP-CSS
Library