diff --git a/charts.js b/charts.js
index f35b1a04dfef2e213bf06a9ae501738b78064aa3..14953771fee23309eff7c3f26a66baace3a71fda 100644
--- a/charts.js
+++ b/charts.js
@@ -9,3 +9,4 @@ export { default as GlColumnChart } from './components/charts/column/column.vue'
 export {
   default as GlStackedColumnChart,
 } from './components/charts/stacked_column/stacked_column.vue';
+export { default as GlSingleStat } from './components/charts/single_stat/single_stat.vue';
diff --git a/components/charts/single_stat/examples/index.js b/components/charts/single_stat/examples/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ec629cef6cb9e8a7758ef840e9df779cafd16f7d
--- /dev/null
+++ b/components/charts/single_stat/examples/index.js
@@ -0,0 +1,20 @@
+import SingleStatSimpleExample from './single_stat.simple.example.vue';
+import SingleStatIconExample from './single_stat.icon.example.vue';
+
+export default [
+  {
+    name: 'Basic',
+    items: [
+      {
+        id: 'simple',
+        name: 'Simple',
+        component: SingleStatSimpleExample,
+      },
+      {
+        id: 'icon',
+        name: 'Icon',
+        component: SingleStatIconExample,
+      },
+    ],
+  },
+];
diff --git a/components/charts/single_stat/examples/single_stat.icon.example.vue b/components/charts/single_stat/examples/single_stat.icon.example.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1bd0ab5d7773073f0c91a2591b2341233d12bf87
--- /dev/null
+++ b/components/charts/single_stat/examples/single_stat.icon.example.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="row">
+    <div class="col-sm-4">
+      <gl-single-stat
+        title="Success stat"
+        value="100ms"
+        variant="success"
+      >
+        <span slot="icon">+</span>
+      </gl-single-stat>
+    </div>
+    <div class="col-sm-4">
+      <gl-single-stat
+        title="Danger stat"
+        value="100000ms"
+        variant="danger"
+      >
+        <span slot="icon">!</span>
+      </gl-single-stat>
+    </div>
+  </div>
+</template>
diff --git a/components/charts/single_stat/examples/single_stat.simple.example.vue b/components/charts/single_stat/examples/single_stat.simple.example.vue
new file mode 100644
index 0000000000000000000000000000000000000000..96f2d12c23b0632e2395ae76697a6e0664c2d23e
--- /dev/null
+++ b/components/charts/single_stat/examples/single_stat.simple.example.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="row">
+    <div class="col-sm-4">
+      <gl-single-stat
+        title="Success stat"
+        value="100ms"
+        variant="success"
+      />
+    </div>
+    <div class="col-sm-4">
+      <gl-single-stat
+        title="Warning stat"
+        value="1000ms"
+        variant="warning"
+      />
+    </div>
+    <div class="col-sm-4">
+      <gl-single-stat
+        title="Danger stat"
+        value="100000ms"
+        variant="danger"
+      />
+    </div>
+    <div class="col-sm-4">
+      <gl-single-stat
+        title="Primary stat"
+        value="22°C"
+        variant="primary"
+      />
+    </div>
+    <div class="col-sm-4">
+      <gl-single-stat
+        title="Secondary stat"
+        value="50%"
+        variant="secondary"
+      />
+    </div>
+  </div>
+</template>
diff --git a/components/charts/single_stat/single_stat.documentation.js b/components/charts/single_stat/single_stat.documentation.js
new file mode 100644
index 0000000000000000000000000000000000000000..3694e5ed02d5905ebe5f5ac1ac68b121671c27f5
--- /dev/null
+++ b/components/charts/single_stat/single_stat.documentation.js
@@ -0,0 +1,7 @@
+import * as description from './single_stat.md';
+import examples from './examples';
+
+export default {
+  examples,
+  description,
+};
diff --git a/components/charts/single_stat/single_stat.md b/components/charts/single_stat/single_stat.md
new file mode 100644
index 0000000000000000000000000000000000000000..6b142aa59859ed16e219d9370dd65d3be8c2c920
--- /dev/null
+++ b/components/charts/single_stat/single_stat.md
@@ -0,0 +1,13 @@
+### Single Stat
+
+The single stat component is a card used to show a single value. The color of the background & text is determined by the **variant** prop, which can be one of "success", "warning", "error", "info", or "netural" (default).
+
+To display an icon to the left of the text, you can use the **icon** slot. This can be an SVG icon or a text character. If using an SVG icon, ensure that the fill/stroke values use `currentColor` so the icon color matches the text of the single stat.
+
+An example of using an icon:
+
+```html
+<gl-single-stat variant="success" title="Ecstatic" value="1000%">
+  <gl-icon slot="icon" name="arrow-up" />
+</gl-single-stat>
+```
diff --git a/components/charts/single_stat/single_stat.vue b/components/charts/single_stat/single_stat.vue
new file mode 100644
index 0000000000000000000000000000000000000000..78b638c58641639e8a09479a6c67d4e8ccfaeddf
--- /dev/null
+++ b/components/charts/single_stat/single_stat.vue
@@ -0,0 +1,51 @@
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      required: true,
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: 'secondary',
+      validator: variant =>
+        ['primary', 'secondary', 'success', 'warning', 'danger'].includes(variant),
+    },
+  },
+  computed: {
+    headerColor() {
+      return `bg-${this.variant}-100`;
+    },
+    bodyColor() {
+      return `bg-${this.variant}-50`;
+    },
+    textColor() {
+      switch (this.variant) {
+        case 'secondary':
+          return `text-${this.variant}-700`;
+        case 'warning':
+          return `text-${this.variant}-600`;
+        default:
+          return `text-${this.variant}-500`;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="card text-center font-weight-bold border-0" :class="textColor">
+    <div class="card-header border-0" :class="headerColor">
+      {{ title }}
+    </div>
+    <div class="card-body rounded-bottom text-truncate text-4" :class="bodyColor">
+      <slot name="icon"></slot>
+      {{ value }}
+    </div>
+  </div>
+</template>
diff --git a/documentation/components_documentation.js b/documentation/components_documentation.js
index 1fc0fc9f47708f67988c44d82a0800b45456af53..d2073ad105e50ff22e90fd5ee7147f00209f83d4 100644
--- a/documentation/components_documentation.js
+++ b/documentation/components_documentation.js
@@ -11,6 +11,9 @@ export {
 export {
   default as GlStackedColumnChartDocumentation,
 } from '../components/charts/stacked_column/stacked_column.documentation';
+export {
+  default as GlSingleStatDocumentation,
+} from '../components/charts/single_stat/single_stat.documentation';
 export {
   default as GlChartTooltipDocumentation,
 } from '../components/charts/tooltip/tooltip.documentation';
diff --git a/stories/charts/single_stat.js b/stories/charts/single_stat.js
new file mode 100644
index 0000000000000000000000000000000000000000..6948a006cf480cfed99e2841a5852c766b04615f
--- /dev/null
+++ b/stories/charts/single_stat.js
@@ -0,0 +1,26 @@
+import { withKnobs } from '@storybook/addon-knobs/vue';
+import documentedStoriesOf from '../utils/documented_stories';
+import readme from '../../components/charts/single_stat/single_stat.md';
+import { GlSingleStat } from '../../charts';
+
+const components = {
+  GlSingleStat,
+};
+
+documentedStoriesOf('charts|single-stat', readme)
+  .addDecorator(withKnobs)
+  .add('default', () => ({
+    components,
+    template: `
+      <gl-single-stat title="Single stat" value="100%">
+      </gl-single-stat>
+    `,
+  }))
+  .add('with icon', () => ({
+    components,
+    template: `
+      <gl-single-stat title="Single stat" value="100%">
+        <span slot="icon">:)</span>
+      </gl-single-stat>
+    `,
+  }));
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-form-form-group-with-validations-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-form-form-group-with-validations-1-snap.png
index 567445c53b9b6f3c69ff7a6ee314342bd6604e73..6d343ad1c99025c27c008d63e9227b9e17895334 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-form-form-group-with-validations-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-form-form-group-with-validations-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-charts-single-stat-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-charts-single-stat-default-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..05dcd16750f1b447aef35da7052c1c8791b24c5b
Binary files /dev/null and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-charts-single-stat-default-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-charts-single-stat-with-icon-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-charts-single-stat-with-icon-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7d11b557fedd7d2872cc45f7e501c421ddf3208
Binary files /dev/null and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-charts-single-stat-with-icon-1-snap.png differ