--- title: "Linking Element" description: "The Link Component can be used to display a single Link or multiple Links in a Link List to link to other Content." path: https://www.eonshowroom.eon.com/en/content-elements/linking-element.html lastModified: 2026-03-25T09:46:05.672Z --- # Linking Element # Link [Internal Link](https://www.eonshowroom.eon.com/en/content-elements/linking-element.html) [External Link](https://www.nytimes.com/) [Download Link (PDF)](https://www.eonshowroom.eon.com/content/dam/foundationNG/documents/Test%252520Document.pdf) [Download Link (Image)](https://www.eonshowroom.eon.com/content/dam/foundationNG/images/abstract/abstract_lights_stars.jpg) [How to Configure](#how-to) ### Description The Link Component can be used to display a single Link or a Link List to link to other Content. - Correct Icons for Social Media Links, Phone, and Mail Links are coming automatically, if it is configured correctly - Also Links for Downloads are possible - Additionally other Icons can be set manually [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/navigation-link--interactive) ### Inspirations #### Hidden content Popup overlay (Modal) [Modal ID: nobutton] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. [Facebook Link](https://de-de.facebook.com/) [Instagram Link](https://www.instagram.com/?hl=de) [Twitter Link](https://twitter.com/explore) [YouTube Link](https://www.youtube.com/?gl=DE) [Anchor Link](https://www.eonshowroom.eon.com/en/content-elements/linking-element.html#usage) Open Modal [Telephone Link](tel:0123456) [Mail Link](mailto:abc123@eon.com) [Custom Icon (sun)](https://www.eonshowroom.eon.com/en/content-elements/linking-element.html) ### Usage Rules & Features ##### Features - Correct Icons for Social Media Links, Phone, and Mail Links are coming automatically, if it is configured correctly - Internal Links are always coming with Arrow Icon, while External Links are always coming with special External Link Icon ##### Properties - 4 Different Link Types are choosable: Link, Download, Anchor,and Modal - Manual Link Alignment is possible ##### Design - Additional Color Schemes are available ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | in Edge Cases | | 3 | yes | | 4 | yes | | 5 | yes | | 6 | yes | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | yes | ##### DO's - Use Trailing Icons for single Links and Leading Icons for Link Lists - Use Title only if it adds Value. ##### DONT's - Do not use hard coded Links with http(s) for internal Links, as this will come with External Link Icon - Do not have same Text and Title, as this may confuse Screen Reader User. ## Configuration ## Trackable Component This Component can be tracked. [Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/link_cta-type%3A3-4?fmt=webp) ### Choose CTA Type As a first Step, Editor needs to choose CTA Type. Available Types are: - Link (default) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/link_icon-position%3A3-4?fmt=webp) ### Configure Icon Position If necessary, Editor can activate to adjust Icon Alignment manually. #### Keep in Mind For UI Kit Version 4.19.0 or higher, Icon Position is managed automatically and this Setting will be ignored. If using this Setting, please only adjust Icon Position manually if needed. Avoid Trailing Icons for Link Lists. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/link_type%3A3-4?fmt=webp) ### Choose Link Type Next Choice for Editor is about Link Type per added Link. As default one Link is already added and can be maintained. More Links can be added via Click on Add Button. Link Type can be: - Link - Download - Anchor - Modal ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/link_type-link%3A3-4?fmt=webp) ### Configure Type Link If Link Type Link is choosen, Editor can enter a Text for and a Title for this Link. Please ensure to not have same Text and Title, as this may confuse Screen Reader User. Use Title only if it adds Value. To configure the Link, Editor needs to enter the Path the Link should lead to in Link URL Field. It can be an external or internal Link, as well as a Phone or Mail Link. For Default Link Icon, following Configurations are possible: - Internal = "/content" before the URL - External = "https://" before the URL - Phone = tel:+4912345 - Mail = mailto:abc123@eon.com - Social Media = https://www.your-social-media-adress.com Beside that, Editor can enable "Adjust Link (Target, Icon and Info Icon). Then, following Options are available: - "Open in a new Window" Option if Link should not open in same Window. - Link Icon can be choosen as Default, Download, or Custom Icon (select Icon Name*) - Selecting "Enable Info Icon" Checkbox reveals some Option for adding an Info Icon. List of available Link Icon can be configured in [FoundationNg Link Icon Config](/content/foundationNG/en/aem-basics/configuration-pages/foundationng-link-icon-config.html). Beside that it is possible to attach URL Parameters to the Link. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/link_type-download%3A3-4?fmt=webp) ### Configure Type Download If Link Type Link is choosen, Editor can enter a Text for and a Title for this Link. Please ensure to not have same Text and Title, as this may confuse Screen Reader User. Use Title only if it adds Value. To configure the Link, Editor needs to enter the Path the Link should lead to in Link URL Field. It should be a Link to a File for Download. Beside that, Editor can enable "Adjust Link (Target, Icon and Info Icon). Then, following Options are available: - "Open in a new Window" Option if Link should not open in same Window. - Link Icon can be choosen as Default, Download, or Custom Icon (select Icon Name*) - Selecting "Enable Info Icon" Checkbox reveals some Option for adding an Info Icon. List of available Link Icon can be configured in [FoundationNg Link Icon Config](/content/foundationNG/en/aem-basics/configuration-pages/foundationng-link-icon-config.html). Beside that it is possible to attach URL Parameters to the Link. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/link_type-anchor%3A3-4?fmt=webp) ### Configure Type Anchor If Link Type Anchor is choosen, Editor can enter a Text for and a Title for this Link. Please ensure to not have same Text and Title, as this may confuse Screen Reader User. Use Title only if it adds Value. To configure the Link, Editor needs to enter the Path the Link should lead to in Link URL Field. It must be an internal Link. Then, Anchor ID can be entered or selected from the available Anchors on that Page. Beside that, Editor can enable "Adjust Link (Target, Icon and Info Icon). Then, following Options are available: - "Open in a new Window" Option if Link should not open in same Window. - Link Icon can be choosen as Default, Download, or Custom Icon (select Icon Name*) - Selecting "Enable Info Icon" Checkbox reveals some Option for adding an Info Icon. List of available Link Icon can be configured in [FoundationNg Link Icon Config](/content/foundationNG/en/aem-basics/configuration-pages/foundationng-link-icon-config.html). Beside that it is possible to attach URL Parameters to the Link. #### Keep in Mind If your Page URLs do not have .html Appendix, please choose the same in FoundationNg Site Config. This is needed to configure Anchor Links correctly. [Read more about FoundationNg Site Config](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/link_type-modal%3A3-4?fmt=webp) ### Configure Type Modal If Link Type Modal is choosen, can enter a Text and a Title for this Link. Please ensure to not have same Text and Title, as this may confuse Screen Reader User. Use Title only if it adds Value. To configure the Modal Link, Editor needs to enter the Modal ID of the Modal, which should be opened by the Link. Beside that, Editor can enable "Adjust Link (Target, Icon and Info Icon). Then, following Options are available: - "Open in a new Window" Option if Link should not open in same Window. - Link Icon can be choosen as Default, Download, or Custom Icon (select Icon Name*) - Selecting "Enable Info Icon" Checkbox reveals some Option for adding an Info Icon. List of available Link Icon can be configured in [FoundationNg Link Icon Config](/content/foundationNG/en/aem-basics/configuration-pages/foundationng-link-icon-config.html). Beside that it is possible to attach URL Parameters to the Link. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/link_info-icon%3A3-4?fmt=webp) ### Add Info Icon For each Link, independent from Link Type, an Info Icon can be added. By enabling corresponding Checkbox under "Adjust Link (Target, Icon, and Info Icon)" Dialog, Editor can configure the Info Icon and choose a Path to an Experience Fragment of a Tooltip. [Read More about configuring Tooltip](https://www.eonshowroom.eon.com/en/content-elements/tooltip.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/link_color%3A1-1?fmt=webp) ### Adjust Color Scheme In Color Scheme Tab, Editor can select to adjust the Color Scheme. Once "Adjust Color Scheme" Checkbox is selected Editor has to select on which Background the Component is used. Depending on the Background Color different Color Schemes can be selected. But for E.ON Color Scheme only one Color per Background is selectable.