Display

<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>

<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.
      <a class="adb-global_alert--close" data-dismiss="alert" href="#" title="Close"></a>
    </p>
  </div>
</div>

<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.
      <a class="adb-global_alert--close" data-dismiss="alert" href="#" title="Close"></a>
    </p>
  </div>
</div>

<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!
      <a class="adb-global_alert--close" data-dismiss="alert" href="#" title="Close"></a>
    </p>
  </div>
</div>

<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.
      <a class="adb-global_alert--close" data-dismiss="alert" href="#" title="Close"></a>
    </p>
  </div>
</div>

<div class="adb-local_alert">
  <div class="adb-local_alert--content">
    <p>
      <strong>Buttons.</strong>
      Sometimes they make more sense for choices.
      <a class="adb-local_alert--close" data-dismiss="alert" href="#" title="Close"></a>
    </p>
  </div>
  <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>

<div class="adb-local_alert">
  <div class="adb-local_alert--content">
    <h3>
      Hey there big guy!
      <a class="adb-local_alert--close" data-dismiss="alert" href="#" title="Close"></a>
    </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>
</div>

<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.
      <a class="adb-local_alert--close" data-dismiss="alert" href="#" title="Close"></a>
    </p>
  </div>
</div>

<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.
      <a class="adb-local_alert--close" data-dismiss="alert" href="#" title="Close"></a>
    </p>
  </div>
</div>

<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!
      <a class="adb-local_alert--close" data-dismiss="alert" href="#" title="Close"></a>
    </p>
  </div>
</div>

<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.
      <a class="adb-local_alert--close" data-dismiss="alert" href="#" title="Close"></a>
    </p>
  </div>
</div>

<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>

<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>

<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>