From 80f1f6d871ba7400f4287f7956d32be94a61f0c5 Mon Sep 17 00:00:00 2001
From: Rachel <rachel@pantheon.io>
Date: Tue, 11 Feb 2025 13:53:41 -0600
Subject: [PATCH] Fix enablement styles (#9421)

* Use callouts info styling for enablements

* Apply Prettier formatting

* Move href out of the header

* Apply Prettier formatting
---
 src/components/enablement/index.js | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/enablement/index.js b/src/components/enablement/index.js
index 82d6656bd1..4d9a4cff2f 100644
--- a/src/components/enablement/index.js
+++ b/src/components/enablement/index.js
@@ -1,23 +1,24 @@
-import React from "react"
+import React from 'react';
+import { Callout } from '@pantheon-systems/pds-toolkit-react';
 import './style.css';
 
 const Enablement = ({ title, link, campaign, children }) => {
-
   function _handleClick() {
-    if (window.analytics){
-      window.analytics.track("Docs Enablement Clicked", {
-          campaign: {campaign},
+    if (window.analytics) {
+      window.analytics.track('Docs Enablement Clicked', {
+        campaign: { campaign },
       });
     }
   }
   return (
-    <div className="enablement">
-      <h4 className="info">
-        <a href={link} className="external" onClick={_handleClick}>{title}</a>
-      </h4>
-      {children}
-    </div>
-  )
-}
+    <Callout children={children} type="info" className="docs-alert">
+      <h4>{title}</h4>
+      {children}{' '}
+      <a href={link} onClick={_handleClick}>
+        Learn more
+      </a>
+    </Callout>
+  );
+};
 
-export default Enablement
+export default Enablement;