diff --git a/packages/core/src/components/CodeSnippet/CodeSnippet.stories.tsx b/packages/core/src/components/CodeSnippet/CodeSnippet.stories.tsx
index 1695b5d8c3..801836bd48 100644
--- a/packages/core/src/components/CodeSnippet/CodeSnippet.stories.tsx
+++ b/packages/core/src/components/CodeSnippet/CodeSnippet.stories.tsx
@@ -16,6 +16,7 @@
 
 import React from 'react';
 import CodeSnippet from './CodeSnippet';
+import InfoCard from '../../layout/InfoCard';
 
 export default {
   title: 'CodeSnippet',
@@ -50,32 +51,38 @@ greet(world)
 `;
 
 export const Default = () => (
-  <CodeSnippet text={"const hello = 'World';"} language="javascript" />
+  <InfoCard title="JavaScript example">
+    <CodeSnippet text={"const hello = 'World';"} language="javascript" />
+  </InfoCard>
 );
 
 export const MultipleLines = () => (
-  <CodeSnippet text={JAVASCRIPT} language="javascript" />
+  <InfoCard title="JavaScript multi-line example">
+    <CodeSnippet text={JAVASCRIPT} language="javascript" />
+  </InfoCard>
 );
 
 export const LineNumbers = () => (
-  <CodeSnippet text={JAVASCRIPT} language="javascript" showLineNumbers />
+  <InfoCard title="Show line numbers">
+    <CodeSnippet text={JAVASCRIPT} language="javascript" showLineNumbers />
+  </InfoCard>
 );
 
 export const Overflow = () => (
-  <>
+  <InfoCard title="Overflow">
     <div style={containerStyle}>
       <CodeSnippet text={JAVASCRIPT} language="javascript" />
     </div>
     <div style={containerStyle}>
       <CodeSnippet text={JAVASCRIPT} language="javascript" showLineNumbers />
     </div>
-  </>
+  </InfoCard>
 );
 
 export const Languages = () => (
-  <>
+  <InfoCard title="Multiple languages">
     <CodeSnippet text={JAVASCRIPT} language="javascript" showLineNumbers />
     <CodeSnippet text={TYPESCRIPT} language="typescript" showLineNumbers />
     <CodeSnippet text={PYTHON} language="python" showLineNumbers />
-  </>
+  </InfoCard>
 );
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index bb5eb25303..7a75c72ede 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -18,6 +18,7 @@ export * from './api';
 export { default as Page } from './layout/Page';
 export { gradients, pageTheme } from './layout/Page';
 export type { PageTheme } from './layout/Page';
+export { default as CodeSnippet } from './components/CodeSnippet';
 export { default as Content } from './layout/Content/Content';
 export { default as ContentHeader } from './layout/ContentHeader/ContentHeader';
 export { default as Header } from './layout/Header/Header';