Porsche Design System

Link Pure

Table of Contents

Link with specific icon
Framework routing (anchor nesting)
Examples how to use with Framework specific router and 'active state' support
Link Pure with custom clickable/focusable area

Link with specific icon#

If another icon needs to be implemented, just replace the default icon with 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="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

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

<p-link-pure href="https://porsche.com" icon-source="assets/icon-custom-kaixin.svg" hide-label="true">
  Some label
</p-link-pure>
<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 (recommended) 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-pure>
  <a href="https://porsche.com">
    Some label
  </a>
</p-link-pure>
<script>

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

Examples how to use with Framework specific router and "active state" support#

Angular

<p-link-pure [active]="rla.isActive">
  <a routerLink="/path/to/heaven" routerLinkActive #rla="routerLinkActive"></a>
</p-link-pure>

React

<PLinkPure active={isActive}>
  <Link to="/path/to/heaven">Some label</Link>
</PLinkPure>

VueJs

<router-link :to="/path/to/heaven" v-slot="{ href, navigate, isActive }">
  <p-link-pure :href="href" @click="navigate" :active="isActive">Some label</p-link-pure>
</router-link>

Link Pure with custom clickable/focusable area#

Sometimes it might be useful to enlarge the clickable/focusable area of a link to fulfill accessibility guidelines. Therefore a custom padding can be set on the host element.

Some label

Open in Stackblitz

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

<p-link-pure href="https://porsche.com" class="p-static-md">
  Some label
</p-link-pure>
<script>

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