Porsche Design SystemSearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
ConfiguratorExamplesUsageAccessibilityAPI
Link Social 🚫 Table of Contents The link-social component is deprecated and will be removed with next major release. Use link component with corresponding social icon instead. When to use Use a Link Social to enable the user to link to social media platforms or social sharing dialogs. Types To ensure a seamless UX in all Porsche web applications it is recommended to use the Link Social as follows VariantUsageIcon and labelDue to better comprehensibility and accessibility, you should preferably go for this variant. The length of the link always adapts to the length of the label. As for the icon, you can either choose between one of the social platform icons provided in the Porsche icon set or also use a specific icon, whereas it must refer (which should be clear) to a social platform.Icon onlyThis variant contains an icon only with no further text information. It should preferably be used e.g. for social sharing links, when the user is totally aware of the button functionality due to a clear context.GroupThe Link Social group contains the most used social icons that can be used as a group. Usage Icon The icon refers to the logo of the respective social platform. For the specific social icons the corresponding icon must be used. Label The label within a link should always be short and descriptive. Hover state As for the social icons that are currently provided in the Porsche Design System, the background changes to the specific corporate social platform color on hover. For specific social icons, for which no brand color is currently provided in the Porsche Design System, a dark grey must be used as hover color instead (as defined for the standard Button/Link).
Global settingsThemeChanges the theme of the application and any Porsche Design System component. It's possible to choose between forced theme light and dark. It's also possible to use auto, which applies light or dark theme depending on the operating system settings automatically.LightDarkAuto (sync with operating system)DirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%