Add borderless CTA block variant (#5278)

* Add borderless CTA block variant

* Remove top padding from borderless CTA

* Update to 4.16.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.16.0
+  features:
+    - component: CTA Block / Borderless
+      url: /docs/patterns/cta-block#borderless
+      status: New
+      notes: We've introduced a new borderless variant of the CTA block component.
 - version: 4.15.0
   features:
     - component: CTA Block

scss/_patterns_cta.scss

@@ -4,6 +4,8 @@
     CTA Block:
       .p-cta-block:
         Main element of the CTA block.
+      "&.is-borderless":
+        Borderless variant, to be used to hide top border and padding.
 */
 
 @import 'settings';
@@ -16,5 +18,10 @@
     flex-wrap: wrap;
     padding-bottom: $spv--x-large;
     padding-top: $spv--small;
+
+    &.is-borderless {
+      border: none;
+      padding-top: 0;
+    }
   }
 }

templates/docs/examples/patterns/cta-block/borderless.html

@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+
+{% block title %}CTA Block / Borderless{% endblock %}
+
+{% block standalone_css %}patterns_cta{% endblock %}
+
+{% block content %}
+<div class="p-cta-block is-borderless">
+  <a href="#" class="p-button--positive">Learn more</a>
+  <a href="#">Contact us ›</a>
+</div>
+{% endblock %}

templates/docs/examples/patterns/cta-block/combined.html

@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}CTA Block / Combined{% endblock %}
+
+{% block standalone_css %}patterns_cta{% endblock %}
+
+{% block content %}
+{% with is_combined = true %}
+<section>{% include 'docs/examples/patterns/cta-block/default.html' %}</section>
+<section>{% include 'docs/examples/patterns/cta-block/borderless.html' %}</section>
+{% endwith %}
+{% endblock %}

templates/docs/examples/patterns/cta-block/default.html

@@ -1,6 +1,6 @@
 {% extends "_layouts/examples.html" %}
 
-{% block title %}CTA Block{% endblock %}
+{% block title %}CTA Block / Default{% endblock %}
 
 {% block standalone_css %}patterns_cta{% endblock %}
 

templates/docs/patterns/cta-block/index.md

@@ -11,6 +11,14 @@ A CTA (call to action) block is a pattern that is used to encourage users to tak
 View example of the CTA block pattern
 </a></div>
 
+## Borderless
+
+The CTA block can be used without a border. This is useful when the CTA block is stacked beneath related content.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/cta-block/borderless" class="js-example">
+View example of the CTA block pattern with no border
+</a></div>
+
 ## Class reference
 
 {{ class_reference("cta-block") }}