• Acme Marketplace
  • Core
  • Display
  • Navigate
  • Modify
  • Arrange
  • Prototype
    • Release Notes
    • CSS/SASS Stats
    • Preview All Components
Base by AppDirect

Core

Foundational principles, guidelines and styles

Design Principles
Grid and Layout
Colors
Typography
Iconography
Writing Style
Coding Style
States
Animations

Animations

Fade Effects

Insert a button here.
Insert a Button
<a data-event="click" data-toggle="dialog" href="#">
  Insert a button here.
</a>
<form action="" class="adb-tooltip_form adb-js-dialog">
  <fieldset class="adb-tooltip_form--fieldset">
    <div class="adb-tooltip_form--legend">
      <legend>Insert a Button</legend>
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="http://www.company.com" type="url">
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="Button Text" type="text">
    </div>
  </fieldset>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="submit">
      Insert
    </button>
    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
      Cancel
    </button>
  </menu>
</form>
Insert a button here.
Insert a Button
<a data-event="click" data-toggle="dialog" href="#">
  Insert a button here.
</a>
<form action="" class="adb-tooltip_form adb-js-dialog" data-placement="left">
  <fieldset class="adb-tooltip_form--fieldset">
    <div class="adb-tooltip_form--legend">
      <legend>Insert a Button</legend>
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="http://www.company.com" type="url">
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="Button Text" type="text">
    </div>
  </fieldset>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="submit">
      Insert
    </button>
    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
      Cancel
    </button>
  </menu>
</form>
Insert a button here.
Insert a Button
<a data-event="click" data-toggle="dialog" href="#">
  Insert a button here.
</a>
<form action="" class="adb-tooltip_form adb-js-dialog" data-placement="bottom">
  <fieldset class="adb-tooltip_form--fieldset">
    <div class="adb-tooltip_form--legend">
      <legend>Insert a Button</legend>
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="http://www.company.com" type="url">
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="Button Text" type="text">
    </div>
  </fieldset>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="submit">
      Insert
    </button>
    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
      Cancel
    </button>
  </menu>
</form>
Insert a button here.
Insert a Button
<a data-event="click" data-toggle="dialog" href="#">
  Insert a button here.
</a>
<form action="" class="adb-tooltip_form adb-js-dialog" data-placement="right">
  <fieldset class="adb-tooltip_form--fieldset">
    <div class="adb-tooltip_form--legend">
      <legend>Insert a Button</legend>
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="http://www.company.com" type="url">
    </div>
    <div class="adb-tooltip_form--field">
      <input class="adb-tooltip_form--text" placeholder="Button Text" type="text">
    </div>
  </fieldset>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="submit">
      Insert
    </button>
    <button class="adb-button__secret adb-toolbar--item" data-dismiss="dialog" type="button">
      Cancel
    </button>
  </menu>
</form>
  • Framework
  • Core
  • Animations
  • Powered by AppDirect © 2009–2014
  • Help Center
  • Terms & Conditions
  • Contact
  • Call us toll-free: (877) 404-APPS
    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%