diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5b3e5e6..d0883e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [0.27.0](https://github.com/Fantom-foundation/Fantom-Vue3-Components/compare/v0.26.2...v0.27.0) (2022-09-22)
+
+
+### Features
+
+* **FStyledNumber:** create component ([6051f9a](https://github.com/Fantom-foundation/Fantom-Vue3-Components/commit/6051f9a6d6ab0939436128e3d1fb4d32bf4e6d8f))
+* **FToken:** add slots ([212a7ed](https://github.com/Fantom-foundation/Fantom-Vue3-Components/commit/212a7ede786738e78f33c1ef26e04e3d03bd97d5))
+
 ### [0.26.2](https://github.com/Fantom-foundation/Fantom-Vue3-Components/compare/v0.26.1...v0.26.2) (2022-09-21)
 
 
diff --git a/package-lock.json b/package-lock.json
index da13c7a..f04e54b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "fantom-vue3-components",
-    "version": "0.26.2",
+    "version": "0.27.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "fantom-vue3-components",
-            "version": "0.26.2",
+            "version": "0.27.0",
             "license": "MIT",
             "dependencies": {
                 "@vueuse/core": "^8.5.0",
diff --git a/package.json b/package.json
index c52a5af..0482037 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "fantom-vue3-components",
-    "version": "0.26.2",
+    "version": "0.27.0",
     "description": "Library of various Vue 3 components with focus on accessibility",
     "author": "Fantom Foundation",
     "license": "MIT",
diff --git a/src/assets/scss/settings/custom-properties/_index.scss b/src/assets/scss/settings/custom-properties/_index.scss
index 1cb767a..a07d397 100755
--- a/src/assets/scss/settings/custom-properties/_index.scss
+++ b/src/assets/scss/settings/custom-properties/_index.scss
@@ -8,3 +8,4 @@
 @forward "border-radius";
 @forward "box-shadow";
 @forward "form-inputs";
+@forward "opacity";
diff --git a/src/assets/scss/settings/custom-properties/_opacity.scss b/src/assets/scss/settings/custom-properties/_opacity.scss
new file mode 100644
index 0000000..9300c5e
--- /dev/null
+++ b/src/assets/scss/settings/custom-properties/_opacity.scss
@@ -0,0 +1,16 @@
+/**
+ CSS custom properties for opacity.
+ */
+
+:root {
+    --f-opacity-0: 0;
+    --f-opacity-1: 0.1;
+    --f-opacity-2: 0.2;
+    --f-opacity-3: 0.3;
+    --f-opacity-4: 0.4;
+    --f-opacity-5: 0.5;
+    --f-opacity-6: 0.6;
+    --f-opacity-7: 0.7;
+    --f-opacity-8: 0.8;
+    --f-opacity-9: 0.9;
+}
diff --git a/src/components/FStyledNumber/FStyledNumber.spec.js b/src/components/FStyledNumber/FStyledNumber.spec.js
new file mode 100644
index 0000000..7213762
--- /dev/null
+++ b/src/components/FStyledNumber/FStyledNumber.spec.js
@@ -0,0 +1,64 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { destroyWrapper } from '@/test/utils.js';
+import FStyledNumber from './FStyledNumber.vue';
+
+let wrapper = null;
+
+function createWrapper(options = {}) {
+    return mount(FStyledNumber, options);
+}
+
+afterEach(() => {
+    destroyWrapper(wrapper);
+});
+
+describe('FStyledNumber', () => {
+    it('should split number to integer, delimiter and fraction parts', () => {
+        wrapper = createWrapper({
+            props: {
+                value: 0.123,
+            },
+        });
+
+        expect(wrapper.findByTestId('int').text()).toBe('0');
+        expect(wrapper.findByTestId('dlm').text()).toBe('.');
+        expect(wrapper.findByTestId('frac').text()).toBe('123');
+    });
+
+    it('should properly handle value with no fraction part', () => {
+        wrapper = createWrapper({
+            props: {
+                value: 123,
+            },
+        });
+
+        expect(wrapper.findByTestId('int').text()).toBe('123');
+        expect(wrapper.findByTestId('dlm').exists()).toBe(false);
+        expect(wrapper.findByTestId('frac').exists()).toBe(false);
+    });
+
+    it('should properly handle string values', () => {
+        wrapper = createWrapper({
+            props: {
+                value: '123 456,789',
+            },
+        });
+
+        expect(wrapper.findByTestId('int').text()).toBe('123 456');
+        expect(wrapper.findByTestId('dlm').text()).toBe(',');
+        expect(wrapper.findByTestId('frac').text()).toBe('789');
+    });
+
+    it('should properly handle string values with commas', () => {
+        wrapper = createWrapper({
+            props: {
+                value: '123,456,789.123',
+            },
+        });
+
+        expect(wrapper.findByTestId('int').text()).toBe('123,456,789');
+        expect(wrapper.findByTestId('dlm').text()).toBe('.');
+        expect(wrapper.findByTestId('frac').text()).toBe('123');
+    });
+});
diff --git a/src/components/FStyledNumber/FStyledNumber.stories.js b/src/components/FStyledNumber/FStyledNumber.stories.js
new file mode 100644
index 0000000..ffddad1
--- /dev/null
+++ b/src/components/FStyledNumber/FStyledNumber.stories.js
@@ -0,0 +1,41 @@
+import FStyledNumber from './FStyledNumber.vue';
+
+export default {
+    title: 'FStyledNumber',
+    component: FStyledNumber,
+};
+
+export const Default = () => ({
+    components: { FStyledNumber },
+    template: `
+        <div>
+            <FStyledNumber :value="0.123" />
+        </div>
+    `,
+});
+
+export const Styling = () => ({
+    components: { FStyledNumber },
+    template: `
+        <div>
+            <FStyledNumber :value="0.123" :style="style1" /><br /><br />
+            <FStyledNumber value="123 456,789" :style="style2" /><br /><br />
+        </div>
+    `,
+    data() {
+        return {
+            style1: {
+                '--fstylednumber-font-size': '2em',
+                '--fstylednumber-int-font-size': '0.75em',
+                '--fstylednumber-int-opacity': '0.6',
+            },
+            style2: {
+                '--fstylednumber-int-font-weight': 'bold',
+                '--fstylednumber-int-color': 'red',
+                '--fstylednumber-dlm-opacity': '0.4',
+                '--fstylednumber-frac-font-size': '0.9em',
+                '--fstylednumber-frac-opacity': '0.4',
+            },
+        };
+    },
+});
diff --git a/src/components/FStyledNumber/FStyledNumber.vue b/src/components/FStyledNumber/FStyledNumber.vue
new file mode 100644
index 0000000..4847af0
--- /dev/null
+++ b/src/components/FStyledNumber/FStyledNumber.vue
@@ -0,0 +1,109 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    value: {
+        type: [String, Number],
+        default: '',
+        required: true,
+    },
+});
+
+const cNumber = computed(() => {
+    return getNumberParts(props.value);
+});
+
+function getSplittedNumber(number, delimiter) {
+    return number.toString().split(delimiter);
+}
+
+function getNumberParts(number) {
+    const parts = {};
+    let delimiter = '.';
+    let split = getSplittedNumber(number, delimiter);
+
+    if (split.length === 1) {
+        delimiter = ',';
+        split = getSplittedNumber(number, delimiter);
+    }
+
+    if (split.length > 0) {
+        parts.integer = split[0];
+
+        if (split.length === 2) {
+            parts.integer = split[0];
+            parts.delimiter = delimiter;
+            parts.fraction = split[1];
+        }
+    }
+
+    return parts;
+}
+</script>
+
+<template>
+    <span class="fstylednumber">
+        <span v-if="cNumber.integer !== undefined" class="fstylednumber_int" data-testid="int">
+            {{ cNumber.integer }}
+        </span>
+        <span v-if="cNumber.delimiter !== undefined" data-testid="dlm" class="fstylednumber_dlm">
+            {{ cNumber.delimiter }}
+        </span>
+        <span v-if="cNumber.fraction !== undefined" data-testid="frac" class="fstylednumber_frac">
+            {{ cNumber.fraction }}
+        </span>
+    </span>
+</template>
+
+<style lang="scss">
+.fstylednumber {
+    --fstylednumber-font-size: initial;
+    --fstylednumber-color: initial;
+    --fstylednumber-font-weight: initial;
+    --fstylednumber-opacity: initial;
+
+    // integer part
+    --fstylednumber-int-font-size: initial;
+    --fstylednumber-int-color: initial;
+    --fstylednumber-int-font-weight: initial;
+    --fstylednumber-int-opacity: initial;
+
+    // delimiter
+    --fstylednumber-dlm-font-size: initial;
+    --fstylednumber-dlm-color: initial;
+    --fstylednumber-dlm-font-weight: initial;
+    --fstylednumber-dlm-opacity: initial;
+
+    // fraction part
+    --fstylednumber-frac-font-size: initial;
+    --fstylednumber-frac-color: initial;
+    --fstylednumber-frac-font-weight: initial;
+    --fstylednumber-frac-opacity: initial;
+
+    font-size: var(--fstylednumber-font-size);
+    color: var(--fstylednumber-color);
+    font-weight: var(--fstylednumber-font-weight);
+    opacity: var(--fstylednumber-opacity);
+
+    &_int {
+        font-size: var(--fstylednumber-int-font-size);
+        color: var(--fstylednumber-int-color);
+        font-weight: var(--fstylednumber-int-font-weight);
+        opacity: var(--fstylednumber-int-opacity);
+    }
+
+    &_dlm {
+        font-size: var(--fstylednumber-dlm-font-size);
+        color: var(--fstylednumber-dlm-color);
+        font-weight: var(--fstylednumber-dlm-font-weight);
+        opacity: var(--fstylednumber-dlm-opacity);
+    }
+
+    &_frac {
+        font-size: var(--fstylednumber-frac-font-size);
+        color: var(--fstylednumber-frac-color);
+        font-weight: var(--fstylednumber-frac-font-weight);
+        opacity: var(--fstylednumber-frac-opacity);
+    }
+}
+</style>
diff --git a/src/components/FToken/FToken.stories.js b/src/components/FToken/FToken.stories.js
index 67f3a73..b79d45d 100644
--- a/src/components/FToken/FToken.stories.js
+++ b/src/components/FToken/FToken.stories.js
@@ -124,3 +124,16 @@ export const NoSymbol = () => ({
         </div>
     `,
 });
+
+export const Slots = () => ({
+    components: { FToken },
+    //language=HTML
+    template: `
+        <div>
+            <FToken :token="{ symbol: 'FTM', logo: 'avatar.png' }" :value="123456.789">
+                <template #value="{ value }"><b>{{ value }}</b></template>
+                <template #symbol="{ symbol }">{{ symbol.toLowerCase() }}</template>
+            </FToken>
+        </div>
+    `,
+});
diff --git a/src/components/FToken/FToken.vue b/src/components/FToken/FToken.vue
index 3a03027..aa2d938 100644
--- a/src/components/FToken/FToken.vue
+++ b/src/components/FToken/FToken.vue
@@ -82,8 +82,12 @@ const cTitle = computed(() => (props.value ? `${props.value} ${cSymbol.value}` :
                 :content-loaded="!usePlaceholder || cValue !== ''"
                 data-testid="placeholder"
             >
-                <span v-if="cValue" class="ftoken_value">{{ cValue }}</span>
-                <span v-if="cSymbol" class="ftoken_symbol">{{ cSymbol }}</span>
+                <span v-if="cValue" class="ftoken_value">
+                    <slot name="value" :value="cValue">{{ cValue }}</slot>
+                </span>
+                <span v-if="cSymbol" class="ftoken_symbol">
+                    <slot name="symbol" :symbol="cSymbol">{{ cSymbol }}</slot>
+                </span>
             </FPlaceholder>
         </span>
     </span>
diff --git a/src/components/index.js b/src/components/index.js
index 85ca6c6..0cf1392 100755
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -63,3 +63,4 @@ export { default as FToken } from './FToken/FToken.vue';
 export { default as FUploadArea } from './FUploadArea/FUploadArea.vue';
 export { default as FUploadAreaFormInput } from './FUploadAreaFormInput/FUploadAreaFormInput.vue';
 export { default as FViewSwitcher } from './FViewSwitcher/FViewSwitcher.vue';
+export { default as FStyledNumber } from './FStyledNumber/FStyledNumber.vue';