{{> partials/head title="UI Kit | ICE Mortgage Technology"}} {{> partials/modals}} {{> partials/navbar classList="navbar-light fixed-top bg-white border-bottom" container="container-fluid" button="primary"}}
{{> partials/sidenav}}

Flickity

Touch, responsive, flickable carousels.

Plugin documentation

...
...
...
...
<div data-flickity='{"pageDots": false,"cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-5.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-6.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-7.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-8.jpg" class="img-fluid" alt="...">
  </div>
</div>

Create a white variation of the navigation buttons with a .flickity-button-white modifier.

...
...
...
...
<div class="flickity-button-white" data-flickity='{"pageDots": false,"cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-5.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-6.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-7.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-8.jpg" class="img-fluid" alt="...">
  </div>
</div>

Change the position of the navigation buttons with a .flickity-buttons-inset modifier.

...
...
...
...
<div class="flickity-button-inset" data-flickity='{"pageDots": false,"cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-5.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-6.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-7.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-8.jpg" class="img-fluid" alt="...">
  </div>
</div>

Visible overflow

Changes the overflow visibililty of the flickity viewport.

{{> logotype/airbnb}}

Uses Landkit to keep their remote teams from around the world in sync.

Read more
{{> logotype/netflix}}

Uses Landkit to document their processes for acquiring shows.

Read more
{{> logotype/coinbase}}

Uses Landkit to share their brand assets across their teams.

Read more
{{> logotype/stripe}}

Uses Landkit to plan their product development with engineering.

Read more
{{> logotype/pinterest}}

Uses Landkit to share financial projections with their investors.

Read more
{{> logotype/dribbble}}

Uses Landkit to plan their priorities for the company quarterly and annually.

Read more
<div class="flickity-viewport-visible" data-flickity='{"cellAlign": "left", "imagesLoaded": true, "pageDots": false, "prevNextButtons": false, "contain": true}'>
  ...
</div>
Jump to
{{> partials/scripts}}