Porsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
ExamplesUsageAPI
Grid Table of Contents The Porsche Design System SCSS styles include the custom @mixin pds-grid() and multiple variables, which together form a generic layout system called the "Porsche Grid". This system ensures consistent content placement and alignment across multiple Porsche applications. The Porsche Grid is based on native CSS Grid, changing its available columns on mobile (6 content columns + 2 safe zone columns) and desktop view >= 760px viewport width (8-narrow/12-basic/14-extended/16-wide content columns + 2 safe zone columns). It has a size range between 320px and 2560px, using fluid sized columns and gaps. The Porsche Grid must be applied once at the top level, span the full viewport width, and cannot be nested. Styles import: @use '@porsche-design-system/components-{js|angular|react|vue}/scss' as *; Area @include pds-grid; defines a new instance of the Porsche Grid. Although content placement is flexible across any CSS grid column, predefined areas full, wide, extended, basic and narrow are provided for consistency. Apply the mixin @include pds-grid; to your wrapper element and use the SCSS variables to assign the desired area to your content elements.
@include pds-grid;
grid-column: $pds-grid-full-column-start / $pds-grid-full-column-end;
grid-column: $pds-grid-wide-column-start / $pds-grid-wide-column-end;
grid-column: $pds-grid-extended-column-start / $pds-grid-extended-column-end;
grid-column: $pds-grid-basic-column-start / $pds-grid-basic-column-end;
grid-column: $pds-grid-basic-narrow-start / $pds-grid-narrow-column-end;
Division Predefined areas can inherit the Porsche Grid using CSS subgrid, enabling layout divisions such as one-half, one-third (basic area only) and two-thirds (basic area only).
@include pds-grid;
grid-column: $pds-grid-extended-column-start / $pds-grid-extended-span-one-half;
grid-column: $pds-grid-extended-span-one-half / $pds-grid-extended-column-end;
grid-column: $pds-grid-basic-column-start / $pds-grid-basic-span-one-half;
grid-column: $pds-grid-basic-span-one-half / $pds-grid-basic-column-end;
grid-column: $pds-grid-basic-column-start / $pds-grid-basic-span-one-third;
grid-column: $pds-grid-basic-span-one-third;
grid-column: $pds-grid-basic-span-one-third / $pds-grid-basic-column-end;
grid-column: $pds-grid-basic-column-start / $pds-grid-basic-span-two-thirds;
grid-column: $pds-grid-basic-span-one-third / $pds-grid-basic-column-end;
grid-column: $pds-grid-basic-column-start / $pds-grid-basic-span-one-third;
grid-column: $pds-grid-basic-span-two-thirds / $pds-grid-basic-column-end;
grid-column: $pds-grid-narrow-column-start / $pds-grid-narrow-span-one-half;
grid-column: $pds-grid-narrow-span-one-half / $pds-grid-narrow-column-end;
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%