Porsche Design System

Spacing

Table of Contents

Example
Usage
Styles

Example#

Spacing Fluid (XS - XXL)

Spacing Static (XS - XXL)

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;
        align-items: flex-start;
        justify-content: center;
        gap: $pds-grid-gap;
        padding: $pds-spacing-fluid-medium;
      }

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

      // Tile
      .tile {
        @include pds-text-small;
        background: $pds-theme-light-contrast-low;
      }

      // Spacing Fluid
      .spacing-fluid-x-small {
        width: $pds-spacing-fluid-x-small;
        height: $pds-spacing-fluid-x-small;
      }

      .spacing-fluid-small {
        width: $pds-spacing-fluid-small;
        height: $pds-spacing-fluid-small;
      }

      .spacing-fluid-medium {
        width: $pds-spacing-fluid-medium;
        height: $pds-spacing-fluid-medium;
      }

      .spacing-fluid-large {
        width: $pds-spacing-fluid-large;
        height: $pds-spacing-fluid-large;
      }

      .spacing-fluid-x-large {
        width: $pds-spacing-fluid-x-large;
        height: $pds-spacing-fluid-x-large;
      }

      .spacing-fluid-xx-large {
        width: $pds-spacing-fluid-xx-large;
        height: $pds-spacing-fluid-xx-large;
      }

      // Spacing Static
      .spacing-static-x-small {
        width: $pds-spacing-static-x-small;
        height: $pds-spacing-static-x-small;
      }

      .spacing-static-small {
        width: $pds-spacing-static-small;
        height: $pds-spacing-static-small;
      }

      .spacing-static-medium {
        width: $pds-spacing-static-medium;
        height: $pds-spacing-static-medium;
      }

      .spacing-static-large {
        width: $pds-spacing-static-large;
        height: $pds-spacing-static-large;
      }

      .spacing-static-x-large {
        width: $pds-spacing-static-x-large;
        height: $pds-spacing-static-x-large;
      }

      .spacing-static-xx-large {
        width: $pds-spacing-static-xx-large;
        height: $pds-spacing-static-xx-large;
      }
    `,
  ],
  template: `
    <div class="wrapper">
      <h3 class="heading">Spacing Fluid (XS - XXL)</h3>
      <div class="spacing-fluid-x-small tile"></div>
      <div class="spacing-fluid-small tile"></div>
      <div class="spacing-fluid-medium tile"></div>
      <div class="spacing-fluid-large tile"></div>
      <div class="spacing-fluid-x-large tile"></div>
      <div class="spacing-fluid-xx-large tile"></div>
    </div>
    <div class="wrapper">
      <h3 class="heading">Spacing Static (XS - XXL)</h3>
      <div class="spacing-static-x-small tile"></div>
      <div class="spacing-static-small tile"></div>
      <div class="spacing-static-medium tile"></div>
      <div class="spacing-static-large tile"></div>
      <div class="spacing-static-x-large tile"></div>
      <div class="spacing-static-xx-large tile"></div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: false,
})
export class ExampleComponent {}

Usage#

Fluid spacing scale up or down based on the size of the viewing device or browser window in a predefined range. This is in contrast to using static spacing, which is set using a specific pixel value and does not scale.

Do:

Use the fluid spacers to ensure a smooth and proportional scaling of space between elements, groups, and sections that are aligned with the fluid typography and grid.

Use "m" as the default space value since it corresponds to the grid-gap.

Use values from "xs" to "l" for distances within a container, such as between heading, text, and buttons, or for spacing and grouping of form fields.

Use values from "l" to "xxl" for spacing between sections on a page.

Don't:

Only use the static spacers when needed (e.g. within custom components).

Don't use values outside the recommended range for specific types of spacing.

Don't change the fluid spacer manually based on different viewports.

Styles#

The styles are available as JavaScript and SCSS version. Look at the example above to see how the styles work.

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';.

spacing

spacingFluid

spacingFluidXSmall

spacingFluidSmall

spacingFluidMedium

spacingFluidLarge

spacingFluidXLarge

spacingFluidXXLarge

spacingStatic

spacingStaticXSmall

spacingStaticSmall

spacingStaticMedium

spacingStaticLarge

spacingStaticXLarge

spacingStaticXXLarge

SCSS

SCSS styles can be imported by @use '@porsche-design-system/components-{js|angular|react|vue}/styles' as *;

$pds-spacing-fluid-x-small

$pds-spacing-fluid-small

$pds-spacing-fluid-medium

$pds-spacing-fluid-large

$pds-spacing-fluid-x-large

$pds-spacing-fluid-xx-large

$pds-spacing-static-x-small

$pds-spacing-static-small

$pds-spacing-static-medium

$pds-spacing-static-large

$pds-spacing-static-x-large

$pds-spacing-static-xx-large