diff --git a/CHANGELOG.md b/CHANGELOG.md
index 12500a307e1..6169f16426b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added support for `href`, `onClick`, and related props in `EuiBasicTable` default actions ([#3115](https://github.com/elastic/eui/pull/3115))
 - Added support for `EuiCodeEditor` to set `readonly` and `id` on `<textarea />` ([#3212](https://github.com/elastic/eui/pull/3212))
+- Added `EuiComment` component ([#3179](https://github.com/elastic/eui/pull/3179))
 
 **Deprecation**
 
diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index e73038cd1ac..dca74ea2328 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -69,6 +69,8 @@ import { ColorPickerExample } from './views/color_picker/color_picker_example';
 
 import { ComboBoxExample } from './views/combo_box/combo_box_example';
 
+import { CommentExample } from './views/comment/comment_example';
+
 import { ContextMenuExample } from './views/context_menu/context_menu_example';
 
 import { ControlBarExample } from './views/control_bar/control_bar_example';
@@ -364,6 +366,7 @@ const navigation = [
       CallOutExample,
       CardExample,
       CodeExample,
+      CommentExample,
       DescriptionListExample,
       DragAndDropExample,
       EmptyPromptExample,
diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx
new file mode 100644
index 00000000000..e4260300150
--- /dev/null
+++ b/src-docs/src/views/comment/comment.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { EuiComment } from '../../../../src/components/comment';
+import { EuiAvatar } from '../../../../src/components/avatar';
+import { EuiBadge } from '../../../../src/components/badge';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiButtonIcon } from '../../../../src/components/button';
+import { EuiText } from '../../../../src/components/text';
+
+const body = (
+  <EuiText size="s">
+    <p>
+      Far out in the uncharted backwaters of the unfashionable end of the
+      western spiral arm of the Galaxy lies a small unregarded yellow sun.
+    </p>
+  </EuiText>
+);
+
+const longBody = (
+  <EuiText size="s">
+    <p>
+      This planet has - or rather had - a problem, which was this: most of the
+      people living on it were unhappy for pretty much of the time. Many
+      solutions were suggested for this problem, but most of these were largely
+      concerned with the movements of small green pieces of paper, which is odd
+      because on the whole it was not the small green pieces of paper that were
+      unhappy.
+    </p>
+  </EuiText>
+);
+
+const copyAction = (
+  <EuiButtonIcon
+    title="Custom action"
+    aria-label="Custom action"
+    color="subdued"
+    iconType="copy"
+  />
+);
+
+export default () => (
+  <div>
+    <EuiComment
+      username="janed"
+      event="added a comment"
+      actions={copyAction}
+      timestamp="on Jan 1, 2020">
+      {body}
+    </EuiComment>
+    <EuiComment
+      username="juanab"
+      type="update"
+      actions={copyAction}
+      event="pushed incident X0Z235"
+      timestamp="on Jan 3, 2020"
+      timelineIcon={
+        <EuiAvatar
+          imageUrl="https://source.unsplash.com/64x64/?woman"
+          size="l"
+          name="Juana"
+        />
+      }
+    />
+    <EuiComment
+      username="pancho1"
+      type="update"
+      event="edited case"
+      timestamp="on Jan 9, 2020"
+    />
+    <EuiComment
+      actions={copyAction}
+      username={
+        <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiAvatar size="s" type="space" name="Pedro" />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>pedror</EuiFlexItem>
+        </EuiFlexGroup>
+      }
+      type="update"
+      event={
+        <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
+          <EuiFlexItem grow={false}>added tags</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiBadge color="primary">sample</EuiBadge>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiBadge color="secondary">review</EuiBadge>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
+      timestamp="on Jan 11, 2020"
+      timelineIcon="tag"
+    />
+    <EuiComment
+      username="elohar"
+      event="added a comment"
+      actions={copyAction}
+      timestamp="on Jan 14, 2020"
+      timelineIcon={<EuiAvatar size="l" name="Eloha" />}>
+      {longBody}
+    </EuiComment>
+  </div>
+);
diff --git a/src-docs/src/views/comment/comment_actions.tsx b/src-docs/src/views/comment/comment_actions.tsx
new file mode 100644
index 00000000000..5ebf1cb178d
--- /dev/null
+++ b/src-docs/src/views/comment/comment_actions.tsx
@@ -0,0 +1,103 @@
+import React, { Component, HTMLAttributes } from 'react';
+import { EuiComment } from '../../../../src/components/comment';
+import { EuiButtonIcon } from '../../../../src/components/button';
+import { EuiText } from '../../../../src/components/text';
+import { EuiPopover } from '../../../../src/components/popover';
+import {
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+} from '../../../../src/components/context_menu';
+import { CommonProps } from '../../../../src/components/common';
+
+const body = (
+  <EuiText size="s">
+    <p>
+      This comment has custom actions available. See the upper right corner.
+    </p>
+  </EuiText>
+);
+
+export type CustomActionsProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {};
+
+interface CustomActionsState {
+  isPopoverOpen: boolean;
+}
+
+export default class extends Component<CustomActionsProps, CustomActionsState> {
+  state = {
+    isPopoverOpen: false,
+  };
+
+  togglePopover = () => {
+    this.setState(prevState => ({
+      isPopoverOpen: !prevState.isPopoverOpen,
+    }));
+  };
+
+  closePopover = () => {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  };
+
+  render() {
+    const { isPopoverOpen } = this.state;
+    const customActions = (
+      <EuiPopover
+        button={
+          <EuiButtonIcon
+            aria-label="Actions"
+            iconType="gear"
+            size="s"
+            color="text"
+            onClick={() => this.togglePopover()}
+          />
+        }
+        isOpen={isPopoverOpen}
+        closePopover={() => this.closePopover()}
+        panelPaddingSize="none"
+        anchorPosition="leftCenter">
+        <EuiContextMenuPanel
+          items={[
+            <EuiContextMenuItem
+              key="A"
+              icon="pencil"
+              onClick={() => {
+                this.closePopover();
+              }}>
+              Edit
+            </EuiContextMenuItem>,
+            <EuiContextMenuItem
+              key="B"
+              icon="share"
+              onClick={() => {
+                this.closePopover();
+              }}>
+              Share
+            </EuiContextMenuItem>,
+            <EuiContextMenuItem
+              key="C"
+              icon="copy"
+              onClick={() => {
+                this.closePopover();
+              }}>
+              Copy
+            </EuiContextMenuItem>,
+          ]}
+        />
+      </EuiPopover>
+    );
+    return (
+      <div>
+        <EuiComment
+          username="janed"
+          event="added a comment"
+          actions={customActions}
+          timestamp="Jan 1, 2020">
+          {body}
+        </EuiComment>
+      </div>
+    );
+  }
+}
diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js
new file mode 100644
index 00000000000..c112a2b91cd
--- /dev/null
+++ b/src-docs/src/views/comment/comment_example.js
@@ -0,0 +1,216 @@
+import React from 'react';
+
+import { Link } from 'react-router';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import { EuiCode, EuiComment } from '../../../../src/components';
+
+import Comment from './comment';
+const commentSource = require('!!raw-loader!./comment');
+const commentHtml = renderToHtml(Comment);
+
+import CommentTypes from './comment_types';
+const commentTypesSource = require('!!raw-loader!./comment_types');
+const commentTypesHtml = renderToHtml(CommentTypes);
+
+import CommentTimelineIcons from './comment_timelineIcons';
+const commentTimelineIconsSource = require('!!raw-loader!./comment_timelineIcons');
+const commentTimelineIconsHtml = renderToHtml(CommentTimelineIcons);
+
+import CommentActions from './comment_actions';
+const commentActionsSource = require('!!raw-loader!./comment_actions');
+const commentActionsHtml = renderToHtml(CommentActions);
+
+const commentSnippet = `<EuiComment username="janed">
+  {body}
+</EuiComment>`;
+
+const commentTypesSnippet = [
+  `<EuiComment username="janed">
+  {body}
+</EuiComment>
+`,
+  `<EuiComment type="update" username="janed" />
+`,
+  `<EuiComment type="update" username="janed">
+  {body}
+</EuiComment>
+`,
+];
+
+const commentTimelineIconsSnippet = [
+  `<EuiComment username="janed">
+  {body}
+</EuiComment>
+`,
+  `<EuiComment timelineIcon="tag" username="janed" />
+`,
+  `<EuiComment timelineIcon={
+    <EuiAvatar
+      name="Jane D"
+      size="l"
+    />
+  } username="janed">
+  {body}
+</EuiComment>
+`,
+];
+
+const commentActionsSnippet = `<EuiComment username="janed" actions={customActions}>
+  {body}
+</EuiComment>`;
+
+export const CommentExample = {
+  title: 'Comment',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: commentSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: commentHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            Use <strong>EuiComment</strong> to display comments. Each{' '}
+            <strong>EuiComment</strong> has two parts: a{' '}
+            <EuiCode>timelineIcon</EuiCode> on the left and content on the
+            right. The <EuiCode>timelineIcon</EuiCode> provides a visual
+            indication of the <EuiCode>type</EuiCode> of comment it is. For
+            example, it can be an icon that represents what action was performed
+            or it can be a user avatar. The content has a header with all the
+            relevant metadata and a body.
+          </p>
+        </div>
+      ),
+      props: { EuiComment },
+      snippet: commentSnippet,
+      demo: <Comment />,
+    },
+    {
+      title: 'Comment types',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: commentTypesSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: commentTypesHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            The default <EuiCode>type</EuiCode> of comment is
+            <EuiCode>regular</EuiCode> and displays a comment that a user has
+            written.
+          </p>
+          <p>
+            Change the type to <EuiCode>update</EuiCode> to display comments
+            that generally do not have a body and are logging actions that
+            either the user or the system has performed (e.g. &ldquo;jsmith
+            edited a case&rdquo; or &ldquo;kibanamachine added the review
+            label&rdquo;).
+          </p>
+        </div>
+      ),
+      props: { EuiComment },
+      snippet: commentTypesSnippet,
+      demo: <CommentTypes />,
+    },
+    {
+      title: 'Custom timeline icon',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: commentTimelineIconsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: commentTimelineIconsHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            There are three ways to use <EuiCode>timelineIcon</EuiCode>:
+          </p>
+          <ol>
+            <li>
+              Use the defaults; a user icon inside a large container for
+              <EuiCode>regular</EuiCode> comments; or a dot icon inside a small
+              container for <EuiCode>update</EuiCode> comments.
+            </li>
+            <li>
+              Pass a string with any of the icon types that{' '}
+              <strong>EuiIcon</strong> supports and it will receive the default
+              styling.
+            </li>
+            <li>
+              Pass any other element (e.g.{' '}
+              <Link to="/display/avatar">
+                <strong>EuiAvatar</strong>
+              </Link>
+              ). It is recommended not to use an element larger than 40x40.
+            </li>
+          </ol>
+        </div>
+      ),
+      props: { EuiComment },
+      snippet: commentTimelineIconsSnippet,
+      demo: <CommentTimelineIcons />,
+    },
+    {
+      title: 'Actions',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: commentActionsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: commentActionsHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            There are scenarios where you might want to allow the user to
+            perform <EuiCode>actions</EuiCode> related to each comment. Some
+            common <EuiCode>actions</EuiCode> include: editing, deleting,
+            sharing and copying. To add custom <EuiCode>actions</EuiCode> to a
+            comment, use the <EuiCode>actions</EuiCode>
+            prop. These will be placed to the right of the metadata in the
+            comment&apos;s header. You can use any element to display{' '}
+            <EuiCode>actions</EuiCode>. For example, for something simple you
+            can use{' '}
+            <Link to="/navigation/button">
+              <strong>EuiButtonIcon</strong>
+            </Link>{' '}
+            and for something more complex you can combine that with{' '}
+            <Link to="/layout/popover">
+              <strong>EuiPopover</strong>
+            </Link>{' '}
+            and{' '}
+            <Link to="/navigation/context-menu">
+              <strong>EuiContextMenu</strong>
+            </Link>
+            .
+          </p>
+        </div>
+      ),
+      props: { EuiComment },
+      snippet: commentActionsSnippet,
+      demo: <CommentActions />,
+    },
+  ],
+};
diff --git a/src-docs/src/views/comment/comment_timelineIcons.tsx b/src-docs/src/views/comment/comment_timelineIcons.tsx
new file mode 100644
index 00000000000..99ce2e0c4e6
--- /dev/null
+++ b/src-docs/src/views/comment/comment_timelineIcons.tsx
@@ -0,0 +1,68 @@
+import React, { Fragment } from 'react';
+import { EuiComment } from '../../../../src/components/comment';
+import { EuiText } from '../../../../src/components/text';
+import { EuiAvatar } from '../../../../src/components/avatar';
+import { EuiCode } from '../../../../src/components/code';
+
+const defaultBody = (
+  <EuiText size="s">
+    <p>
+      This comment and the one below are using the default{' '}
+      <EuiCode>timelineIcon</EuiCode>.
+    </p>
+  </EuiText>
+);
+
+const iconStringBody = (
+  <EuiText size="s">
+    <p>
+      This comment passed the string &ldquo;tag&rdquo; to the{' '}
+      <EuiCode>timelineIcon</EuiCode> prop.
+    </p>
+  </EuiText>
+);
+
+const customIconBody = (
+  <EuiText size="s">
+    <p>
+      This comment has a custom element as its <EuiCode>timelineIcon</EuiCode>.
+    </p>
+  </EuiText>
+);
+
+export default () => (
+  <Fragment>
+    <EuiComment
+      username="janed"
+      event="added a comment"
+      timestamp="Jan 1, 2020">
+      {defaultBody}
+    </EuiComment>
+    <EuiComment
+      username="pancho1"
+      type="update"
+      event="edited case"
+      timestamp="Jan 3, 2020"
+    />
+    <EuiComment
+      username="janed"
+      event="added a comment"
+      timestamp="Jan 1, 2020"
+      timelineIcon="tag">
+      {iconStringBody}
+    </EuiComment>
+    <EuiComment
+      username="juanab"
+      event="added a comment"
+      timestamp="Jan 3, 2020"
+      timelineIcon={
+        <EuiAvatar
+          imageUrl="https://source.unsplash.com/64x64/?woman"
+          size="l"
+          name="Juana"
+        />
+      }>
+      {customIconBody}
+    </EuiComment>
+  </Fragment>
+);
diff --git a/src-docs/src/views/comment/comment_types.tsx b/src-docs/src/views/comment/comment_types.tsx
new file mode 100644
index 00000000000..1ebd29824e6
--- /dev/null
+++ b/src-docs/src/views/comment/comment_types.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { EuiComment } from '../../../../src/components/comment';
+import { EuiText } from '../../../../src/components/text';
+import { EuiCode } from '../../../../src/components/code';
+
+const body = (
+  <EuiText size="s">
+    <p>
+      This is the body of a comment of type <EuiCode>regular</EuiCode>
+    </p>
+  </EuiText>
+);
+
+const bodyUpdate = (
+  <EuiText size="s">
+    <p>
+      Comments of type <EuiCode>update</EuiCode> can also have a body
+    </p>
+  </EuiText>
+);
+
+export default () => (
+  <div>
+    <EuiComment username="andred" event="added a comment" timestamp="yesterday">
+      {body}
+    </EuiComment>
+    <EuiComment
+      username="luisg"
+      type="update"
+      event="edited case"
+      timestamp="22 hours ago"
+    />
+    <EuiComment
+      username="milal"
+      type="update"
+      event="edited case"
+      timestamp="6 hours ago">
+      {bodyUpdate}
+    </EuiComment>
+  </div>
+);
diff --git a/src/components/comment/__snapshots__/comment.test.tsx.snap b/src/components/comment/__snapshots__/comment.test.tsx.snap
new file mode 100644
index 00000000000..a2293959a2c
--- /dev/null
+++ b/src/components/comment/__snapshots__/comment.test.tsx.snap
@@ -0,0 +1,280 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiComment is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiComment testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiCommentTimeline"
+  >
+    <div
+      class="euiCommentTimeline__content"
+    >
+      <div
+        class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
+      >
+        <div
+          data-euiicon-type="user"
+        />
+      </div>
+    </div>
+  </div>
+  <figure
+    class="euiCommentEvent euiCommentEvent--regular"
+  >
+    <figcaption
+      class="euiCommentEvent__header"
+    >
+      <div
+        class="euiCommentEvent__headerData"
+      >
+        <div
+          class="euiCommentEvent__headerUsername"
+        >
+          someuser
+        </div>
+        <div
+          class="euiCommentEvent__headerEvent"
+        />
+      </div>
+    </figcaption>
+  </figure>
+</div>
+`;
+
+exports[`EuiComment props event is rendered 1`] = `
+<div
+  class="euiComment"
+>
+  <div
+    class="euiCommentTimeline"
+  >
+    <div
+      class="euiCommentTimeline__content"
+    >
+      <div
+        class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
+      >
+        <div
+          data-euiicon-type="user"
+        />
+      </div>
+    </div>
+  </div>
+  <figure
+    class="euiCommentEvent euiCommentEvent--regular"
+  >
+    <figcaption
+      class="euiCommentEvent__header"
+    >
+      <div
+        class="euiCommentEvent__headerData"
+      >
+        <div
+          class="euiCommentEvent__headerUsername"
+        >
+          someuser
+        </div>
+        <div
+          class="euiCommentEvent__headerEvent"
+        >
+          commented
+        </div>
+      </div>
+    </figcaption>
+  </figure>
+</div>
+`;
+
+exports[`EuiComment props timelineIcon is rendered 1`] = `
+<div
+  class="euiComment"
+>
+  <div
+    class="euiCommentTimeline"
+  >
+    <div
+      class="euiCommentTimeline__content"
+    >
+      <div
+        class="euiCommentTimeline__icon--regular"
+      >
+        <div
+          aria-label="Mario"
+          class="euiAvatar euiAvatar--l euiAvatar--user"
+          style="background-image:none;background-color:#f1d86f;color:#000000"
+          title="Mario"
+        >
+          <span
+            aria-hidden="true"
+          >
+            M
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <figure
+    class="euiCommentEvent euiCommentEvent--regular"
+  >
+    <figcaption
+      class="euiCommentEvent__header"
+    >
+      <div
+        class="euiCommentEvent__headerData"
+      >
+        <div
+          class="euiCommentEvent__headerUsername"
+        >
+          someuser
+        </div>
+        <div
+          class="euiCommentEvent__headerEvent"
+        />
+      </div>
+    </figcaption>
+  </figure>
+</div>
+`;
+
+exports[`EuiComment props timestamp is rendered 1`] = `
+<div
+  class="euiComment"
+>
+  <div
+    class="euiCommentTimeline"
+  >
+    <div
+      class="euiCommentTimeline__content"
+    >
+      <div
+        class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
+      >
+        <div
+          data-euiicon-type="user"
+        />
+      </div>
+    </div>
+  </div>
+  <figure
+    class="euiCommentEvent euiCommentEvent--regular"
+  >
+    <figcaption
+      class="euiCommentEvent__header"
+    >
+      <div
+        class="euiCommentEvent__headerData"
+      >
+        <div
+          class="euiCommentEvent__headerUsername"
+        >
+          someuser
+        </div>
+        <div
+          class="euiCommentEvent__headerEvent"
+        />
+        <div
+          class="euiCommentEvent__headerTimestamp"
+        >
+          <time>
+            21 days ago
+          </time>
+        </div>
+      </div>
+    </figcaption>
+  </figure>
+</div>
+`;
+
+exports[`EuiComment props type is rendered 1`] = `
+<div
+  class="euiComment euiComment--update"
+>
+  <div
+    class="euiCommentTimeline"
+  >
+    <div
+      class="euiCommentTimeline__content"
+    >
+      <div
+        class="euiCommentTimeline__icon--default euiCommentTimeline__icon--update"
+      >
+        <div
+          data-euiicon-type="dot"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiCommentEvent euiCommentEvent--update"
+  >
+    <div
+      class="euiCommentEvent__header"
+    >
+      <div
+        class="euiCommentEvent__headerData"
+      >
+        <div
+          class="euiCommentEvent__headerUsername"
+        >
+          someuser
+        </div>
+        <div
+          class="euiCommentEvent__headerEvent"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiComment renders a body 1`] = `
+<div
+  class="euiComment euiComment--hasBody"
+>
+  <div
+    class="euiCommentTimeline"
+  >
+    <div
+      class="euiCommentTimeline__content"
+    >
+      <div
+        class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
+      >
+        <div
+          data-euiicon-type="user"
+        />
+      </div>
+    </div>
+  </div>
+  <figure
+    class="euiCommentEvent euiCommentEvent--regular"
+  >
+    <figcaption
+      class="euiCommentEvent__header"
+    >
+      <div
+        class="euiCommentEvent__headerData"
+      >
+        <div
+          class="euiCommentEvent__headerUsername"
+        >
+          someuser
+        </div>
+        <div
+          class="euiCommentEvent__headerEvent"
+        />
+      </div>
+    </figcaption>
+    <div
+      class="euiCommentEvent__body"
+    >
+      <p>
+        This is the body.
+      </p>
+    </div>
+  </figure>
+</div>
+`;
diff --git a/src/components/comment/__snapshots__/comment_event.test.tsx.snap b/src/components/comment/__snapshots__/comment_event.test.tsx.snap
new file mode 100644
index 00000000000..8c90835a202
--- /dev/null
+++ b/src/components/comment/__snapshots__/comment_event.test.tsx.snap
@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCommentEvent is rendered 1`] = `
+<figure
+  class="euiCommentEvent euiCommentEvent--regular testClass1 testClass2"
+>
+  <figcaption
+    class="euiCommentEvent__header"
+  >
+    <div
+      class="euiCommentEvent__headerData"
+    >
+      <div
+        class="euiCommentEvent__headerUsername"
+      >
+        someuser
+      </div>
+      <div
+        class="euiCommentEvent__headerEvent"
+      />
+    </div>
+  </figcaption>
+</figure>
+`;
+
+exports[`EuiCommentEvent props event is rendered 1`] = `
+<figure
+  class="euiCommentEvent euiCommentEvent--regular"
+>
+  <figcaption
+    class="euiCommentEvent__header"
+  >
+    <div
+      class="euiCommentEvent__headerData"
+    >
+      <div
+        class="euiCommentEvent__headerUsername"
+      >
+        someuser
+      </div>
+      <div
+        class="euiCommentEvent__headerEvent"
+      >
+        commented
+      </div>
+    </div>
+  </figcaption>
+</figure>
+`;
+
+exports[`EuiCommentEvent props timestamp is rendered 1`] = `
+<figure
+  class="euiCommentEvent euiCommentEvent--regular"
+>
+  <figcaption
+    class="euiCommentEvent__header"
+  >
+    <div
+      class="euiCommentEvent__headerData"
+    >
+      <div
+        class="euiCommentEvent__headerUsername"
+      >
+        someuser
+      </div>
+      <div
+        class="euiCommentEvent__headerEvent"
+      />
+      <div
+        class="euiCommentEvent__headerTimestamp"
+      >
+        <time>
+          21 days ago
+        </time>
+      </div>
+    </div>
+  </figcaption>
+</figure>
+`;
+
+exports[`EuiCommentEvent props type is rendered 1`] = `
+<div
+  class="euiCommentEvent euiCommentEvent--update"
+>
+  <div
+    class="euiCommentEvent__header"
+  >
+    <div
+      class="euiCommentEvent__headerData"
+    >
+      <div
+        class="euiCommentEvent__headerUsername"
+      >
+        someuser
+      </div>
+      <div
+        class="euiCommentEvent__headerEvent"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/comment/__snapshots__/comment_timeline.test.tsx.snap b/src/components/comment/__snapshots__/comment_timeline.test.tsx.snap
new file mode 100644
index 00000000000..7da312647b8
--- /dev/null
+++ b/src/components/comment/__snapshots__/comment_timeline.test.tsx.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCommentTimeline is rendered 1`] = `
+<div
+  class="euiCommentTimeline testClass1 testClass2"
+>
+  <div
+    class="euiCommentTimeline__content"
+  >
+    <div
+      class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
+    >
+      <div
+        data-euiicon-type="user"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiCommentTimeline props timelineIcon is rendered 1`] = `
+<div
+  class="euiCommentTimeline"
+>
+  <div
+    class="euiCommentTimeline__content"
+  >
+    <div
+      class="euiCommentTimeline__icon--regular"
+    >
+      <div
+        aria-label="Mario"
+        class="euiAvatar euiAvatar--l euiAvatar--user"
+        style="background-image:none;background-color:#f1d86f;color:#000000"
+        title="Mario"
+      >
+        <span
+          aria-hidden="true"
+        >
+          M
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiCommentTimeline props type is rendered 1`] = `
+<div
+  class="euiCommentTimeline"
+>
+  <div
+    class="euiCommentTimeline__content"
+  >
+    <div
+      class="euiCommentTimeline__icon--default euiCommentTimeline__icon--update"
+    >
+      <div
+        data-euiicon-type="dot"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/comment/_comment.scss b/src/components/comment/_comment.scss
new file mode 100644
index 00000000000..7b94de4fb61
--- /dev/null
+++ b/src/components/comment/_comment.scss
@@ -0,0 +1,38 @@
+.euiComment {
+  font-size: $euiFontSizeS;
+  display: flex;
+  padding-bottom: $euiSize;
+  min-height: $euiSize * 3.5;
+
+  .euiCommentEvent {
+    flex-grow: 1;
+  }
+
+  .euiCommentTimeline {
+    position: relative;
+    flex-grow: 0;
+    margin-right: $euiSize;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: $euiSizeXXL / 2;
+      top: $euiSizeL;
+      width: $euiSizeXS / 2;
+      background-color: $euiColorLightShade;
+      height: calc(100% + #{$euiSizeL});
+    }
+  }
+}
+
+.euiComment:last-of-type {
+  .euiCommentTimeline {
+    &::before {
+      display: none;
+    }
+  }
+}
+
+.euiComment--update:not(.euiComment--hasBody) {
+  align-items: center;
+}
\ No newline at end of file
diff --git a/src/components/comment/_comment_event.scss b/src/components/comment/_comment_event.scss
new file mode 100644
index 00000000000..e6ccfd851d8
--- /dev/null
+++ b/src/components/comment/_comment_event.scss
@@ -0,0 +1,75 @@
+@include euiPanel($selector: '.euiCommentEvent--regular');
+
+.euiCommentEvent {
+  overflow: hidden;
+}
+
+.euiCommentEvent__header {
+  line-height: $euiLineHeight;
+  display: flex;
+  align-items: center;
+}
+
+.euiCommentEvent__headerData {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+
+  > div {
+    padding-right: $euiSizeXS;
+  }
+}
+
+.euiCommentEvent__headerUsername {
+  font-weight: $euiFontWeightSemiBold;
+}
+
+.euiCommentEvent--regular {
+  border: $euiBorderThin;
+
+  .euiCommentEvent__header {
+    min-height: $euiSizeXXL;
+    background-color: $euiColorLightestShade;
+    border-bottom: $euiBorderThin;
+    padding: $euiSizeXS $euiSizeS;
+
+    /**
+     * Fix for IE when using align-items:center in an item that has min-height
+        (https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042)
+     */
+    // sass-lint:disable-block mixins-before-declarations
+    @include internetExplorerOnly {
+      &::after {
+        content: '';
+        // Calculates the minimum height based on full header's min-height minus the vertical padding
+        min-height: $euiSizeXXL - $euiSizeS;
+        font-size: 0;
+        display: block;
+      }
+    }
+  }
+
+  .euiCommentEvent__headerData {
+    // Push the actions far right
+    flex-grow: 1;
+  }
+
+  .euiCommentEvent__body {
+    padding: $euiSizeS;
+  }
+}
+
+.euiCommentEvent--update {
+  .euiCommentEvent__header {
+    justify-content: flex-start;
+    padding: $euiSizeXS 0;
+  }
+
+  .euiCommentEvent__headerData {
+    padding-right: $euiSizeS;
+  }
+
+  .euiCommentEvent__body {
+    padding-top: $euiSizeXS;
+  }
+}
diff --git a/src/components/comment/_comment_timeline.scss b/src/components/comment/_comment_timeline.scss
new file mode 100644
index 00000000000..18ea3d40acf
--- /dev/null
+++ b/src/components/comment/_comment_timeline.scss
@@ -0,0 +1,27 @@
+.euiCommentTimeline__content {
+  min-width: $euiSizeXXL;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.euiCommentTimeline__icon--default {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow-x: hidden;
+  border-radius: 50%;
+  background-color: $euiColorLightestShade;
+
+  &.euiCommentTimeline__icon--regular {
+    width: $euiSizeXXL;
+    height: $euiSizeXXL;
+  }
+
+  &.euiCommentTimeline__icon--update {
+    width: $euiSizeL;
+    height: $euiSizeL;
+  }
+}
\ No newline at end of file
diff --git a/src/components/comment/_index.scss b/src/components/comment/_index.scss
new file mode 100644
index 00000000000..78e82990cb1
--- /dev/null
+++ b/src/components/comment/_index.scss
@@ -0,0 +1,3 @@
+@import 'comment';
+@import 'comment_event';
+@import 'comment_timeline';
diff --git a/src/components/comment/comment.test.tsx b/src/components/comment/comment.test.tsx
new file mode 100644
index 00000000000..346383117db
--- /dev/null
+++ b/src/components/comment/comment.test.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiComment } from './comment';
+import { EuiAvatar } from '../avatar';
+
+describe('EuiComment', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiComment username="someuser" {...requiredProps} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    describe('type', () => {
+      it('is rendered', () => {
+        const component = render(
+          <EuiComment username="someuser" type="update" />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
+    describe('timelineIcon', () => {
+      it('is rendered', () => {
+        const component = render(
+          <EuiComment
+            username="someuser"
+            timelineIcon={<EuiAvatar size="l" name="Mario" />}
+          />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
+    describe('timestamp', () => {
+      it('is rendered', () => {
+        const component = render(
+          <EuiComment timestamp="21 days ago" username="someuser" />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
+    describe('event', () => {
+      it('is rendered', () => {
+        const component = render(
+          <EuiComment event="commented" username="someuser" />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+
+  test('renders a body', () => {
+    const component = render(
+      <EuiComment username="someuser">
+        <p>This is the body.</p>
+      </EuiComment>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/components/comment/comment.tsx b/src/components/comment/comment.tsx
new file mode 100644
index 00000000000..15e12d8dccb
--- /dev/null
+++ b/src/components/comment/comment.tsx
@@ -0,0 +1,51 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { EuiCommentEvent, EuiCommentEventProps } from './comment_event';
+import {
+  EuiCommentTimeline,
+  EuiCommentTimelineProps,
+} from './comment_timeline';
+
+export interface EuiCommentProps
+  extends HTMLAttributes<HTMLDivElement>,
+    EuiCommentEventProps,
+    EuiCommentTimelineProps {}
+
+const typeToClassNameMap = {
+  regular: '',
+  update: 'euiComment--update',
+};
+
+export const EuiComment: FunctionComponent<EuiCommentProps> = ({
+  children,
+  className,
+  username,
+  event,
+  actions,
+  timelineIcon,
+  type = 'regular',
+  timestamp,
+  ...rest
+}) => {
+  const classes = classNames(
+    'euiComment',
+    typeToClassNameMap[type],
+    { 'euiComment--hasBody': children },
+    className
+  );
+
+  return (
+    <div className={classes} {...rest}>
+      <EuiCommentTimeline type={type} timelineIcon={timelineIcon} />
+      <EuiCommentEvent
+        username={username}
+        actions={actions}
+        event={event}
+        timestamp={timestamp}
+        type={type}>
+        {children}
+      </EuiCommentEvent>
+    </div>
+  );
+};
diff --git a/src/components/comment/comment_event.test.tsx b/src/components/comment/comment_event.test.tsx
new file mode 100644
index 00000000000..96dd8f7dca0
--- /dev/null
+++ b/src/components/comment/comment_event.test.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiCommentEvent } from './comment_event';
+
+describe('EuiCommentEvent', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiCommentEvent username="someuser" {...requiredProps} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    describe('type', () => {
+      it('is rendered', () => {
+        const component = render(
+          <EuiCommentEvent username="someuser" type="update" />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
+    describe('timestamp', () => {
+      it('is rendered', () => {
+        const component = render(
+          <EuiCommentEvent timestamp="21 days ago" username="someuser" />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
+    describe('event', () => {
+      it('is rendered', () => {
+        const component = render(
+          <EuiCommentEvent event="commented" username="someuser" />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+});
diff --git a/src/components/comment/comment_event.tsx b/src/components/comment/comment_event.tsx
new file mode 100644
index 00000000000..9feb2f0d36e
--- /dev/null
+++ b/src/components/comment/comment_event.tsx
@@ -0,0 +1,85 @@
+import React, { FunctionComponent, ReactNode } from 'react';
+import { CommonProps, keysOf } from '../common';
+import classNames from 'classnames';
+
+export interface EuiCommentEventProps extends CommonProps {
+  /**
+   * Author of the comment. Display a small icon or avatar with it if needed.
+   */
+  username: ReactNode;
+  /**
+   * Time of occurrence of the event. Its format is set on the consumer's side
+   */
+  timestamp?: ReactNode;
+  /**
+   * Describes the event that took place
+   */
+  event?: ReactNode;
+  /**
+   * Custom actions that the user can perform from the comment's header
+   */
+  actions?: ReactNode;
+  /**
+   * Use "update" when the comment is primarily showing info about actions that the user or the system has performed (e.g. "user1 edited a case").
+   */
+  type?: EuiCommentType;
+}
+
+const typeToClassNameMap = {
+  regular: 'euiCommentEvent--regular',
+  update: 'euiCommentEvent--update',
+};
+
+export const TYPES = keysOf(typeToClassNameMap);
+export type EuiCommentType = keyof typeof typeToClassNameMap;
+
+export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
+  children,
+  className,
+  username,
+  timestamp,
+  type = 'regular',
+  event,
+  actions,
+}) => {
+  const classes = classNames(
+    'euiCommentEvent',
+    typeToClassNameMap[type],
+    className
+  );
+
+  const isFigure =
+    type === 'regular' ||
+    (type === 'update' && typeof children !== 'undefined');
+
+  const Element = isFigure ? 'figure' : 'div';
+  const HeaderElement = isFigure ? 'figcaption' : 'div';
+
+  return (
+    <Element className={classes}>
+      <HeaderElement className="euiCommentEvent__header">
+        <div className="euiCommentEvent__headerData">
+          <div className="euiCommentEvent__headerUsername">{username}</div>
+          <div className="euiCommentEvent__headerEvent">{event}</div>
+          {timestamp ? (
+            <div className="euiCommentEvent__headerTimestamp">
+              <time>{timestamp}</time>
+            </div>
+          ) : (
+            undefined
+          )}
+        </div>
+        {actions ? (
+          <div className="euiCommentEvent__headerActions">{actions}</div>
+        ) : (
+          undefined
+        )}
+      </HeaderElement>
+      {children ? (
+        <div className="euiCommentEvent__body">{children}</div>
+      ) : (
+        undefined
+      )}
+    </Element>
+  );
+};
diff --git a/src/components/comment/comment_timeline.test.tsx b/src/components/comment/comment_timeline.test.tsx
new file mode 100644
index 00000000000..0d508c16452
--- /dev/null
+++ b/src/components/comment/comment_timeline.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiCommentTimeline } from './comment_timeline';
+import { EuiAvatar } from '../avatar';
+
+describe('EuiCommentTimeline', () => {
+  test('is rendered', () => {
+    const component = render(<EuiCommentTimeline {...requiredProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    describe('type', () => {
+      it('is rendered', () => {
+        const component = render(<EuiCommentTimeline type="update" />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
+    describe('timelineIcon', () => {
+      it('is rendered', () => {
+        const component = render(
+          <EuiCommentTimeline
+            timelineIcon={<EuiAvatar size="l" name="Mario" />}
+          />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+});
diff --git a/src/components/comment/comment_timeline.tsx b/src/components/comment/comment_timeline.tsx
new file mode 100644
index 00000000000..e902315fe7b
--- /dev/null
+++ b/src/components/comment/comment_timeline.tsx
@@ -0,0 +1,59 @@
+import React, { FunctionComponent, ReactNode } from 'react';
+import { CommonProps, keysOf } from '../common';
+import classNames from 'classnames';
+import { EuiIcon, IconType } from '../icon';
+
+export interface EuiCommentTimelineProps extends CommonProps {
+  /**
+   * Main icon that accompanies the comment. The default is `user` for regular comments and `dot` for update comments. To customize, pass a `string` as an `EuiIcon['type']` or any `ReactNode`.
+   */
+  timelineIcon?: ReactNode | IconType;
+  type?: EuiCommentType;
+}
+
+const typeToClassNameMap = {
+  regular: 'euiCommentTimeline__icon--regular',
+  update: 'euiCommentTimeline__icon--update',
+};
+
+export const TYPES = keysOf(typeToClassNameMap);
+export type EuiCommentType = keyof typeof typeToClassNameMap;
+
+export const EuiCommentTimeline: FunctionComponent<EuiCommentTimelineProps> = ({
+  className,
+  timelineIcon,
+  type = 'regular',
+}) => {
+  const classes = classNames('euiCommentTimeline', className);
+  const iconClasses = classNames(
+    {
+      'euiCommentTimeline__icon--default':
+        !timelineIcon || typeof timelineIcon === 'string',
+    },
+    typeToClassNameMap[type]
+  );
+
+  let iconRender;
+  if (typeof timelineIcon === 'string') {
+    iconRender = (
+      <EuiIcon size={type === 'update' ? 'm' : 'l'} type={timelineIcon} />
+    );
+  } else if (timelineIcon) {
+    iconRender = timelineIcon;
+  } else {
+    iconRender = (
+      <EuiIcon
+        type={type === 'update' ? 'dot' : 'user'}
+        size={type === 'update' ? 's' : 'l'}
+      />
+    );
+  }
+
+  return (
+    <div className={classes}>
+      <div className="euiCommentTimeline__content">
+        <div className={iconClasses}>{iconRender}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/comment/index.ts b/src/components/comment/index.ts
new file mode 100644
index 00000000000..23f3dc8bdb5
--- /dev/null
+++ b/src/components/comment/index.ts
@@ -0,0 +1,5 @@
+export { EuiComment, EuiCommentProps } from './comment';
+
+export { EuiCommentEvent, EuiCommentType } from './comment_event';
+
+export { EuiCommentTimeline } from './comment_timeline';
diff --git a/src/components/index.js b/src/components/index.js
index 9dcc3991767..c67f4bb976b 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -49,6 +49,8 @@ export {
 
 export { EuiComboBox } from './combo_box';
 
+export { EuiComment } from './comment';
+
 export { EuiContext, EuiI18nConsumer } from './context';
 
 export {
diff --git a/src/components/index.scss b/src/components/index.scss
index dce5687119d..68c1942e319 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -17,6 +17,7 @@
 @import 'collapsible_nav/index';
 @import 'color_picker/index';
 @import 'combo_box/index';
+@import 'comment/index';
 @import 'context_menu/index';
 @import 'control_bar/index';
 @import 'date_picker/index';