• Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototype
  • Acme Marketplace
  • Guidelines
  • Display
  • Navigate
  • Forms
  • Layout
  • Prototypes
    • Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototypes
    • Release Notes
    • Sass Documentation
    • Gulp Documentation
    • CSS/SASS Stats
    • Preview All Components
Base by AppDirect

Layout

Complex components and layout patterns

Containers
Tables
Modals
Sliders
Slats
Pricing
Feeds

Sliders

Sliders

Featured Apps

View All

Mailchimp

Send Better Email.

Starts at $24.00/mo

Lucidchart

Online diagramming application

Starts at $9.95/mo

Google Apps

Web-Based Email, Calendar, and Documents for Teams

Starts at $5.00/mo

Urban Airship

Global Leader in Push Messaging

Starts at $0.02/Unit/month

McAfee SaaS Endpoint Protection

McAfee SaaS Endpoint Security Solutions

$4.99/mo

Sendgrid

Email Delivery. Simplified

Free

FreeAgent

Small Business Accounting Software. Simplified.

Starts at $24.00/mo

Mailchimp

Send Better Email.

Starts at $24.00/mo

Lucidchart

Online diagramming application

Starts at $9.95/mo

Google Apps

Web-Based Email, Calendar, and Documents for Teams

Starts at $5.00/mo

Urban Airship

Global Leader in Push Messaging

Starts at $0.02/Unit/month

McAfee SaaS Endpoint Protection

McAfee SaaS Endpoint Security Solutions

$4.99/mo

Sendgrid

Email Delivery. Simplified

Free

FreeAgent

Small Business Accounting Software. Simplified.

Starts at $24.00/mo

<div class="adb-header adb-slider--controls-container">
  <h2 class="adb-header--item">Featured Apps</h2>
  <menu class="adb-header--item adb-toolbar adb-toolbar__horizontal adb-toolbar__small">
        <a class="adb-button adb-button__neutral adb-button__small adb-toolbar--item" href="../../prototype/marketplace/results.html">View All
    </a>

    <menu class="adb-toggle_buttons adb-toolbar--item adb-slider--controls">
      <button class="adb-toggle_buttons--button adb-button__square_small adb-js-slider-prev" id="adb_featured_slider_previous" type="button">
        <i class="adb-icon__arrow_left"></i>
      </button>
      <button class="adb-toggle_buttons--button adb-button__square_small adb-js-slider-next" id="adb_featured_slider_next" type="button">
        <i class="adb-icon__arrow_right"></i>
      </button>
    </menu>
  </menu>
