diff --git a/CHANGELOG.md b/CHANGELOG.md
index 628cb853e..fac14b7aa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
- take Markdown rendering into account before testing the maximum preview length
- ``
- header-menu items are vertically centered now
+- ``
+ - stabilize font size for on hover state
+ - use correct font sizes when `size` property is set
- `Typography`
- adjust displaying fallback symbols in different browsers
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
new file mode 100644
index 000000000..5c5e04629
--- /dev/null
+++ b/src/components/Link/Link.stories.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Link } from "../../../index";
+
+export default {
+ title: "Components/Link",
+ component: Link,
+ argTypes: {
+ target: {
+ control: "select",
+ options: ["_self", "_blank", "_parent", "_top"],
+ },
+ },
+} as Meta;
+
+const Template: StoryFn = (args) => ;
+
+export const Default = Template.bind({});
+Default.args = {
+ children: "Example link",
+ href: "https://example.com/",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+ children: "Disabled link",
+ href: "https://example.com/",
+ disabled: true,
+};
diff --git a/src/components/Link/link.scss b/src/components/Link/link.scss
index d07676b68..c5348af49 100644
--- a/src/components/Link/link.scss
+++ b/src/components/Link/link.scss
@@ -2,8 +2,34 @@
@include link.link;
.#{$prefix}--link {
- font-size: 1em;
- line-height: inherit;
+ &,
+ &:hover {
+ // default case: use font size from context
+ font-size: inherit;
+ line-height: inherit;
+ }
+
+ &.#{$prefix}--link--sm {
+ &,
+ &:hover {
+ font-size: $eccgui-size-typo-caption;
+ line-height: $eccgui-size-typo-caption-lineheight;
+ }
+ }
+ &.#{$prefix}--link--md {
+ &,
+ &:hover {
+ font-size: $eccgui-size-typo-text;
+ line-height: $eccgui-size-typo-text-lineheight;
+ }
+ }
+ &.#{$prefix}--link--lg {
+ &,
+ &:hover {
+ font-size: $eccgui-size-typo-subtitle;
+ line-height: $eccgui-size-typo-subtitle-lineheight;
+ }
+ }
&:focus {
outline: none;