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

@@ -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;