</div>
<div class="adb-slider adb-is-visually_hidden" id="adb_features_slider">
  <div class="adb-slider--items">
    <div class="adb-slider--item">
      <p>
                <a data-toggle="dialog" data-placement="bottom" data-target="#mailchimp" class="adb-id adb-id__linked adb-id__logo" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/mailchimp-120x120.png?1625765172" />
        </a>

      </p>
      <h3>
        <a data-truncate="line" href="../../prototype/marketplace/product.html">Mailchimp
        </a>
      </h3>
      <p class="adb-slider--item_content" data-lines="2" data-truncate="paragraph">
        Send Better Email.
      </p>
      <p class="adb-slider--item_content adb-subtitle" data-truncate="line">
        Starts at $24.00/mo
      </p>
      <div class="adb-rating">
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
      </div>
    </div>
    <div class="adb-slider--item">
      <p>
                <a data-toggle="dialog" data-placement="bottom" data-target="#lucidchart" class="adb-id adb-id__linked adb-id__logo" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/lucidchart-120x120.png?1625765173" />
        </a>

      </p>
      <h3>
        <a data-truncate="line" href="../../prototype/marketplace/product.html">Lucidchart
        </a>
      </h3>
      <p class="adb-slider--item_content" data-lines="2" data-truncate="paragraph">
        Online diagramming application
      </p>
      <p class="adb-slider--item_content adb-subtitle" data-truncate="line">
        Starts at $9.95/mo
      </p>
      <div class="adb-rating">
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        <i class="adb-rating--icon adb-rating--icon__unrated"></i>
      </div>
    </div>
    <div class="adb-slider--item">
      <p>
                <a data-toggle="dialog" data-placement="bottom" data-target="#googleapps" class="adb-id adb-id__linked adb-id__logo" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/googleapps-120x120.png?1625765172" />
        </a>

      </p>
      <h3>
        <a data-truncate="line" href="../../prototype/marketplace/product.html">Google Apps
        </a>
      </h3>
      <p class="adb-slider--item_content" data-lines="2" data-truncate="paragraph">
        Web-Based Email, Calendar, and Documents for Teams
      </p>
      <p class="adb-slider--item_content adb-subtitle" data-truncate="line">
        Starts at $5.00/mo
      </p>
      <div class="adb-rating">
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__unrated"></i>
      </div>
    </div>
    <div class="adb-slider--item">
      <p>
                <a data-toggle="dialog" data-placement="bottom" data-target="#urbanairship" class="adb-id adb-id__linked adb-id__logo" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/urbanairship-120x120.png?1625765172" />
        </a>

      </p>
      <h3>
        <a data-truncate="line" href="../../prototype/marketplace/product.html">Urban Airship
        </a>
      </h3>
      <p class="adb-slider--item_content" data-lines="2" data-truncate="paragraph">
        Global Leader in Push Messaging
      </p>
      <p class="adb-slider--item_content adb-subtitle" data-truncate="line">
        Starts at $0.02/Unit/month
      </p>
      <div class="adb-rating">
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        <i class="adb-rating--icon adb-rating--icon__unrated"></i>
      </div>
    </div>
    <div class="adb-slider--item">
      <p>
                <a data-toggle="dialog" data-placement="bottom" data-target="#mcafee" class="adb-id adb-id__linked adb-id__logo" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/mcaffee-120x120.png?1625765173" />
        </a>

      </p>
      <h3>
        <a data-truncate="line" href="../../prototype/marketplace/product.html">McAfee SaaS Endpoint Protection
        </a>
      </h3>
      <p class="adb-slider--item_content" data-lines="2" data-truncate="paragraph">
        McAfee SaaS Endpoint Security Solutions
      </p>
      <p class="adb-slider--item_content adb-subtitle" data-truncate="line">
        $4.99/mo
      </p>
      <div class="adb-rating"></div>
    </div>
    <div class="adb-slider--item">
      <p>
                <a data-toggle="dialog" data-placement="bottom" data-target="#sendgrid" class="adb-id adb-id__linked adb-id__logo" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/sendgrid-120x120.png?1625765173" />
        </a>

      </p>
      <h3>
        <a data-truncate="line" href="../../prototype/marketplace/product.html">Sendgrid
        </a>
      </h3>
      <p class="adb-slider--item_content" data-lines="2" data-truncate="paragraph">
        Email Delivery. Simplified
      </p>
      <p class="adb-slider--item_content adb-subtitle" data-truncate="line">
        Free
      </p>
      <div class="adb-rating">
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__unrated"></i>
      </div>
    </div>
    <div class="adb-slider--item">
      <p>
                <a data-toggle="dialog" data-placement="bottom" data-target="#freeagent" class="adb-id adb-id__linked adb-id__logo" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/freeagent-120x120.png?1625765173" />
        </a>

      </p>
      <h3>
        <a data-truncate="line" href="../../prototype/marketplace/product.html">FreeAgent
        </a>
      </h3>
      <p class="adb-slider--item_content" data-lines="2" data-truncate="paragraph">
        Small Business Accounting Software. Simplified.
      </p>
      <p class="adb-slider--item_content adb-subtitle" data-truncate="line">
        Starts at $24.00/mo
      </p>
      <div class="adb-rating">
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
      </div>
    </div>
    <div class="adb-slider--item">
      <p>
                <a data-toggle="dialog" data-placement="bottom" data-target="#mailchimp" class="adb-id adb-id__linked adb-id__logo" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/mailchimp-120x120.png?1625765172" />
        </a>

      </p>
      <h3>
        <a data-truncate="line" href="../../prototype/marketplace/product.html">Mailchimp
        </a>
      </h3>
      <p class="adb-slider--item_content" data-lines="2" data-truncate="paragraph">
        Send Better Email.
      </p>
      <p class="adb-slider--item_content adb-subtitle" data-truncate="line">
        Starts at $24.00/mo
      </p>
      <div class="adb-rating">
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
      </div>
    </div>
    <div class="adb-slider--item">
      <p>
                <a data-toggle="dialog" data-placement="bottom" data-target="#lucidchart" class="adb-id adb-id__linked adb-id__logo" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/lucidchart-120x120.png?1625765173" />
        </a>

      </p>
      <h3>
        <a data-truncate="line" href="../../prototype/marketplace/product.html">Lucidchart
        </a>
      </h3>
      <p class="adb-slider--item_content" data-lines="2" data-truncate="paragraph">
        Online diagramming application
      </p>
      <p class="adb-slider--item_content adb-subtitle" data-truncate="line">
        Starts at $9.95/mo
      </p>
      <div class="adb-rating">
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        <i class="adb-rating--icon adb-rating--icon__unrated"></i>
      </div>
    </div>
    <div class="adb-slider--item">
      <p>
                <a data-toggle="dialog" data-placement="bottom" data-target="#googleapps" class="adb-id adb-id__linked adb-id__logo" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/googleapps-120x120.png?1625765172" />
        </a>

      </p>
      <h3>
        <a data-truncate="line" href="../../prototype/marketplace/product.html">Google Apps
        </a>
      </h3>
      <p class="adb-slider--item_content" data-lines="2" data-truncate="paragraph">
        Web-Based Email, Calendar, and Documents for Teams
      </p>
      <p class="adb-slider--item_content adb-subtitle" data-truncate="line">
        Starts at $5.00/mo
      </p>
      <div class="adb-rating">
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__unrated"></i>
      </div>
    </div>
    <div class="adb-slider--item">
      <p>
                <a data-toggle="dialog" data-placement="bottom" data-target="#urbanairship" class="adb-id adb-id__linked adb-id__logo" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/urbanairship-120x120.png?1625765172" />
        </a>

      </p>
      <h3>
        <a data-truncate="line" href="../../prototype/marketplace/product.html">Urban Airship
        </a>
      </h3>
      <p class="adb-slider--item_content" data-lines="2" data-truncate="paragraph">
        Global Leader in Push Messaging
      </p>
      <p class="adb-slider--item_content adb-subtitle" data-truncate="line">
        Starts at $0.02/Unit/month
      </p>
      <div class="adb-rating">
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__unrated"></i>
        <i class="adb-rating--icon adb-rating--icon__unrated"></i>
      </div>
    </div>
    <div class="adb-slider--item">
      <p>
                <a data-toggle="dialog" data-placement="bottom" data-target="#mcafee" class="adb-id adb-id__linked adb-id__logo" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/mcaffee-120x120.png?1625765173" />
        </a>

      </p>
      <h3>
        <a data-truncate="line" href="../../prototype/marketplace/product.html">McAfee SaaS Endpoint Protection
        </a>
      </h3>
      <p class="adb-slider--item_content" data-lines="2" data-truncate="paragraph">
        McAfee SaaS Endpoint Security Solutions
      </p>
      <p class="adb-slider--item_content adb-subtitle" data-truncate="line">
        $4.99/mo
      </p>
      <div class="adb-rating"></div>
    </div>
    <div class="adb-slider--item">
      <p>
                <a data-toggle="dialog" data-placement="bottom" data-target="#sendgrid" class="adb-id adb-id__linked adb-id__logo" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/sendgrid-120x120.png?1625765173" />
        </a>

      </p>
      <h3>
        <a data-truncate="line" href="../../prototype/marketplace/product.html">Sendgrid
        </a>
      </h3>
      <p class="adb-slider--item_content" data-lines="2" data-truncate="paragraph">
        Email Delivery. Simplified
      </p>
      <p class="adb-slider--item_content adb-subtitle" data-truncate="line">
        Free
      </p>
      <div class="adb-rating">
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__unrated"></i>
      </div>
    </div>
    <div class="adb-slider--item">
      <p>
                <a data-toggle="dialog" data-placement="bottom" data-target="#freeagent" class="adb-id adb-id__linked adb-id__logo" href="../../prototype/marketplace/product.html"><img class="adb-id--img" src="../../images/logos/apps/freeagent-120x120.png?1625765173" />
        </a>

      </p>
      <h3>
        <a data-truncate="line" href="../../prototype/marketplace/product.html">FreeAgent
        </a>
      </h3>
      <p class="adb-slider--item_content" data-lines="2" data-truncate="paragraph">
        Small Business Accounting Software. Simplified.
      </p>
      <p class="adb-slider--item_content adb-subtitle" data-truncate="line">
        Starts at $24.00/mo
      </p>
      <div class="adb-rating">
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
        <i class="adb-rating--icon adb-rating--icon__positive"></i>
      </div>
    </div>
  </div>
