diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx
index 6950f5222208..bc8a976d4819 100644
--- a/src-docs/src/views/timeline/timeline.tsx
+++ b/src-docs/src/views/timeline/timeline.tsx
@@ -5,7 +5,7 @@ import {
   EuiTimelineItemPanel,
 } from '../../../../src/components/timeline';
 
-const body = <EuiTimelineItemPanel paddingSize="s">Lorem</EuiTimelineItemPanel>;
+const body = <EuiTimelineItemPanel>Lorem</EuiTimelineItemPanel>;
 
 const items: EuiTimelineProps['items'] = [
   {
diff --git a/src-docs/src/views/timeline/timeline_complex.tsx b/src-docs/src/views/timeline/timeline_complex.tsx
index 46d0162fad11..ce26f89e3f10 100644
--- a/src-docs/src/views/timeline/timeline_complex.tsx
+++ b/src-docs/src/views/timeline/timeline_complex.tsx
@@ -9,8 +9,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiLink,
-  EuiMarkdownEditor,
   EuiPanel,
   EuiBadge,
   EuiTitle,
@@ -22,7 +20,6 @@ export default () => {
   const [checked1, setChecked1] = useState(false);
   const [checked2, setChecked2] = useState(false);
   const [checked3, setChecked3] = useState(false);
-  const toggleTextSwitchId = useGeneratedHtmlId({ prefix: 'toggleTextSwitch' });
   const buttonElementAccordionId = useGeneratedHtmlId({
     prefix: 'buttonElementAccordion',
   });
diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js
index f542bc7c15bd..129aa52607a2 100644
--- a/src-docs/src/views/timeline/timeline_example.js
+++ b/src-docs/src/views/timeline/timeline_example.js
@@ -69,17 +69,17 @@ export const TimelineExample = {
       text: (
         <div>
           <p>
-            Use <strong>EuiTimelineItem</strong>to display timeline items. Each
-            EuiTimelineItem accepts two props: <EuiCode>icon</EuiCode>icon and{' '}
-            <EuiCode>children</EuiCode>. For the children, we recommend the
-            usage of a{' '}
+            Use <strong>EuiTimelineItem</strong> to display timeline items. Each{' '}
+            <strong>EuiTimelineItem</strong> accepts two props:{' '}
+            <EuiCode>icon</EuiCode> and <EuiCode>children</EuiCode>. For the{' '}
+            <EuiCode>children</EuiCode>, we recommend the usage of a{' '}
+            <strong>EuiTimelineItemPanel</strong> but you can use any other
+            component. If you use a{' '}
             <Link to="/layout/panel">
               <strong>EuiPanel</strong>
-            </Link>{' '}
-            with <EuiCode>hasBorder</EuiCode> set to true or with color{' '}
-            <EuiCode>{'"transparent"'}</EuiCode>. Try to avoid passing the color{' '}
-            <EuiCode>{'"plain"'}</EuiCode>. This color adds a shadow that is not
-            suitable for this component.
+            </Link>
+            , try to avoid passing the color <EuiCode>{'"plain"'}</EuiCode>.
+            This color adds a shadow that is not suitable for this component.
           </p>
         </div>
       ),
@@ -104,8 +104,8 @@ export const TimelineExample = {
             <Link to="/layout/panel">
               <strong>EuiPanel</strong>
             </Link>{' '}
-            and it&apos;s the perfect building block to create any type os
-            timelines.
+            and it&apos;s the recommended component to use in{' '}
+            <EuiCode>EuiTimelineItem.children</EuiCode>.
           </p>
         </div>
       ),