Porsche Design SystemSearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
Hover Table of Contents Example The getHoverStyle() / pds-hover() style is still experimental, interface might change.

Hover Light

Some Anchor

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Hover Dark

Some Anchor

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'porsche-design-system-app',
  styles: [
    `
      @use '@porsche-design-system/components-angular/styles' as *;

      // Wrapper
      .wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: $pds-grid-gap;
        padding: $pds-spacing-fluid-medium;

        &--light {
          background: $pds-theme-light-background-base;
          color: $pds-theme-light-primary;
        }

        &--dark {
          background: $pds-theme-dark-background-base;
          color: $pds-theme-dark-primary;
        }
      }

      // Typography
      .heading {
        @include pds-heading-medium;
        text-align: center;
        width: 100%;
        margin: 0;
      }

      // Paragraph
      .paragraph {
        @include pds-text-small;
        margin: 0;
        max-width: 15rem;
      }

      // Native Anchor
      .native-anchor {
        @include pds-text-small;
        @include pds-hover;
        @include pds-focus('none');
        color: inherit;
      }
    `,
  ],
  template: `
    <div class="wrapper wrapper--light">
      <h3 class="heading">Hover Light</h3>
      <a href="#" class="native-anchor">Some Anchor</a>
      <p class="paragraph">
        Lorem Ipsum
        <a href="#" class="native-anchor">is simply dummy text of the printing</a> and typesetting industry.
      </p>
    </div>
    <div class="wrapper wrapper--dark">
      <h3 class="heading">Hover Dark</h3>
      <a href="#" class="native-anchor">Some Anchor</a>
      <p class="paragraph">
        Lorem Ipsum <a href="#" class="native-anchor">is simply dummy text of the printing</a> and typesetting industry.
      </p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: false,
})
export class ExampleComponent {}
Usage The :hover state gives visual feedback on interactive elements. It is only visible when the mouse is over the element to indicate the possibility of interaction. Styles The styles are available as JavaScript and SCSS version. Look at the example above to see how the styles work. JS When using JSS, styled-components etc. JavaScript styles can be imported by: import { … } from '@porsche-design-system/components-{js|angular|react|vue}/styles';. When using vanilla-extract JavaScript styles can be imported by: import { … } from '@porsche-design-system/components-{js|angular|react|vue}/styles/vanilla-extract';. getHoverStyle({ borderRadius: 'small' | 'medium' | string }) SCSS SCSS styles can be imported by @use '@porsche-design-system/components-{js|angular|react|vue}/styles' as *; @mixin pds-hover($border-radius: 'small' | 'medium' | any)
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)DirectionChanges the direction of HTML elements, mostly used on<html> tag to support languages which are read from right to left like e.g. Arabic.LTR (left-to-right)RTL (right-to-left)AutoText ZoomChanges the text size and values with unit rem or em relatively. This setting can be defined in browser settings for any website or by an application itself on<html> tag. To achieve WCAG 2.2 AA compliance it's obligatory to support text zoom up to at least 200%.100%130%150%200%