Skip to contentPorsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchGitHub repository of Porsche Design SystemOpen settings sidebar
Grid Table of Contents Classes Base Tailwind @utility CSS classDescription.grid-templateApplies the responsive Porsche Grid template with named column areas. Narrow Tailwind @utility CSS classDescription.col-narrowPlaces content across the narrow area of the Porsche Grid..col-start-narrowSets the start position of the narrow area within the Porsche Grid..col-end-narrowSets the end position of the narrow area within the Porsche Grid. Basic Tailwind @utility CSS classDescription.col-basicPlaces content across the basic area of the Porsche Grid..col-start-basicSets the start position of the basic area within the Porsche Grid..col-end-basicSets the end position of the basic area within the Porsche Grid. Extended Tailwind @utility CSS classDescription.col-extendedPlaces content across the extended area of the Porsche Grid..col-start-extendedSets the start position of the extended area within the Porsche Grid..col-end-extendedSets the end position of the extended area within the Porsche Grid. Wide Tailwind @utility CSS classDescription.col-widePlaces content across the wide area of the Porsche Grid..col-start-wideSets the start position of the wide area within the Porsche Grid..col-end-wideSets the end position of the wide area within the Porsche Grid. Full Tailwind @utility CSS classDescription.col-fullApplies the start/end position of the full area within the Porsche Grid..col-start-fullSets the start position of the full area within the Porsche Grid..col-end-fullSets the end position of the full area within the Porsche Grid. Span Tailwind @utility CSS classDescription.col-span-one-halfSpans content across one half of the current Porsche Grid area..col-span-one-thirdSpans content across one third of the current Porsche Grid area..col-span-two-thirdsSpans content across two thirds of the current Porsche Grid area.
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%