</div>

Carousels

Urban Airship

Use unparalleled customer insight, preferences, behaviors, current location and location history, to target mobile messaging that quadruples engagement, doubles retention and drives double-digit sales increases. Push e …

Urban Airship

Use unparalleled customer insight, preferences, behaviors, current location and location history, to target mobile messaging that quadruples engagement, doubles retention and drives double-digit sales increases. Push e …

Urban Airship

Use unparalleled customer insight, preferences, behaviors, current location and location history, to target mobile messaging that quadruples engagement, doubles retention and drives double-digit sales increases. Push e …

Urban Airship

Use unparalleled customer insight, preferences, behaviors, current location and location history, to target mobile messaging that quadruples engagement, doubles retention and drives double-digit sales increases. Push e …

Urban Airship

Use unparalleled customer insight, preferences, behaviors, current location and location history, to target mobile messaging that quadruples engagement, doubles retention and drives double-digit sales increases. Push e …

Urban Airship

Use unparalleled customer insight, preferences, behaviors, current location and location history, to target mobile messaging that quadruples engagement, doubles retention and drives double-digit sales increases. Push e …

<div class="adb-hero adb-is-visually_hidden">
  <div class="adb-hero--container">
    <div class="adb-hero--carousel">
      <div class="adb-hero--item">
        <div class="adb-hero--item_card">
          <div class="adb-hero--item_image">
            <figure>
              <img src="../../images/logos/apps/urbanAirshipLarge.png?1625765173" />
            </figure>
          </div>
          <div class="adb-hero--item_content">
            <a class="adb-title__xxlarge" href="../../prototype/marketplace/product.html">Urban Airship
            </a>
            <p data-lines="3" data-truncate="paragraph">
              Use unparalleled customer insight, preferences, behaviors, current location and location history, to target mobile messaging that quadruples engagement, doubles retention and drives double-digit sales increases. Push e &hellip;
            </p>
            <button class="adb-button__emphasis adb-button__large" type="button">
              Learn More
            </button>
          </div>
        </div>
      </div>
      <div class="adb-hero--item">
        <div class="adb-hero--item_card">
          <div class="adb-hero--item_image">
            <figure>
              <img src="../../images/logos/apps/urbanAirshipLarge.png?1625765173" />
            </figure>
          </div>
          <div class="adb-hero--item_content">
            <a class="adb-title__xxlarge" href="../../prototype/marketplace/product.html">Urban Airship
            </a>
            <p data-lines="3" data-truncate="paragraph">
              Use unparalleled customer insight, preferences, behaviors, current location and location history, to target mobile messaging that quadruples engagement, doubles retention and drives double-digit sales increases. Push e &hellip;
            </p>
            <button class="adb-button__emphasis adb-button__large" type="button">
              Learn More
            </button>
          </div>
        </div>
      </div>
      <div class="adb-hero--item">
        <div class="adb-hero--item_card">
          <div class="adb-hero--item_image">
            <figure>
              <img src="../../images/logos/apps/urbanAirshipLarge.png?1625765173" />
            </figure>
          </div>
          <div class="adb-hero--item_content">
            <a class="adb-title__xxlarge" href="../../prototype/marketplace/product.html">Urban Airship
            </a>
            <p data-lines="3" data-truncate="paragraph">
              Use unparalleled customer insight, preferences, behaviors, current location and location history, to target mobile messaging that quadruples engagement, doubles retention and drives double-digit sales increases. Push e &hellip;
            </p>
            <button class="adb-button__emphasis adb-button__large" type="button">
              Learn More
            </button>
          </div>
        </div>
      </div>
      <div class="adb-hero--item">
        <div class="adb-hero--item_card">
          <div class="adb-hero--item_image">
            <figure>
              <img src="../../images/logos/apps/urbanAirshipLarge.png?1625765173" />
            </figure>
          </div>
          <div class="adb-hero--item_content">
            <a class="adb-title__xxlarge" href="../../prototype/marketplace/product.html">Urban Airship
            </a>
            <p data-lines="3" data-truncate="paragraph">
              Use unparalleled customer insight, preferences, behaviors, current location and location history, to target mobile messaging that quadruples engagement, doubles retention and drives double-digit sales increases. Push e &hellip;
            </p>
            <button class="adb-button__emphasis adb-button__large" type="button">
              Learn More
            </button>
          </div>
        </div>
      </div>
      <div class="adb-hero--item">
        <div class="adb-hero--item_card">
          <div class="adb-hero--item_image">
            <figure>
              <img src="../../images/logos/apps/urbanAirshipLarge.png?1625765173" />
            </figure>
          </div>
          <div class="adb-hero--item_content">
            <a class="adb-title__xxlarge" href="../../prototype/marketplace/product.html">Urban Airship
            </a>
            <p data-lines="3" data-truncate="paragraph">
              Use unparalleled customer insight, preferences, behaviors, current location and location history, to target mobile messaging that quadruples engagement, doubles retention and drives double-digit sales increases. Push e &hellip;
            </p>
            <button class="adb-button__emphasis adb-button__large" type="button">
              Learn More
            </button>
          </div>
        </div>
      </div>
      <div class="adb-hero--item">
        <div class="adb-hero--item_card">
          <div class="adb-hero--item_image">
            <figure>
              <img src="../../images/logos/apps/urbanAirshipLarge.png?1625765173" />
            </figure>
          </div>
          <div class="adb-hero--item_content">
            <a class="adb-title__xxlarge" href="../../prototype/marketplace/product.html">Urban Airship
            </a>
            <p data-lines="3" data-truncate="paragraph">
              Use unparalleled customer insight, preferences, behaviors, current location and location history, to target mobile messaging that quadruples engagement, doubles retention and drives double-digit sales increases. Push e &hellip;
            </p>
            <button class="adb-button__emphasis adb-button__large" type="button">
              Learn More
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  • Framework
  • Layout
  • Sliders
  • Powered by AppDirect © 2022
  • Contact Support
  • Terms & Conditions
  • Privacy Policy
    • Contact Support
    • Terms & Conditions
    • Privacy Policy
Themes
    Assistant
    • Bonzi
    • Clippy
    • F1
    • Genie
    • Genius
    • Links
    • Merlin
    • Peedy
    • Rocky
    • Rover
    Hide
    4
    1366 × 768
    10.51%
    9
    1024 × 768
    4.02%
    3
    1280 × 800
    11.08%
    1
    1440 × 900
    16.09%
    7
    1600 × 900
    5.59%
    6
    1280 × 1024
    5.77%
    5
    1680 × 1050
    7.48%
    2
    1920 × 1080
    15.99%
    8
    1920 × 1200
    5.39%
    10
    2560 × 1440
    3.23%