diff --git a/src-docs/src/views/comment/comment_types.tsx b/src-docs/src/views/comment/comment_types.tsx
index 2d9557719a7..1ebd29824e6 100644
--- a/src-docs/src/views/comment/comment_types.tsx
+++ b/src-docs/src/views/comment/comment_types.tsx
@@ -21,7 +21,7 @@ const bodyUpdate = (
export default () => (
-
+
{body}
-
-
+
+
`;
@@ -63,10 +63,10 @@ exports[`EuiComment props event is rendered 1`] = `
-
+
+
`;
@@ -116,10 +116,10 @@ exports[`EuiComment props timelineIcon is rendered 1`] = `
-
-
+
+
`;
@@ -158,10 +158,10 @@ exports[`EuiComment props timestamp is rendered 1`] = `
-
-
+
+
`;
@@ -249,10 +249,10 @@ exports[`EuiComment renders a body 1`] = `
-
+
@@ -275,6 +275,6 @@ exports[`EuiComment renders a body 1`] = `
This is the body.
-
+
`;
diff --git a/src/components/comment/__snapshots__/comment_event.test.tsx.snap b/src/components/comment/__snapshots__/comment_event.test.tsx.snap
index d614313b717..2a8600d3077 100644
--- a/src/components/comment/__snapshots__/comment_event.test.tsx.snap
+++ b/src/components/comment/__snapshots__/comment_event.test.tsx.snap
@@ -1,12 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EuiCommentEvent is rendered 1`] = `
-
-
+
+
`;
exports[`EuiCommentEvent props event is rendered 1`] = `
-
+
+
`;
exports[`EuiCommentEvent props timestamp is rendered 1`] = `
-
-
+
+
`;
exports[`EuiCommentEvent props type is rendered 1`] = `
diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx
index 4005b66f980..1cff87e2bc0 100644
--- a/src/components/comment/comment_event.tsx
+++ b/src/components/comment/comment_event.tsx
@@ -50,9 +50,17 @@ export const EuiCommentEvent: FunctionComponent = ({
className
);
+ const Element =
+ type === 'regular' || (type === 'update' && children) ? 'figure' : 'div';
+
+ const HeaderElement =
+ type === 'regular' || (type === 'update' && children)
+ ? 'figcaption'
+ : 'div';
+
return (
-
-
+
+
{username}
{event}
@@ -69,12 +77,12 @@ export const EuiCommentEvent: FunctionComponent
= ({
) : (
undefined
)}
-
+
{children ? (
{children}
) : (
undefined
)}
-
+
);
};