Base by AppDirect

Layout

Complex components and layout patterns

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?1567620427" />
        </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?1567620427" />
        </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?1567620427" />
        </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?1567620427" />
        </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?1567620427" />
        </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?1567620427" />
        </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?1567620427" />
        </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?1567620427" />
        </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?1567620427" />
        </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?1567620427" />
        </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?1567620427" />
        </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?1567620427" />
        </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?1567620427" />
        </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?1567620427" />
        </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?1567620427" />
            </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?1567620427" />
            </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?1567620427" />
            </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?1567620427" />
            </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?1567620427" />
            </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?1567620427" />
            </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>