CTA Block component (#5196)

Co-authored-by: Bartek Szopka <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.14.1",
+  "version": "4.15.0",
   "author": {
     "email": "[email protected]",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.15.0
+  features:
+    - component: CTA Block
+      url: /docs/patterns/cta-block
+      status: New
+      notes: We've introduced a new CTA block component.
 - version: 4.14.0
   features:
     - component: Links / Anchor headings

scss/_patterns_cta.scss

@@ -0,0 +1,20 @@
+/*
+  @classreference
+  cta-block:
+    CTA Block:
+      .p-cta-block:
+        Main element of the CTA block.
+*/
+
+@import 'settings';
+
+@mixin vf-p-cta-block {
+  .p-cta-block {
+    align-items: baseline;
+    border-top: 1px solid $colors--theme--border-low-contrast;
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: $spv--x-large;
+    padding-top: $spv--small;
+  }
+}

scss/_vanilla.scss

@@ -11,6 +11,7 @@
 @import 'patterns_chip';
 @import 'patterns_code-snippet';
 @import 'patterns_contextual-menu';
+@import 'patterns_cta';
 @import 'patterns_divider';
 @import 'patterns_equal-height-row';
 @import 'patterns_form-help-text';
@@ -104,6 +105,7 @@
   @include vf-p-chip;
   @include vf-p-code-snippet;
   @include vf-p-contextual-menu;
+  @include vf-p-cta-block;
   @include vf-p-divider;
   @include vf-p-equal-height-row;
   @include vf-p-form-help-text;

scss/standalone/patterns_cta.scss

@@ -0,0 +1,5 @@
+@import '../vanilla';
+@include vf-base;
+
+@include vf-p-cta-block;
+@include vf-p-buttons;

side-navigation.yaml

@@ -27,7 +27,6 @@
       url: /docs/base/typography
     - title: Paper background
       url: /docs/base/paper
-
 - heading: Components
   ordering: alphabetical
   subheadings:
@@ -47,6 +46,8 @@
       url: /docs/patterns/chip
     - title: Contextual menu
       url: /docs/patterns/contextual-menu
+    - title: CTA Block
+      url: /docs/patterns/cta-block
     - title: Divider
       url: /docs/patterns/divider
     - title: Empty state

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

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

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

@@ -0,0 +1,32 @@
+---
+collection: patterns
+wrapper_template: '_layouts/docs.html'
+context:
+  title: CTA Block | Patterns
+---
+
+A CTA (call to action) block is a pattern that is used to encourage users to take a specific action. This could be to learn more details about a product, contact someone, or to download a file.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/cta-block/default" class="js-example">
+View example of the CTA block pattern
+</a></div>
+
+## Class reference
+
+{{ class_reference("cta-block") }}
+
+## Import
+
+To import just this component into your project, copy the snippet below and include it in your main Sass file.
+
+```scss
+// import Vanilla and include base mixins
+// this only needs to happen once in a given project
+@import 'vanilla-framework';
+@include vf-base;
+
+@include vf-p-cta-block;
+@include vf-p-buttons;
+```
+
+For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.