diff --git a/composer.json b/composer.json
index 8a4aa618..90867ca3 100755
--- a/composer.json
+++ b/composer.json
@@ -21,6 +21,7 @@
         "drupal/acquia_purge": "^1.3",
         "drupal/address": "~1.0",
         "drupal/admin_toolbar": "^3.4",
+        "drupal/color_field": "^3.0",
         "drupal/config_ignore": "^2.4",
         "drupal/config_split": "^1.9",
         "drupal/core-composer-scaffold": "^10",
diff --git a/composer.lock b/composer.lock
index 74d78a4c..a8b21d48 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "d7f461f6537318e3593741ec104c6400",
+    "content-hash": "a4642f8281694a7450a28ed890aa4601",
     "packages": [
         {
             "name": "acquia/acquia-cms-starterkit",
@@ -2492,6 +2492,58 @@
                 "issues": "https://www.drupal.org/project/issues/admin_toolbar"
             }
         },
+        {
+            "name": "drupal/color_field",
+            "version": "3.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/color_field.git",
+                "reference": "3.0.0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/color_field-3.0.0.zip",
+                "reference": "3.0.0",
+                "shasum": "7a72fde925bc777b292aef7afa4ceb98d46cc0b5"
+            },
+            "require": {
+                "drupal/core": "^9 || ^10"
+            },
+            "require-dev": {
+                "drupal/token": "*"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "3.0.0",
+                    "datestamp": "1671324231",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "NickDickinsonWilde",
+                    "homepage": "https://www.drupal.org/user/3094661"
+                },
+                {
+                    "name": "targoo",
+                    "homepage": "https://www.drupal.org/user/431910"
+                }
+            ],
+            "description": "Provides a color field type to store the color value and opacity.",
+            "homepage": "https://www.drupal.org/project/color_field",
+            "support": {
+                "source": "https://git.drupalcode.org/project/color_field",
+                "error": "require-dev.drupal/feeds : invalid version constraint (Could not parse version constraint : Invalid version string \"\")"
+            }
+        },
         {
             "name": "drupal/config_filter",
             "version": "1.10.0",
diff --git a/config/default/core.entity_form_display.paragraph.cta.default.yml b/config/default/core.entity_form_display.paragraph.cta.default.yml
new file mode 100644
index 00000000..7e10937e
--- /dev/null
+++ b/config/default/core.entity_form_display.paragraph.cta.default.yml
@@ -0,0 +1,53 @@
+uuid: 1c7b8286-095a-4dbc-b3b9-7f3683bc509d
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.field.paragraph.cta.field_background_color
+    - field.field.paragraph.cta.field_body
+    - field.field.paragraph.cta.field_link
+    - field.field.paragraph.cta.field_title
+    - paragraphs.paragraphs_type.cta
+  module:
+    - color_field
+    - link
+    - text
+id: paragraph.cta.default
+targetEntityType: paragraph
+bundle: cta
+mode: default
+content:
+  field_background_color:
+    type: color_field_widget_box
+    weight: 0
+    region: content
+    settings:
+      default_colors: '#ac725e,#d06b64,#f83a22,#fa573c,#ff7537,#ffad46,#42d692,#16a765,#7bd148,#b3dc6c,#fbe983,#92e1c0,#9fe1e7,#9fc6e7,#4986e7,#9a9cff,#b99aff,#c2c2c2,#cabdbf,#cca6ac,#f691b2,#cd74e6,#a47ae2'
+    third_party_settings: {  }
+  field_body:
+    type: text_textarea
+    weight: 2
+    region: content
+    settings:
+      rows: 5
+      placeholder: ''
+    third_party_settings: {  }
+  field_link:
+    type: link_default
+    weight: 3
+    region: content
+    settings:
+      placeholder_url: ''
+      placeholder_title: ''
+    third_party_settings: {  }
+  field_title:
+    type: string_textfield
+    weight: 1
+    region: content
+    settings:
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
+hidden:
+  created: true
+  status: true
diff --git a/config/default/core.entity_view_display.paragraph.cta.default.yml b/config/default/core.entity_view_display.paragraph.cta.default.yml
new file mode 100644
index 00000000..b3752804
--- /dev/null
+++ b/config/default/core.entity_view_display.paragraph.cta.default.yml
@@ -0,0 +1,56 @@
+uuid: eaef19bd-617a-4ac0-883a-c39c03859158
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.field.paragraph.cta.field_background_color
+    - field.field.paragraph.cta.field_body
+    - field.field.paragraph.cta.field_link
+    - field.field.paragraph.cta.field_title
+    - paragraphs.paragraphs_type.cta
+  module:
+    - color_field
+    - link
+    - text
+id: paragraph.cta.default
+targetEntityType: paragraph
+bundle: cta
+mode: default
+content:
+  field_background_color:
+    type: color_field_formatter_text
+    label: hidden
+    settings:
+      format: hex
+      opacity: true
+    third_party_settings: {  }
+    weight: 3
+    region: content
+  field_body:
+    type: text_default
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+    weight: 1
+    region: content
+  field_link:
+    type: link_separate
+    label: hidden
+    settings:
+      trim_length: 80
+      url_only: false
+      url_plain: false
+      rel: ''
+      target: ''
+    third_party_settings: {  }
+    weight: 2
+    region: content
+  field_title:
+    type: string
+    label: hidden
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    weight: 0
+    region: content
+hidden: {  }
diff --git a/config/default/core.extension.yml b/config/default/core.extension.yml
index 05cde5e1..0f32842e 100644
--- a/config/default/core.extension.yml
+++ b/config/default/core.extension.yml
@@ -9,6 +9,7 @@ module:
   block_content: 0
   breakpoint: 0
   ckeditor5: 0
+  color_field: 0
   config: 0
   config_filter: 0
   config_ignore: 0
diff --git a/config/default/field.field.paragraph.cta.field_background_color.yml b/config/default/field.field.paragraph.cta.field_background_color.yml
new file mode 100644
index 00000000..52758c68
--- /dev/null
+++ b/config/default/field.field.paragraph.cta.field_background_color.yml
@@ -0,0 +1,22 @@
+uuid: 2ac55eab-5f61-482a-b345-302d0b36635d
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_background_color
+    - paragraphs.paragraphs_type.cta
+  module:
+    - color_field
+id: paragraph.cta.field_background_color
+field_name: field_background_color
+entity_type: paragraph
+bundle: cta
+label: 'Background Color'
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  opacity: 0
+field_type: color_field_type
diff --git a/config/default/field.field.paragraph.cta.field_body.yml b/config/default/field.field.paragraph.cta.field_body.yml
new file mode 100644
index 00000000..3e3b59ec
--- /dev/null
+++ b/config/default/field.field.paragraph.cta.field_body.yml
@@ -0,0 +1,24 @@
+uuid: 5b299156-55e3-4db8-be22-d1bbe5427e72
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_body
+    - filter.format.full
+    - paragraphs.paragraphs_type.cta
+  module:
+    - text
+id: paragraph.cta.field_body
+field_name: field_body
+entity_type: paragraph
+bundle: cta
+label: Body
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  allowed_formats:
+    - full
+field_type: text_long
diff --git a/config/default/field.field.paragraph.cta.field_link.yml b/config/default/field.field.paragraph.cta.field_link.yml
new file mode 100644
index 00000000..ae5857b0
--- /dev/null
+++ b/config/default/field.field.paragraph.cta.field_link.yml
@@ -0,0 +1,23 @@
+uuid: da023021-3a82-4e7e-a46f-63eb5905d486
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_link
+    - paragraphs.paragraphs_type.cta
+  module:
+    - link
+id: paragraph.cta.field_link
+field_name: field_link
+entity_type: paragraph
+bundle: cta
+label: Link
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  title: 2
+  link_type: 17
+field_type: link
diff --git a/config/default/field.field.paragraph.cta.field_title.yml b/config/default/field.field.paragraph.cta.field_title.yml
new file mode 100644
index 00000000..ae37bdc4
--- /dev/null
+++ b/config/default/field.field.paragraph.cta.field_title.yml
@@ -0,0 +1,19 @@
+uuid: 7ed3b82e-b2b4-421a-a220-4536e0b79486
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_title
+    - paragraphs.paragraphs_type.cta
+id: paragraph.cta.field_title
+field_name: field_title
+entity_type: paragraph
+bundle: cta
+label: Title
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: string
diff --git a/config/default/field.storage.paragraph.field_background_color.yml b/config/default/field.storage.paragraph.field_background_color.yml
new file mode 100644
index 00000000..2d589e22
--- /dev/null
+++ b/config/default/field.storage.paragraph.field_background_color.yml
@@ -0,0 +1,20 @@
+uuid: fb8caee7-c61c-43cd-bd6e-17d04de56e2e
+langcode: en
+status: true
+dependencies:
+  module:
+    - color_field
+    - paragraphs
+id: paragraph.field_background_color
+field_name: field_background_color
+entity_type: paragraph
+type: color_field_type
+settings:
+  format: '#HEXHEX'
+module: color_field
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false
diff --git a/config/default/field.storage.paragraph.field_body.yml b/config/default/field.storage.paragraph.field_body.yml
new file mode 100644
index 00000000..b77b1ce2
--- /dev/null
+++ b/config/default/field.storage.paragraph.field_body.yml
@@ -0,0 +1,19 @@
+uuid: 74e7285b-36e0-4039-8f11-3df35acb4101
+langcode: en
+status: true
+dependencies:
+  module:
+    - paragraphs
+    - text
+id: paragraph.field_body
+field_name: field_body
+entity_type: paragraph
+type: text_long
+settings: {  }
+module: text
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false
diff --git a/config/default/field.storage.paragraph.field_link.yml b/config/default/field.storage.paragraph.field_link.yml
new file mode 100644
index 00000000..d337f3f6
--- /dev/null
+++ b/config/default/field.storage.paragraph.field_link.yml
@@ -0,0 +1,19 @@
+uuid: 1c9f9399-63a4-4123-815b-0f99a7d9a764
+langcode: en
+status: true
+dependencies:
+  module:
+    - link
+    - paragraphs
+id: paragraph.field_link
+field_name: field_link
+entity_type: paragraph
+type: link
+settings: {  }
+module: link
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false
diff --git a/config/default/paragraphs.paragraphs_type.cta.yml b/config/default/paragraphs.paragraphs_type.cta.yml
new file mode 100644
index 00000000..3a78f635
--- /dev/null
+++ b/config/default/paragraphs.paragraphs_type.cta.yml
@@ -0,0 +1,10 @@
+uuid: aba47437-a28d-4cc7-973b-3cd355911252
+langcode: en
+status: true
+dependencies: {  }
+id: cta
+label: CTA
+icon_uuid: null
+icon_default: null
+description: ''
+behavior_plugins: {  }
diff --git a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css
new file mode 100644
index 00000000..ce1f78d8
--- /dev/null
+++ b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.css
@@ -0,0 +1,22 @@
+.paragraph--type--cta {
+  border-radius: 45px;
+}
+.paragraph--type--cta .cta--wrapper {
+  display: flex;
+  flex-direction: row;
+  padding: 50px 75px;
+  -moz-column-gap: 40px;
+       column-gap: 40px;
+}
+.paragraph--type--cta .wrapper-left {
+  flex: 1 1 auto;
+}
+.paragraph--type--cta .wrapper-right {
+  display: flex;
+  align-items: center;
+  flex: 1 0 auto;
+}
+.paragraph--type--cta .field--name-field-title {
+  font-weight: 800;
+  font-size: var(--h2);
+}
\ No newline at end of file
diff --git a/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss
new file mode 100644
index 00000000..bbe4f067
--- /dev/null
+++ b/docroot/themes/custom/drupal4gov/components/paragraph--cta/paragraph--cta.scss
@@ -0,0 +1,25 @@
+.paragraph--type--cta {
+  border-radius: 45px;
+
+  .cta--wrapper {
+    display: flex;
+    flex-direction: row;
+    padding: 50px 75px;
+    column-gap: 40px;
+  }
+
+  .wrapper-left {
+    flex: 1 1 auto;
+  }
+
+  .wrapper-right {
+    display: flex;
+    align-items: center;
+    flex: 1 0 auto;
+  }
+
+  .field--name-field-title {
+    font-weight: 800;
+    font-size: var(--h2);
+  }
+}
diff --git a/docroot/themes/custom/drupal4gov/drupal4gov.libraries.yml b/docroot/themes/custom/drupal4gov/drupal4gov.libraries.yml
index 25828527..f7e3929d 100644
--- a/docroot/themes/custom/drupal4gov/drupal4gov.libraries.yml
+++ b/docroot/themes/custom/drupal4gov/drupal4gov.libraries.yml
@@ -24,3 +24,8 @@ drupal.message:
     components/messages/messages.theme.js: {}
   dependencies:
     - drupal4gov/messages
+
+paragraph--cta:
+  css:
+    base:      
+      components/paragraph--cta/paragraph--cta.css: {}
diff --git a/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig b/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig
new file mode 100644
index 00000000..38d8baf2
--- /dev/null
+++ b/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph--cta.html.twig
@@ -0,0 +1,63 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a paragraph.
+ *
+ * Available variables:
+ * - paragraph: Full paragraph entity.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
+ *   - paragraph.id(): The paragraph ID.
+ *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
+ *   - paragraph.getOwnerId(): The user ID of the paragraph author.
+ *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
+ *   and methods for the paragraph object.
+ * - content: All paragraph items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - paragraphs: The current template type (also known as a "theming hook").
+ *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
+ *     "Image" it would result in "paragraphs--type--image". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
+ *     preview would result in: "paragraphs--view-mode--preview", and
+ *     default: "paragraphs--view-mode--default".
+ * - view_mode: View mode; for example, "preview" or "full".
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_paragraph()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'paragraph',
+    'paragraph--type--' ~ paragraph.bundle|clean_class,
+    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
+    not paragraph.isPublished() ? 'paragraph--unpublished'
+  ]
+%}
+{{ attach_library('drupal4gov/paragraph--cta') }}
+{% block paragraph %}
+  <div{{ attributes.addClass(classes) }} {% if content.field_background_color|render %}style="background-color: {{ content.field_background_color.0 }}" {% endif %}>
+    {% block content %}
+      <div class="cta--wrapper">
+        <div class="wrapper-left">
+          {{ content|without('field_link', 'field_background_color') }}
+        </div>
+        <div class="wrapper-right">
+          <a href="{{ content.field_link[0]['#url'] }}" class="button">{{ content.field_link[0]['#title'] }}</a>
+        </div>
+      </div>
+    {% endblock %}
+  </div>
+{% endblock paragraph %}
diff --git a/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph.html.twig b/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph.html.twig
new file mode 100644
index 00000000..fa3ba93f
--- /dev/null
+++ b/docroot/themes/custom/drupal4gov/templates/paragraphs/paragraph.html.twig
@@ -0,0 +1,55 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a paragraph.
+ *
+ * Available variables:
+ * - paragraph: Full paragraph entity.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
+ *   - paragraph.id(): The paragraph ID.
+ *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
+ *   - paragraph.getOwnerId(): The user ID of the paragraph author.
+ *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
+ *   and methods for the paragraph object.
+ * - content: All paragraph items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - paragraphs: The current template type (also known as a "theming hook").
+ *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
+ *     "Image" it would result in "paragraphs--type--image". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
+ *     preview would result in: "paragraphs--view-mode--preview", and
+ *     default: "paragraphs--view-mode--default".
+ * - view_mode: View mode; for example, "preview" or "full".
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_paragraph()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'paragraph',
+    'paragraph--type--' ~ paragraph.bundle|clean_class,
+    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
+    not paragraph.isPublished() ? 'paragraph--unpublished'
+  ]
+%}
+{% block paragraph %}
+  <div{{ attributes.addClass(classes) }}>
+    {% block content %}
+      {{ content }}
+    {% endblock %}
+  </div>
+{% endblock paragraph %}