Porsche Design System

Link

Table of Contents

Framework routing (anchor nesting)
Link with specific icon

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="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

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

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

Link with specific icon#

If an icon needs to be implemented, just set another predefined 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="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

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

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

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