Add upgrade CTA mixin

_includes/upgrade-cta.html

@@ -0,0 +1,9 @@
+<div class="docker-upgrade-cta" role="alert">
+  <div class="docker-upgrade-cta__heading">This feature requires a Pro or Team plan.</div>
+
+  {{ include.body | markdownify }}
+
+  <a class="btn btn-primary" role="button" href="{{include.target-url}}">
+    Upgrade my plan
+  </a>
+</div>

_scss/_upgrade-cta.scss

@@ -0,0 +1,18 @@
+.docker-upgrade-cta {
+  background-color: $orange-10;
+
+  padding: 16px 25px;
+  margin: 0 0 20px;
+
+  border-radius: 4px;
+  border: 1px solid $orange-20;
+
+  .docker-upgrade-cta__heading {
+    font-weight: bold;
+    font-size: 16px;
+
+    font-family: $headings;
+
+    margin-top: 0;
+  }
+}

css/style.scss

@@ -18,3 +18,4 @@
 @import "overrides";
 @import "mobile";
 @import "notes";
+@import "upgrade-cta";

test.md

@@ -659,6 +659,17 @@ It will render like this  with a colored sidebar and icon:
 
 ![warning admonition example](/images/warning-admonition-example.png)
 
+## Upgrade CTA
+
+Use the `upgrade-cta.html` include to render a CTA asking the user to upgrade their plan. There are two parameters:
+
+- `target-url`: This will typically be something like https://www.docker.com/pricing, possibly with a utm code.
+- `body`: This forms the body of the CTA. It accepts Markdown. To use multi-line bodies, use named captures as explained in [the Jekyll docs](https://jekyllrb.com/docs/includes/#passing-parameter-variables-to-includes).
+
+```
+{% include upgrade-cta.html body="Upgrade to gain access to this feature" target-url="https://www.example.com/" %}
+```
+
 ## Code blocks
 
 Rouge provides lots of different code block "hints". If you leave off the hint,