Links are, just like buttons, the basis for interacting with users. There are three versions, depending on the component they are used with.

  • Links can be combined with almost any kind of component, e.g. copy,  teasers, contact tiles, stage and media components, etc.
  • Texts should be as short and as activating as possible to make sure the user understands the aim of the Link.
  • The link color is based on the main corporate color of the page.
  • Links are always placed left aligned below the copy (except text links as these are integrated within the copy).

Standard link

The Standard Link is always combined with an icon. For general links the arrow in a circle is used to mark the link as being one.

a. Links can be placed on light (including pale colors), corporate color or neutral backgrounds.
b. On mouse-over, the link on the light background fades into dark grey, the link on corporate colors fades into light grey and the link on neutral backgrounds turns into middle grey.
c. To illustrate special links, a suitable icon can be used (e.g. download links or calendar links).

standard link.jpg

Stage link

This link version is only used in stages and media components. It can be placed below headlines or copy there. To mark the link, a big arrow is used. The mouse-over mechanism matches the one of the standard links.

stage link.jpg

Text links

Text links appear in between copy texts in the corporate color used on the page and are underlined on mouse-over. They are used to link words in context to the copy.

text link.jpg

responsive behaviour.jpg
Links behave the same in all viewports. The copy and icon size shrinks as defined in the overarching typography rules.

Related topics


Kontakt und Feedback

Das Team Brand Consultancy berät Sie gerne bei Fragen: Kontakt.
Wir freuen uns über ein Feedback zum Brand Portal.