<div class="experimental-pf">

  <div class="experimental-pf-bar">
    <span id="experimentalBar" class="experimental-pf-text">
      This feature is experimental.
      <a id="acceptMessage">Got it!</a>
    </span>
    <button class="experimental-pf-more-info">
      More info <i class="fa fa-flask"></i>
    </button>
  </div>

  <div class="blank-slate-pf">
    <div class="blank-slate-pf-icon">
      <i class="fa fa-flask"></i>
    </div>
    <h1>Empty State Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Learn more about this <a href="#">on the documentation</a>.</p>

    <div class="blank-slate-pf-main-action">
      <form class="form-horizontal">
        <div class="form-group">
          <input type="checkbox" name="accept" id="accept">
          <label for="accept" class="control-label">
            I agree to the terms of this feature, as written above.
          </label>
        </div>
      </form>
      <button class="btn btn-lg btn-experimental-pf" id="activateButton" disabled>Activate All Experimental Features</button>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  $("#acceptMessage").on("click", function() {
    $("#experimentalBar").addClass("hide");
  });
  $("#accept").click(function() {
    $("#activateButton").prop("disabled", !$(this).prop("checked"));
  });
});
</script>
