Base by AppDirect

Display

Communicate specialized information

Alerts & Messages

Global Alerts

Styles

Alert. You should do something, click here. 

<div class="adb-global_alert">
  <div class="adb-global_alert--content adb-layout-default">
    <p>
      <strong>Alert.</strong>
      You should do something,
      <a class="adb-global_alert--link">click here.</a>
    </p>
  </div>
  <a class="adb-global_alert--close" data-dismiss="alert" href="#" title="Close"></a>
</div>

Error. You must do something, click here to go do it. 

<div class="adb-global_alert">
  <div class="adb-global_alert--content adb-layout-default">
    <p>
      <strong>Error.</strong>
      You must do something,
      <a class="adb-global_alert--link">
        click here to go do it.
      </a>
    </p>
  </div>
</div>

States

FYI, here is a message for you. Feel free to dismiss me at will. 

<div class="adb-global_alert">
  <div class="adb-global_alert--content adb-layout-default">
    <p>
      <strong>FYI,</strong>
      here is a message for you. Feel free to dismiss me at will.
    </p>
  </div>
  <a class="adb-global_alert--close" data-dismiss="alert" href="#" title="Close"></a>
</div>

Error! Something went wrong, sorry to say. 

<div class="adb-global_alert adb-global_alert__error">
  <div class="adb-global_alert--content adb-layout-default">
    <p>
      <strong>Error!</strong>
      Something went wrong, sorry to say.
    </p>
  </div>
  <a class="adb-global_alert--close" data-dismiss="alert" href="#" title="Close"></a>
</div>

Warning! Just thought you might want to know about something. 

<div class="adb-global_alert adb-global_alert__warning">
  <div class="adb-global_alert--content adb-layout-default">
    <p>
      <strong>Warning!</strong>
      Just thought you might want to know about something.
    </p>
  </div>
  <a class="adb-global_alert--close" data-dismiss="alert" href="#" title="Close"></a>
</div>

Success! You did something right for a change, good job! 

<div class="adb-global_alert adb-global_alert__success">
  <div class="adb-global_alert--content adb-layout-default">
    <p>
      <strong>Success!</strong>
      You did something right for a change, good job!
    </p>
  </div>
  <a class="adb-global_alert--close" data-dismiss="alert" href="#" title="Close"></a>
</div>

Info: here is something you need to know. Now you can close this alert. 

<div class="adb-global_alert adb-global_alert__info">
  <div class="adb-global_alert--content adb-layout-default">
    <p>
      <strong>Info:</strong>
      here is something you need to know. Now you can close this alert.
    </p>
  </div>
  <a class="adb-global_alert--close" data-dismiss="alert" href="#" title="Close"></a>
</div>

Local Alerts

Styles

FYI. If you want to do that thing you want to do, click here. 

<div class="adb-local_alert">
  <div class="adb-local_alert--content">
    <p>
      <strong>
        FYI.
      </strong>
      If you want to do that thing you want to do,
      <a class="adb-local_alert--link">click here.</a>
    </p>
  </div>
  <a class="adb-local_alert--close" data-dismiss="alert" href="#" title="Close"></a>
</div>

Buttons. Sometimes they make more sense for choices. 

<div class="adb-local_alert">
  <div class="adb-local_alert--content">
    <p>
      <strong>Buttons.</strong>
      Sometimes they make more sense for choices.
    </p>
  </div>
  <a class="adb-local_alert--close" data-dismiss="alert" href="#" title="Close"></a>
  <menu class="adb-toolbar adb-local_alert--buttons">
    <button class="adb-button__primary adb-toolbar--item" type="button">
      Invite Users
    </button>
    <button class="adb-toolbar--item" data-dismiss="alert" type="button">
      Do Something Else
    </button>
  </menu>
</div>

Hey there big guy!

This notification would be great for more important of lengthier messages. It will comfortably break to two lines to accomodate longer messages. Click here. 

<div class="adb-local_alert">
  <div class="adb-local_alert--content">
    <h3>
      Hey there big guy!
    </h3>
    <p>
      This notification would be great for more important of lengthier messages. It will
      comfortably break to two lines to accomodate longer messages.
      <a class="adb-local_alert--link">Click here.</a>
    </p>
  </div>
  <a class="adb-local_alert--close" data-dismiss="alert" href="#" title="Close"></a>
</div>

States

FYI, here is a message for you. Feel free to dismiss me at will. 

<div class="adb-local_alert">
  <div class="adb-local_alert--content">
    <p>
      <strong>FYI,</strong>
      here is a message for you. Feel free to dismiss me at will.
    </p>
  </div>
  <a class="adb-local_alert--close" data-dismiss="alert" href="#" title="Close"></a>
</div>

Error! Something went wrong, sorry to say. 

<div class="adb-local_alert adb-local_alert__error">
  <div class="adb-local_alert--content">
    <p>
      <strong>Error!</strong>
      Something went wrong, sorry to say.
    </p>
  </div>
  <a class="adb-local_alert--close" data-dismiss="alert" href="#" title="Close"></a>
</div>

Warning! Just thought you might want to know about something. 

<div class="adb-local_alert adb-local_alert__warning">
  <div class="adb-local_alert--content">
    <p>
      <strong>Warning!</strong>
      Just thought you might want to know about something.
    </p>
  </div>
  <a class="adb-local_alert--close" data-dismiss="alert" href="#" title="Close"></a>
