Porsche Design System

Link Social 🚫

Table of Contents

Specific icon
Framework routing (anchor nesting)

Specific icon#

If another icon needs to be implemented, just replace the default icon with another pre-defined icon. Per default, all icons are fetched from the Porsche Design System CDN. Just choose an icon name from the icon property. If you need to link to another icon hosted somewhere else, just set the whole icon path to the iconSource prop.

Some label

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-link-social href="https://porsche.com" icon="logo-tumblr">
  Some label
</p-link-social>

<p-link-social href="https://porsche.com" icon-source="assets/icon-custom-kaixin.svg" hide-label="true">
  Some label
</p-link-social>
<script>

</script>
</body>
</html>

Framework routing (anchor nesting)#

To support custom anchor tags (e.g. framework specific routing) you can provide them as a slotted element of the component.

Some label

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-link-social>
  <a href="https://porsche.com">
    Some label
  </a>
</p-link-social>
<script>

</script>
</body>
</html>