diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7fa67cf8b..31989f118 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 29.6.0
+
+New:
+
+- `GeoValue` component
+
 ## 29.5.5
 
 Fix:
diff --git a/package.json b/package.json
index eb47d829d..3b149c03d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@geoblink/design-system",
-  "version": "29.5.5",
+  "version": "29.6.0",
   "description": "Geoblink Design System for Vue.js",
   "author": "Geoblink <contact@geoblink.com>",
   "main": "dist/system.js",
diff --git a/src/elements/GeoButton/GeoButton.template.html b/src/elements/GeoButton/GeoButton.template.html
index b0ab99c39..e4719bb19 100644
--- a/src/elements/GeoButton/GeoButton.template.html
+++ b/src/elements/GeoButton/GeoButton.template.html
@@ -1,6 +1,7 @@
 <geo-button
   v-bind="$props"
   :type="type"
+  :isPrimary="isPrimary"
   @click="$emit('click', $event)"
 >
   <slot />
diff --git a/src/elements/GeoValue/GeoNegativeValue.examples.md b/src/elements/GeoValue/GeoNegativeValue.examples.md
new file mode 100644
index 000000000..cdee374a5
--- /dev/null
+++ b/src/elements/GeoValue/GeoNegativeValue.examples.md
@@ -0,0 +1,331 @@
+## Simple primary value
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      value: "27th of 73",
+      isPrimary: true
+    }
+  }
+}
+</script>
+```
+
+## Primary value with unit
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+        :unit="unit"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      value: "365",
+      isPrimary: true,
+      unit: "€"
+    }
+  }
+}
+</script>
+```
+
+## Primary value with description
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores"
+    }
+  }
+}
+</script>
+```
+
+## Primary value with description tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:descriptionTooltip>
+          <font-awesome-icon
+            data-tooltip-id="descriptionTooltipIcon"
+            :icon="['fas', 'info-circle']"
+          />
+          <geo-tooltip :forced-trigger-target="descriptionTooltipIcon">
+            Tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-negative-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      descriptionTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores",
+      descriptionTooltip: "Tooltip text"
+    }
+  },
+  mounted () {
+    this.descriptionTooltipIcon = document.querySelector('[data-tooltip-id="descriptionTooltipIcon"]')
+  }
+}
+</script>
+```
+
+## Primary value with warning tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:warningTooltip>
+          <font-awesome-icon
+            data-tooltip-id="warningTooltipIcon"
+            class="warning-icon"
+            :icon="['fas', 'exclamation-triangle']"
+          />
+          <geo-tooltip :forced-trigger-target="warningTooltipIcon">
+            Warning tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-negative-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      warningTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores",
+      warningTooltip: "Tooltip text"
+    }
+  },
+  mounted () {
+    this.warningTooltipIcon = document.querySelector('[data-tooltip-id="warningTooltipIcon"]')
+  }
+}
+</script>
+
+<style>
+.warning-icon{
+  margin-top: 8px;
+  margin-right: 5px;
+}
+</style>
+```
+
+## Simple secondary value
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      value: "27th of 73",
+      isPrimary: false
+    }
+  }
+}
+</script>
+```
+
+## Secondary value with unit and description
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+        :unit="unit"
+        :description="description"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      value: "587",
+      isPrimary: false,
+      unit: "€",
+      description:"Facturados por la tienda"
+    }
+  }
+}
+</script>
+```
+
+## Secondary value with description tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:descriptionTooltip>
+          <font-awesome-icon
+            data-tooltip-id="descriptionTooltipIcon2"
+            :icon="['fas', 'info-circle']"
+          />
+          <geo-tooltip :forced-trigger-target="descriptionTooltipIcon">
+            Tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-negative-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      descriptionTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: false,
+      description: "compared to the rest of the stores"
+    }
+  },
+  mounted () {
+    this.descriptionTooltipIcon = document.querySelector('[data-tooltip-id="descriptionTooltipIcon2"]')
+  }
+}
+</script>
+```
+
+## Secondary value with warning tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-negative-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:warningTooltip>
+          <font-awesome-icon
+            class="warning-icon"
+            data-tooltip-id="warningTooltipIcon2"
+            :icon="['fas', 'exclamation-triangle']"
+          />
+          <geo-tooltip :forced-trigger-target="warningTooltipIcon">
+            Warning tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-negative-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNegativeValueDemo',
+  data () {
+    return {
+      warningTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: false,
+      description: "compared to the rest of the stores"
+    }
+  },
+  mounted () {
+    this.warningTooltipIcon = document.querySelector('[data-tooltip-id="warningTooltipIcon2"]')
+  }
+}
+</script>
+
+<style>
+.warning-icon{
+  margin-right: 5px;
+}
+</style>
+```
\ No newline at end of file
diff --git a/src/elements/GeoValue/GeoNegativeValue.vue b/src/elements/GeoValue/GeoNegativeValue.vue
new file mode 100644
index 000000000..f5ca2ef0f
--- /dev/null
+++ b/src/elements/GeoValue/GeoNegativeValue.vue
@@ -0,0 +1,23 @@
+<template src="./GeoValue.template.html" />
+
+<script>
+import mixin, { TYPES } from './GeoValue.mixin'
+
+/**
+ * [GeoValue](./GeoValue) using predefined `negative` type.
+ *
+ * See [GeoValue](./GeoValue) for a complete list of supported properties and
+ * features.
+*/
+export default {
+  name: 'GeoNegativeValue',
+  status: 'ready',
+  release: '29.6.0',
+  mixins: [mixin],
+  computed: {
+    type () {
+      return TYPES.negative
+    }
+  }
+}
+</script>
diff --git a/src/elements/GeoValue/GeoNeutralValue.examples.md b/src/elements/GeoValue/GeoNeutralValue.examples.md
new file mode 100644
index 000000000..bf4a325e1
--- /dev/null
+++ b/src/elements/GeoValue/GeoNeutralValue.examples.md
@@ -0,0 +1,330 @@
+## Simple primary value
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-neutral-value
+        :value="value"
+        :is-primary="isPrimary"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNeutralValueDemo',
+  data () {
+    return {
+      value: "27th of 73",
+      isPrimary: true
+    }
+  }
+}
+</script>
+```
+
+## Primary value with unit
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-neutral-value
+        :value="value"
+        :is-primary="isPrimary"
+        :unit="unit"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNeutralValueDemo',
+  data () {
+    return {
+      value: "365",
+      isPrimary: true,
+      unit: "€"
+    }
+  }
+}
+</script>
+```
+
+## Primary value with description
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-neutral-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNeutralValueDemo',
+  data () {
+    return {
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores"
+    }
+  }
+}
+</script>
+```
+
+## Primary value with description tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-neutral-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:descriptionTooltip>
+          <font-awesome-icon
+            data-tooltip-id="descriptionTooltipIcon"
+            :icon="['fas', 'info-circle']"
+          />
+          <geo-tooltip :forced-trigger-target="descriptionTooltipIcon">
+            Tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-neutral-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNeutralValueDemo',
+  data () {
+    return {
+      descriptionTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores",
+      descriptionTooltip: "Tooltip text"
+    }
+  },
+  mounted () {
+    this.descriptionTooltipIcon = document.querySelector('[data-tooltip-id="descriptionTooltipIcon"]')
+  }
+}
+</script>
+```
+
+## Primary value with warning tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-neutral-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:warningTooltip>
+          <font-awesome-icon
+            data-tooltip-id="warningTooltipIcon"
+            class="warning-icon"
+            :icon="['fas', 'exclamation-triangle']"
+          />
+          <geo-tooltip :forced-trigger-target="warningTooltipIcon">
+            Warning tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-neutral-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNeutralValueDemo',
+  data () {
+    return {
+      warningTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores",
+      warningTooltip: "Tooltip text"
+    }
+  },
+  mounted () {
+    this.warningTooltipIcon = document.querySelector('[data-tooltip-id="warningTooltipIcon"]')
+  }
+}
+</script>
+
+<style>
+.warning-icon{
+  margin-top: 8px;
+  margin-right: 5px;
+}
+</style>
+```
+
+## Simple secondary value
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-neutral-value
+        :value="value"
+        :is-primary="isPrimary"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNeutralValueDemo',
+  data () {
+    return {
+      value: "27th of 73",
+      isPrimary: false
+    }
+  }
+}
+</script>
+```
+
+## Secondary value with unit and description
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-neutral-value
+        :value="value"
+        :is-primary="isPrimary"
+        :unit="unit"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNeutralValueDemo',
+  data () {
+    return {
+      value: "587",
+      isPrimary: false,
+      unit: "€",
+      description:"Facturados por la tienda"
+    }
+  }
+}
+</script>
+```
+
+## Secondary value with description tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-neutral-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:descriptionTooltip>
+          <font-awesome-icon
+            data-tooltip-id="descriptionTooltipIcon2"
+            :icon="['fas', 'info-circle']"
+          />
+          <geo-tooltip :forced-trigger-target="descriptionTooltipIcon">
+            Tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-neutral-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNeutralValueDemo',
+  data () {
+    return {
+      descriptionTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: false,
+      description: "compared to the rest of the stores"
+    }
+  },
+  mounted () {
+    this.descriptionTooltipIcon = document.querySelector('[data-tooltip-id="descriptionTooltipIcon2"]')
+  }
+}
+</script>
+```
+
+## Secondary value with warning tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-neutral-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:warningTooltip>
+          <font-awesome-icon
+            class="warning-icon"
+            data-tooltip-id="warningTooltipIcon2"
+            :icon="['fas', 'exclamation-triangle']"
+          />
+          <geo-tooltip :forced-trigger-target="warningTooltipIcon">
+            Warning tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-neutral-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoNeutralValueDemo',
+  data () {
+    return {
+      warningTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: false,
+      description: "compared to the rest of the stores"
+    }
+  },
+  mounted () {
+    this.warningTooltipIcon = document.querySelector('[data-tooltip-id="warningTooltipIcon2"]')
+  }
+}
+</script>
+
+<style>
+.warning-icon{
+  margin-right: 5px;
+}
+</style>
+```
\ No newline at end of file
diff --git a/src/elements/GeoValue/GeoNeutralValue.vue b/src/elements/GeoValue/GeoNeutralValue.vue
new file mode 100644
index 000000000..844522d07
--- /dev/null
+++ b/src/elements/GeoValue/GeoNeutralValue.vue
@@ -0,0 +1,23 @@
+<template src="./GeoValue.template.html" />
+
+<script>
+import mixin, { TYPES } from './GeoValue.mixin'
+
+/**
+ * [GeoValue](./GeoValue) using predefined `neutral` type.
+ *
+ * See [GeoValue](./GeoValue) for a complete list of supported properties and
+ * features.
+*/
+export default {
+  name: 'GeoNeutralValue',
+  status: 'ready',
+  release: '29.6.0',
+  mixins: [mixin],
+  computed: {
+    type () {
+      return TYPES.neutral
+    }
+  }
+}
+</script>
diff --git a/src/elements/GeoValue/GeoPositiveValue.examples.md b/src/elements/GeoValue/GeoPositiveValue.examples.md
new file mode 100644
index 000000000..dd000e2c7
--- /dev/null
+++ b/src/elements/GeoValue/GeoPositiveValue.examples.md
@@ -0,0 +1,330 @@
+## Simple primary value
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-positive-value
+        :value="value"
+        :is-primary="isPrimary"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoPositiveValueDemo',
+  data () {
+    return {
+      value: "27th of 73",
+      isPrimary: true
+    }
+  }
+}
+</script>
+```
+
+## Primary value with unit
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-positive-value
+        :value="value"
+        :is-primary="isPrimary"
+        :unit="unit"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoPositiveValueDemo',
+  data () {
+    return {
+      value: "365",
+      isPrimary: true,
+      unit: "€"
+    }
+  }
+}
+</script>
+```
+
+## Primary value with description
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-positive-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoPositiveValueDemo',
+  data () {
+    return {
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores"
+    }
+  }
+}
+</script>
+```
+
+## Primary value with description tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-positive-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:descriptionTooltip>
+          <font-awesome-icon
+            data-tooltip-id="descriptionTooltipIcon"
+            :icon="['fas', 'info-circle']"
+          />
+          <geo-tooltip :forced-trigger-target="descriptionTooltipIcon">
+            Tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-positive-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoPositiveValueDemo',
+  data () {
+    return {
+      descriptionTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores",
+      descriptionTooltip: "Tooltip text"
+    }
+  },
+  mounted () {
+    this.descriptionTooltipIcon = document.querySelector('[data-tooltip-id="descriptionTooltipIcon"]')
+  }
+}
+</script>
+```
+
+## Primary value with warning tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-positive-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:warningTooltip>
+          <font-awesome-icon
+            data-tooltip-id="warningTooltipIcon"
+            class="warning-icon"
+            :icon="['fas', 'exclamation-triangle']"
+          />
+          <geo-tooltip :forced-trigger-target="warningTooltipIcon">
+            Warning tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-positive-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoPositiveValueDemo',
+  data () {
+    return {
+      warningTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores",
+      warningTooltip: "Tooltip text"
+    }
+  },
+  mounted () {
+    this.warningTooltipIcon = document.querySelector('[data-tooltip-id="warningTooltipIcon"]')
+  }
+}
+</script>
+
+<style>
+.warning-icon{
+  margin-top: 8px;
+  margin-right: 5px;
+}
+</style>
+```
+
+## Simple secondary value
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-positive-value
+        :value="value"
+        :is-primary="isPrimary"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoPositiveValueDemo',
+  data () {
+    return {
+      value: "27th of 73",
+      isPrimary: false
+    }
+  }
+}
+</script>
+```
+
+## Secondary value with unit and description
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-positive-value
+        :value="value"
+        :is-primary="isPrimary"
+        :unit="unit"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoPositiveValueDemo',
+  data () {
+    return {
+      value: "587",
+      isPrimary: false,
+      unit: "€",
+      description:"Facturados por la tienda"
+    }
+  }
+}
+</script>
+```
+
+## Secondary value with description tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-positive-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:descriptionTooltip>
+          <font-awesome-icon
+            data-tooltip-id="descriptionTooltipIcon2"
+            :icon="['fas', 'info-circle']"
+          />
+          <geo-tooltip :forced-trigger-target="descriptionTooltipIcon">
+            Tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-positive-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoPositiveValueDemo',
+  data () {
+    return {
+      descriptionTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: false,
+      description: "compared to the rest of the stores"
+    }
+  },
+  mounted () {
+    this.descriptionTooltipIcon = document.querySelector('[data-tooltip-id="descriptionTooltipIcon2"]')
+  }
+}
+</script>
+```
+
+## Secondary value with warning tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-positive-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:warningTooltip>
+          <font-awesome-icon
+            class="warning-icon"
+            data-tooltip-id="warningTooltipIcon2"
+            :icon="['fas', 'exclamation-triangle']"
+          />
+          <geo-tooltip :forced-trigger-target="warningTooltipIcon">
+            Warning tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-positive-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoPositiveValueDemo',
+  data () {
+    return {
+      warningTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: false,
+      description: "compared to the rest of the stores"
+    }
+  },
+  mounted () {
+    this.warningTooltipIcon = document.querySelector('[data-tooltip-id="warningTooltipIcon2"]')
+  }
+}
+</script>
+
+<style>
+.warning-icon{
+  margin-right: 5px;
+}
+</style>
+```
\ No newline at end of file
diff --git a/src/elements/GeoValue/GeoPositiveValue.vue b/src/elements/GeoValue/GeoPositiveValue.vue
new file mode 100644
index 000000000..aa2aef7b9
--- /dev/null
+++ b/src/elements/GeoValue/GeoPositiveValue.vue
@@ -0,0 +1,23 @@
+<template src="./GeoValue.template.html" />
+
+<script>
+import mixin, { TYPES } from './GeoValue.mixin'
+
+/**
+ * [GeoValue](./GeoValue) using predefined `positive` type.
+ *
+ * See [GeoValue](./GeoValue) for a complete list of supported properties and
+ * features.
+*/
+export default {
+  name: 'GeoPositiveValue',
+  status: 'ready',
+  release: '29.6.0',
+  mixins: [mixin],
+  computed: {
+    type () {
+      return TYPES.positive
+    }
+  }
+}
+</script>
diff --git a/src/elements/GeoValue/GeoValue.examples.md b/src/elements/GeoValue/GeoValue.examples.md
new file mode 100644
index 000000000..1f442f7f3
--- /dev/null
+++ b/src/elements/GeoValue/GeoValue.examples.md
@@ -0,0 +1,393 @@
+## Simple primary value
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-value
+        :value="value"
+        :is-primary="isPrimary"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoValueDemo',
+  data () {
+    return {
+      value: "27th of 73",
+      isPrimary: true
+    }
+  }
+}
+</script>
+```
+
+## Primary value with unit
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-value
+        :value="value"
+        :is-primary="isPrimary"
+        :unit="unit"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoValueDemo',
+  data () {
+    return {
+      value: "365",
+      isPrimary: true,
+      unit: "€"
+    }
+  }
+}
+</script>
+```
+
+## Primary value with description
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoValueDemo',
+  data () {
+    return {
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores"
+    }
+  }
+}
+</script>
+```
+
+## Primary value with type
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-value
+        :value="value"
+        :is-primary="isPrimary"
+        :type="type"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoValueDemo',
+  data () {
+    return {
+      value: "27th of 35",
+      isPrimary: true,
+      type: "negative"
+    }
+  }
+}
+</script>
+```
+
+## Primary value with description tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:descriptionTooltip>
+          <font-awesome-icon
+            data-tooltip-id="descriptionTooltipIcon"
+            :icon="['fas', 'info-circle']"
+          />
+          <geo-tooltip :forced-trigger-target="descriptionTooltipIcon">
+            Tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoValueDemo',
+  data () {
+    return {
+      descriptionTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores",
+      descriptionTooltip: "Tooltip text"
+    }
+  },
+  mounted () {
+    this.descriptionTooltipIcon = document.querySelector('[data-tooltip-id="descriptionTooltipIcon"]')
+  }
+}
+</script>
+```
+
+## Primary value with warning tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:warningTooltip>
+          <font-awesome-icon
+            data-tooltip-id="warningTooltipIcon"
+            class="warning-icon"
+            :icon="['fas', 'exclamation-triangle']"
+          />
+          <geo-tooltip :forced-trigger-target="warningTooltipIcon">
+            Warning tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoValueDemo',
+  data () {
+    return {
+      warningTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: true,
+      description: "compared to the rest of the stores",
+      warningTooltip: "Tooltip text"
+    }
+  },
+  mounted () {
+    this.warningTooltipIcon = document.querySelector('[data-tooltip-id="warningTooltipIcon"]')
+  }
+}
+</script>
+
+<style>
+.warning-icon{
+  margin-top: 8px;
+  margin-right: 5px;
+}
+</style>
+```
+
+## Simple secondary value
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-value
+        :value="value"
+        :is-primary="isPrimary"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoValueDemo',
+  data () {
+    return {
+      value: "27th of 73",
+      isPrimary: false
+    }
+  }
+}
+</script>
+```
+
+## Secondary value with unit and description
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-value
+        :value="value"
+        :is-primary="isPrimary"
+        :unit="unit"
+        :description="description"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoValueDemo',
+  data () {
+    return {
+      value: "587",
+      isPrimary: false,
+      unit: "€",
+      description:"Facturados por la tienda"
+    }
+  }
+}
+</script>
+```
+
+## Secondary value with type
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-value
+        :value="value"
+        :is-primary="isPrimary"
+        :unit="unit"
+        :description="description"
+        :type="type"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoValueDemo',
+  data () {
+    return {
+      value: "27th of 73",
+      isPrimary: false,
+      unit: "",
+      description: "Es mayor que la media de tiendas",
+      type: "neutral"
+    }
+  }
+}
+</script>
+```
+
+## Secondary value with description tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:descriptionTooltip>
+          <font-awesome-icon
+            data-tooltip-id="descriptionTooltipIcon2"
+            :icon="['fas', 'info-circle']"
+          />
+          <geo-tooltip :forced-trigger-target="descriptionTooltipIcon">
+            Tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoValueDemo',
+  data () {
+    return {
+      descriptionTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: false,
+      description: "compared to the rest of the stores"
+    }
+  },
+  mounted () {
+    this.descriptionTooltipIcon = document.querySelector('[data-tooltip-id="descriptionTooltipIcon2"]')
+  }
+}
+</script>
+```
+
+## Secondary value with warning tooltip
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-value
+        :value="value"
+        :is-primary="isPrimary"
+        :description="description"
+      >
+        <template v-slot:warningTooltip>
+          <font-awesome-icon
+            class="warning-icon"
+            data-tooltip-id="warningTooltipIcon2"
+            :icon="['fas', 'exclamation-triangle']"
+          />
+          <geo-tooltip :forced-trigger-target="warningTooltipIcon">
+            Warning tooltip text
+          </geo-tooltip>
+        </template>
+      </geo-value>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoValueDemo',
+  data () {
+    return {
+      warningTooltipIcon: null,
+      value: "27th of 35",
+      isPrimary: false,
+      description: "compared to the rest of the stores"
+    }
+  },
+  mounted () {
+    this.warningTooltipIcon = document.querySelector('[data-tooltip-id="warningTooltipIcon2"]')
+  }
+}
+</script>
+
+<style>
+.warning-icon{
+  margin-right: 5px;
+}
+</style>
+```
\ No newline at end of file
diff --git a/src/elements/GeoValue/GeoValue.mixin.js b/src/elements/GeoValue/GeoValue.mixin.js
new file mode 100644
index 000000000..2592c3f97
--- /dev/null
+++ b/src/elements/GeoValue/GeoValue.mixin.js
@@ -0,0 +1,43 @@
+const TYPES = {
+  positive: 'positive',
+  neutral: 'neutral',
+  negative: 'negative',
+  standard: ''
+}
+
+export { TYPES }
+/**
+ * @mixin
+ */
+export default {
+  props: {
+    /**
+     * Determines if the value is primary or not
+     */
+    isPrimary: {
+      type: Boolean,
+      required: true
+    },
+    /**
+     * Value
+    */
+    value: {
+      type: String,
+      required: true
+    },
+    /**
+     * Unit
+    */
+    unit: {
+      type: String,
+      required: false
+    },
+    /**
+     * Description
+    */
+    description: {
+      type: String,
+      required: false
+    }
+  }
+}
diff --git a/src/elements/GeoValue/GeoValue.template.html b/src/elements/GeoValue/GeoValue.template.html
new file mode 100644
index 000000000..0301b5c0d
--- /dev/null
+++ b/src/elements/GeoValue/GeoValue.template.html
@@ -0,0 +1,13 @@
+<geo-value
+  v-bind="$props"
+  :type="type"
+>
+  <slot
+    slot="warningTooltip"
+    name="warningTooltip"
+  />
+  <slot
+    slot="descriptionTooltip"
+    name="descriptionTooltip"
+  />
+</geo-value>
\ No newline at end of file
diff --git a/src/elements/GeoValue/GeoValue.vue b/src/elements/GeoValue/GeoValue.vue
new file mode 100644
index 000000000..a4c3523cb
--- /dev/null
+++ b/src/elements/GeoValue/GeoValue.vue
@@ -0,0 +1,81 @@
+<template>
+  <div
+    :class="valueCssClasses"
+  >
+    <div class="geo-value__column">
+      <slot name="warningTooltip" />
+    </div>
+    <div class="geo-value__column">
+      <div class="geo-value__row">
+        <span
+          class="geo-value__value"
+        >
+          {{ value }}
+        </span>
+        <span
+          v-if="unit"
+          class="geo-value__unit"
+        >
+          {{ unit }}
+        </span>
+      </div>
+      <div class="geo-value__row">
+        <span
+          v-if="description"
+          class="geo-value__description"
+        >
+          {{ description }}
+        </span>
+        <slot name="descriptionTooltip" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixin, { TYPES } from './GeoValue.mixin'
+import { enumPropertyFactory } from '../../utils/enumPropertyFactory'
+
+/**
+ * `GeoValue` is a component for displaying data, specially designed to display Key Performance Indicators
+ */
+
+export default {
+  name: 'GeoValue',
+  status: 'ready',
+  release: '29.6.0',
+  constants: {
+    TYPES
+  },
+  mixins: [mixin],
+  props: {
+    /**
+     * Predefined type scheme of the GeoValue component
+     *
+     * > **Note:** There are specific components to avoid explicitly writing this value.
+     *
+     * | type         |            Specific component           | Proposed usage (example) |
+     * |--------------|-----------------------------------------|--------------------------|
+     * | `standard`   | [GeoValue](./GeoValue)                  | Standard                 |
+     * | `positive`   | [GeoPositiveValue](./GeoPositiveValue)  | Positive value           |
+     * | `neutral`    | [GeoNeutralValue](./GeoNeutralValue)    | Neutral value            |
+     * | `negative`   | [GeoNegativeValue](./GeoNegativeValue)  | Negative value           |
+     *
+     * Supported `type` values are exported under `TYPES` named export. See
+     * [Component Constants](/docs/guides/using-constants) for more info on how to
+     * use those constants in your code.
+     */
+    type: enumPropertyFactory({
+      componentName: 'GeoValue',
+      propertyName: 'type',
+      enumDictionary: TYPES,
+      defaultValue: TYPES.standard
+    })
+  },
+  computed: {
+    valueCssClasses () {
+      return `geo-value geo-value--${this.type} geo-value--${this.isPrimary ? 'is-primary' : 'is-secondary'}`
+    }
+  }
+}
+</script>
diff --git a/src/elements/GeoVerticalLayout/GeoVerticalLayout.examples.md b/src/elements/GeoVerticalLayout/GeoVerticalLayout.examples.md
index 48cf4b4c5..85f41771b 100644
--- a/src/elements/GeoVerticalLayout/GeoVerticalLayout.examples.md
+++ b/src/elements/GeoVerticalLayout/GeoVerticalLayout.examples.md
@@ -1,3 +1,52 @@
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block">
+      <geo-vertical-layout>
+        <geo-value
+          :data="datumData"
+        />
+        <geo-value
+          :data="datumData2"
+        />
+      </geo-vertical-layout>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GeoVerticalLayoutDemo',
+  data () {
+    return {
+      valueData: {
+        value: "27th of 73",
+        isPrimary: true,
+        unit: "",
+        description:"Es mayor que la media de tiendas",
+        descriptionTooltip:"Es mayor que la media de tiendas",
+        colorHighlight:"green"
+      },
+      valueData2: {
+        value: "27th of 73",
+        isPrimary: false,
+        unit: "",
+        description:"Es mayor que la media de tiendas",
+        descriptionTooltip:"Es mayor que la media de tiendas",
+        colorHighlight:"green"
+      }
+    }
+  },
+  computed: {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+```
+
 ### Simple vertical layout
 
 ```jsx live
diff --git a/src/styles/elements/GeoValue/_geo-value.scss b/src/styles/elements/GeoValue/_geo-value.scss
new file mode 100644
index 000000000..ec7faa926
--- /dev/null
+++ b/src/styles/elements/GeoValue/_geo-value.scss
@@ -0,0 +1,54 @@
+
+.geo-value {
+  border-radius: $border-radius-default;
+}
+
+.geo-value__column {
+  float: left;
+}
+
+.geo-value--is-primary {
+  .geo-value__value, .geo-value__unit {
+    @include font($display-medium);
+    display: inline-block;
+  }
+  .geo-value__description {
+    @include font($body-small);
+    margin-top: 3px;
+  }
+  &.geo-value--negative {
+    .geo-value__value, .geo-value__unit {
+      color: $color-red;
+    }
+  }
+  &.geo-value--neutral {
+    .geo-value__value, .geo-value__unit {
+      color: $color-yellow;
+    }
+  }
+  &.geo-value--positive {
+    .geo-value__value, .geo-value__unit {
+      color: $color-green;
+    }
+  }
+}
+
+.geo-value--is-secondary {
+  padding: 1px;
+  .geo-value__row {
+    display: inline-block;
+  }
+  .geo-value__value, .geo-value__unit, .geo-value__description {
+    @include font($body-small);
+    display: inline-block;
+  }
+  &.geo-value--negative {
+    background-color: $color-red;
+  }
+  &.geo-value--neutral {
+    background-color: $color-yellow;
+  }
+  &.geo-value--positive {
+    background-color: $color-green;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 12cde57ad..905ecea8c 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -87,4 +87,5 @@
 @import "../styles/elements/GeoHorizontalLayout/geo-horizontal-layout";
 @import "../styles/elements/GeoVerticalLayout/geo-vertical-layout";
 @import "../styles/elements/GeoSidebarLayout/geo-sidebar-layout";
+@import "../styles/elements/GeoValue/geo-value";
 @import "../styles/elements/GeoWizardLayout/geo-wizard-layout";
\ No newline at end of file
diff --git a/test/unit/specs/elements/GeoValue/GeoValue.spec.js b/test/unit/specs/elements/GeoValue/GeoValue.spec.js
new file mode 100644
index 000000000..9241a8c30
--- /dev/null
+++ b/test/unit/specs/elements/GeoValue/GeoValue.spec.js
@@ -0,0 +1,112 @@
+import { createLocalVue, mount } from '@vue/test-utils'
+import GeoValue from '@/elements/GeoValue/GeoValue.vue'
+import GeoPositiveValue from '@/elements/GeoValue/GeoPositiveValue.vue'
+import GeoNeutralValue from '@/elements/GeoValue/GeoNeutralValue.vue'
+import GeoNegativeValue from '@/elements/GeoValue/GeoNegativeValue.vue'
+
+// create an extended `Vue` constructor
+const localVue = createLocalVue()
+localVue.component('geo-value', GeoValue)
+localVue.component('geo-positive-value', GeoPositiveValue)
+localVue.component('geo-neutral-value', GeoNeutralValue)
+localVue.component('geo-negative-value', GeoNegativeValue)
+
+describe('GeoValue', () => {
+  it('Should display GeoValue primary value', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: true
+    }
+    const wrapper = mount(GeoValue, {
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value--is-primary').exists()).toBe(true)
+    expect(wrapper.find('.geo-value--is-primary .geo-value__value').text()).toBe(props.value)
+  })
+
+  it('Should display GeoValue secondary value', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: false
+    }
+    const wrapper = mount(GeoValue, {
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value--is-secondary').exists()).toBe(true)
+    expect(wrapper.find('.geo-value--is-secondary .geo-value__value').text()).toBe(props.value)
+  })
+
+  it('Should display GeoValue unit', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: false,
+      unit: '€'
+    }
+    const wrapper = mount(GeoValue, {
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value__unit').exists()).toBe(true)
+    expect(wrapper.find('.geo-value__unit').text()).toBe(props.unit)
+  })
+
+  it('Should display GeoValue description', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: false,
+      description: 'Mocked description'
+    }
+    const wrapper = mount(GeoValue, {
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value__description').exists()).toBe(true)
+    expect(wrapper.find('.geo-value__description').text()).toBe(props.description)
+  })
+
+  it('Should add appropiate type css class', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: true,
+      type: 'negative'
+    }
+    const wrapper = mount(GeoValue, {
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value--negative').exists()).toBe(true)
+  })
+
+  it('Should create a negative', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: true
+    }
+    const wrapper = mount(GeoNegativeValue, {
+      localVue,
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value--negative').exists()).toBe(true)
+  })
+
+  it('Should create a neutral', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: true
+    }
+    const wrapper = mount(GeoNeutralValue, {
+      localVue,
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value--neutral').exists()).toBe(true)
+  })
+
+  it('Should create a positive', () => {
+    const props = {
+      value: 'Mocked value',
+      isPrimary: true
+    }
+    const wrapper = mount(GeoPositiveValue, {
+      localVue,
+      propsData: props
+    })
+    expect(wrapper.find('.geo-value--positive').exists()).toBe(true)
+  })
+})