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 Emotion styles include the gridStyle JS Object and multiple JS 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: import { gridStyle, gridBasicColumnStart, gridBasicSpanOneHalf, … } from '@porsche-design-system/components-{js|angular|react|vue}/emotion'; Area gridStyle 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 JS style ...gridStyle to your wrapper element and use the JS Variables to assign the desired area to your content elements.
...gridStyle
gridColumn: `${gridFullColumnStart} / ${gridFullColumnEnd}`,
gridColumn: `${gridWideColumnStart} / ${gridWideColumnEnd}`
gridColumn: `${gridExtendedColumnStart} / ${gridExtendedColumnEnd}`
gridColumn: `${gridBasicColumnStart} / ${gridBasicColumnEnd}`
gridColumn: `${gridNarrowColumnStart} / ${gridNarrowColumnEnd}`
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).
...gridStyle
gridColumn: `${gridExtendedColumnStart} / ${gridExtendedSpanOneHalf}`
gridColumn: `${gridExtendedSpanOneHalf} / ${gridExtendedColumnEnd}`
gridColumn: `${gridBasicColumnStart} / ${gridBasicSpanOneHalf}`
gridColumn: `${gridBasicSpanOneHalf} / ${gridBasicColumnEnd}`
gridColumn: `${gridBasicColumnStart} / ${gridBasicSpanOneThird}`
gridColumn: `${gridBasicSpanOneThird}`
gridColumn: `${gridBasicSpanOneThird} / ${gridBasicColumnEnd}`
gridColumn: `${gridBasicColumnStart} / ${gridBasicSpanTwoThirds}`
gridColumn: `${gridBasicSpanOneThird} / ${gridBasicColumnEnd}`
gridColumn: `${gridBasicColumnStart} / ${gridBasicSpanOneThird}`
gridColumn: `${gridBasicSpanTwoThirds} / ${gridBasicColumnEnd}`
gridColumn: `${gridNarrowColumnStart} / ${gridNarrowSpanOneHalf}`
gridColumn: `${gridNarrowSpanOneHalf} / ${gridNarrowColumnEnd}`
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%