</div>

Success! You did something right for a change, good job! 

<div class="adb-local_alert adb-local_alert__success">
  <div class="adb-local_alert--content">
    <p>
      <strong>Success!</strong>
      You did something right for a change, good job!
    </p>
  </div>
  <a class="adb-local_alert--close" data-dismiss="alert" href="#" title="Close"></a>
</div>

Info: here is something you need to know. Now you can close this alert. 

<div class="adb-local_alert adb-local_alert__info">
  <div class="adb-local_alert--content">
    <p>
      <strong>Info:</strong>
      here is something you need to know. Now you can close this alert.
    </p>
  </div>
  <a class="adb-local_alert--close" data-dismiss="alert" href="#" title="Close"></a>
</div>

Help Messages

Help messages are blocks of textual content, highlighted by a light gray background, such as help tips and frequently asked questions. You can pair them with tooltips to show/hide them.

This is some help text.

<div class="adb-help">
  <p>This is some help text.</p>
</div>

How do I buy an application through AppDirect?

To buy an application, visit the AppDirect Marketplace and click on the profile of the application you would like to purchase. Then click "Buy Now" to start the purchase. … Read More 

<div class="adb-help">
  <h3>
    How do I buy an application through AppDirect?
  </h3>
  <p>
    To buy an application, visit the
    <a href="#">
      AppDirect Marketplace
    </a>
    and click on the profile of the application you would like to purchase. Then click "Buy Now" to start the purchase. &hellip;
    <a href="#">
      Read More
    </a>
  </p>
</div>

What happens if I upgrade editions in the middle of a billing cycle?

You will get charged a prorated amount for the upgrade and the billing cycle resets on the upgrade checkout date. You will get immediate access to the new edition features when you upgrade.

What happens if I downgrade editions in the middle of a billing cycle?

You will get charged a prorated amount for the downgrade and the billing cycle resets on the downgrade checkout date. You will get immediate access to the downgraded edition.

What happens if I cancel a subscription in the middle of a billing cycle?

When you cancel your subscription to an application you will no longer have access to that application. We do not provide refunds on paid subscriptions.

<div class="adb-help">
  <div class="adb-help--row">
    <h4>What happens if I upgrade editions in the middle of a billing cycle?</h4>
    <p>You will get charged a prorated amount for the upgrade and the billing cycle resets on the upgrade checkout date. You will get immediate access to the new edition features when you upgrade.</p>
  </div>
  <div class="adb-help--row">
    <h4>What happens if I downgrade editions in the middle of a billing cycle?</h4>
    <p>You will get charged a prorated amount for the downgrade and the billing cycle resets on the downgrade checkout date. You will get immediate access to the downgraded edition.</p>
  </div>
  <div class="adb-help--row">
    <h4>What happens if I cancel a subscription in the middle of a billing cycle?</h4>
    <p>When you cancel your subscription to an application you will no longer have access to that application. We do not provide refunds on paid subscriptions.</p>
  </div>
</div>

Callout Help Messages

Average Rating

4/5 based on 3 reviews

My Rating

<div class="adb-help adb-help__columned adb-help__multiline">
  <div class="adb-help--column">
    <h3>Average Rating</h3>
    <div class="adb-rating adb-rating__xlarge">
      <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 class="adb-caption">
      4/5 based on 3 reviews
    </div>
  </div>
  <div class="adb-help--column">
    <h3>My Rating</h3>
    <div class="adb-rating adb-rating__xlarge">
      <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>
      <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-help--column"></div>
  <div class="adb-help--column"></div>
  <div class="adb-help--column"></div>
  <menu class="adb-help--column adb-show-medium-up">
    <button class="adb-button__primary" data-target="#modal-review" data-toggle="modal" type="button">
      Write a Review
    </button>
  </menu>
</div>
Status:  Pending
Status:  Pending 
<div class="adb-js-pill-target capabilities-appdirect active">
  <div class="adb-help adb-help__columned">
    <div class="adb-help--column">
      <div class="adb-title__large">
        <span class="adb-status adb-status__pending">
          <span>Status:&nbsp;</span>
          <span class="adb-status--gem"></span>
          Pending
        </span>
      </div>
    </div>
    <menu class="adb-help--column">
      <button class="adb-button__primary" type="button">
        Publish Product
      </button>
    </menu>
  </div>
</div>
<div class="adb-js-pill-target capabilities-appdevices">
  <div class="adb-help adb-help__columned">
    <div class="adb-help--column">
      <div class="adb-title__large">
        <span class="adb-status adb-status__pending">
          <span>Status:&nbsp;</span>
          <span class="adb-status--gem"></span>
          Pending
        </span>
      </div>
    </div>
    <menu class="adb-help--column">
      <button class="adb-button" type="button">
        Preview
      </button>
      <button class="adb-button__primary adb-is-disabled" data-original-title="To approve this application you must first review all product versions.&lt;br /&gt;There are &lt;em&gt;n&lt;/em&gt; product versions pending approval." data-toggle="tooltip" type="button">
        Approve
      </button>
      <button class="adb-button adb-is-disabled" type="button">
        Deny
      </button>
    </menu>
  </div>
</div>