Update Callout docs on new docs site

ryankeairns · ryankeairns · commit b017b444a64a · 2025-02-04T11:37:09.000-08:00
diff --git a/packages/eui/i18ntokens.json b/packages/eui/i18ntokens.json
@@ -347,14 +347,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 89,
+        "line": 95,
         "column": 8,
-        "index": 2542
+        "index": 2565
       },
       "end": {
-        "line": 92,
+        "line": 98,
         "column": 9,
-        "index": 2647
+        "index": 2670
       }
     },
     "filepath": "src/components/call_out/call_out.tsx"
diff --git a/packages/eui/src/components/call_out/__snapshots__/call_out.test.tsx.snap b/packages/eui/src/components/call_out/__snapshots__/call_out.test.tsx.snap
@@ -14,6 +14,12 @@ exports[`EuiCallOut is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiCallOut props color accent is rendered 1`] = `
+<div
+  class="euiPanel euiPanel--accent euiPanel--paddingMedium euiCallOut euiCallOut--accent emotion-euiPanel-none-m-accent-euiCallOut"
+/>
+`;
+
 exports[`EuiCallOut props color danger is rendered 1`] = `
 <div
   class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCallOut euiCallOut--danger emotion-euiPanel-none-m-danger-euiCallOut"
diff --git a/packages/website/docs/components/display/callout.mdx b/packages/website/docs/components/display/callout.mdx
@@ -115,6 +115,26 @@ export default () => (
 );
 ```
 
+## Accent
+
+Use this callout to announce new capabilities. For example if you want to highlight a feature.
+
+```tsx interactive
+import React from 'react';
+import { EuiCallOut, EuiLink } from '@elastic/eui';
+
+export default () => (
+  <EuiCallOut title="Shiny new thing has arrived" color="accent" iconType="cheer">
+    <p>
+      Dull thing can now be forgotten.{' '}
+      <EuiLink external href="#">
+        Learn more
+      </EuiLink>.
+    </p>
+  </EuiCallOut>
+);
+```
+
 ## Dismissible callouts
 
 To render a cross icon in the top right hand corner, pass an `onDismiss` callback that handles conditionally rendering your callout.
