# Patterns and templates

Every pattern and template with its reference, and what all of them share: the conventions of their references and their stylesheet. Start from the example closest to the task; keep its landmarks, labels and focus handling, and replace its placeholder content, links and media and the demo logic of its script.

## Patterns

| Pattern | Description | Components | Reference |
| --- | --- | --- | --- |
| Feedback: Dialog | A trigger button opens the same rating-and-comment flow inside a dialog, keeping the page uncluttered. It can be launched from any action on the page, which makes it ideal for task-focused or space-constrained contexts where feedback should stay available but out of the way. | [`p-button`](./components/p-button/p-button.md), [`p-heading`](./components/p-heading/p-heading.md), [`p-modal`](./components/p-modal/p-modal.md), [`p-segmented-control`](./components/p-segmented-control/p-segmented-control.md), [`p-text`](./components/p-text/p-text.md), [`p-textarea`](./components/p-textarea/p-textarea.md) | [dialog.md](./examples/patterns/feedback/dialog.md) |
| Feedback: Inline | The rating sits directly in the page flow, typically at the end of the content, and stays visible at all times. Once feedback is submitted, it shows a confirmation and offers the option to start over and give new feedback. | [`p-button`](./components/p-button/p-button.md), [`p-heading`](./components/p-heading/p-heading.md), [`p-segmented-control`](./components/p-segmented-control/p-segmented-control.md), [`p-text`](./components/p-text/p-text.md), [`p-textarea`](./components/p-textarea/p-textarea.md) | [inline.md](./examples/patterns/feedback/inline.md) |
| Footer | The footer serves as a universal navigation and information hub located at the bottom of every page. It provides essential links, copyright information, legal disclaimers, and contact details, ensuring users can easily access key information regardless of their location on the site. | [`p-flag`](./components/p-flag/p-flag.md), [`p-heading`](./components/p-heading/p-heading.md), [`p-link-pure`](./components/p-link-pure/p-link-pure.md), [`p-select`](./components/p-select/p-select.md), [`p-text`](./components/p-text/p-text.md), [`p-wordmark`](./components/p-wordmark/p-wordmark.md) | [footer.md](./examples/patterns/footer.md) |
| Header: Overlay | The header lies on top of the content, typically a full-bleed hero image or video, and is reduced to a single row with brand, navigation and meta actions. The menu opens a drilldown with the site navigation. | [`p-button`](./components/p-button/p-button.md), [`p-button-pure`](./components/p-button-pure/p-button-pure.md), [`p-crest`](./components/p-crest/p-crest.md), [`p-drilldown`](./components/p-drilldown/p-drilldown.md), [`p-heading`](./components/p-heading/p-heading.md), [`p-wordmark`](./components/p-wordmark/p-wordmark.md) | [overlay.md](./examples/patterns/header/overlay.md) |
| Header: Stacked | The header sits above the content instead of lying on top of it: a note on top, the bar with brand, navigation and meta actions in the middle, and a row of category navigation below. The menu opens a drilldown with the site navigation. | [`p-button-pure`](./components/p-button-pure/p-button-pure.md), [`p-crest`](./components/p-crest/p-crest.md), [`p-drilldown`](./components/p-drilldown/p-drilldown.md), [`p-heading`](./components/p-heading/p-heading.md), [`p-link-pure`](./components/p-link-pure/p-link-pure.md), [`p-tabs-bar`](./components/p-tabs-bar/p-tabs-bar.md), [`p-text`](./components/p-text/p-text.md), [`p-wordmark`](./components/p-wordmark/p-wordmark.md) | [stacked.md](./examples/patterns/header/stacked.md) |
| Popover: Feature tour | On first visit, a sequence of popovers guides the user through the key areas of the interface one step at a time ("Step 2 of 4", Back / Next / Skip), each anchored to the element it describes. Only a single step is open at once. | [`p-button`](./components/p-button/p-button.md), [`p-button-pure`](./components/p-button-pure/p-button-pure.md), [`p-crest`](./components/p-crest/p-crest.md), [`p-heading`](./components/p-heading/p-heading.md), [`p-popover`](./components/p-popover/p-popover.md), [`p-text`](./components/p-text/p-text.md), [`p-wordmark`](./components/p-wordmark/p-wordmark.md) | [feature-tour.md](./examples/patterns/popover/feature-tour.md) |
| Popover: Local market switch | On entering the site, a popover anchored to the globe icon in the header suggests switching to the user's local market for correct content and pricing. It is shown on load and can be dismissed via an outside click or the Escape key. | [`p-button`](./components/p-button/p-button.md), [`p-button-pure`](./components/p-button-pure/p-button-pure.md), [`p-crest`](./components/p-crest/p-crest.md), [`p-drilldown`](./components/p-drilldown/p-drilldown.md), [`p-heading`](./components/p-heading/p-heading.md), [`p-link-pure`](./components/p-link-pure/p-link-pure.md), [`p-popover`](./components/p-popover/p-popover.md), [`p-sheet`](./components/p-sheet/p-sheet.md), [`p-tag`](./components/p-tag/p-tag.md), [`p-text`](./components/p-text/p-text.md), [`p-wordmark`](./components/p-wordmark/p-wordmark.md) | [local-market-switch.md](./examples/patterns/popover/local-market-switch.md) |
| Popover: Priority navigation | When horizontal space is limited, navigation items that no longer fit are collapsed into a popover behind a "More" trigger, keeping the bar on a single line. Items move in and out of the popover as the available width changes. | [`p-button`](./components/p-button/p-button.md), [`p-heading`](./components/p-heading/p-heading.md), [`p-link-pure`](./components/p-link-pure/p-link-pure.md), [`p-popover`](./components/p-popover/p-popover.md), [`p-tag`](./components/p-tag/p-tag.md), [`p-text`](./components/p-text/p-text.md) | [priority-navigation.md](./examples/patterns/popover/priority-navigation.md) |

## Templates

| Template | Description | Components | Reference |
| --- | --- | --- | --- |
| Admin panel | The template is designed for internal tools and management interfaces that require a clear, efficient, and data-driven layout. It's built to help administrators oversee and manage content, users, or system settings with ease — whether that's monitoring key metrics, managing user accounts, or configuring application settings. | [`p-accordion`](./components/p-accordion/p-accordion.md), [`p-button`](./components/p-button/p-button.md), [`p-button-pure`](./components/p-button-pure/p-button-pure.md), [`p-canvas`](./components/p-canvas/p-canvas.md), [`p-checkbox`](./components/p-checkbox/p-checkbox.md), [`p-divider`](./components/p-divider/p-divider.md), [`p-heading`](./components/p-heading/p-heading.md), [`p-input-search`](./components/p-input-search/p-input-search.md), [`p-link-pure`](./components/p-link-pure/p-link-pure.md), [`p-modal`](./components/p-modal/p-modal.md), [`p-popover`](./components/p-popover/p-popover.md), [`p-select`](./components/p-select/p-select.md), [`p-table`](./components/p-table/p-table.md), [`p-tabs-bar`](./components/p-tabs-bar/p-tabs-bar.md), [`p-text`](./components/p-text/p-text.md) | [admin-panel.md](./examples/templates/admin-panel.md) |
| Landing page | The template is designed for campaigns that require a high-impact, conversion-focused experience. It's built to capture user attention and guide them toward a singular goal, whether that's signing up for a newsletter, exploring a new model, or registering for an event. | [`p-button`](./components/p-button/p-button.md), [`p-button-pure`](./components/p-button-pure/p-button-pure.md), [`p-carousel`](./components/p-carousel/p-carousel.md), [`p-crest`](./components/p-crest/p-crest.md), [`p-drilldown`](./components/p-drilldown/p-drilldown.md), [`p-flag`](./components/p-flag/p-flag.md), [`p-heading`](./components/p-heading/p-heading.md), [`p-link`](./components/p-link/p-link.md), [`p-link-pure`](./components/p-link-pure/p-link-pure.md), [`p-link-tile`](./components/p-link-tile/p-link-tile.md), [`p-select`](./components/p-select/p-select.md), [`p-text`](./components/p-text/p-text.md), [`p-wordmark`](./components/p-wordmark/p-wordmark.md) | [landing-page.md](./examples/templates/landing-page.md) |

## Conventions

- **Markup:** the document without its `<head>`. Links point to `#`, texts and media are placeholders.
- **Attributes:** the components are written as HTML takes them – object and breakpoint values of props are strings, e.g. `hide-label="{ base: true, s: false }"`.
- **Script:** the behaviour of the page, as a JavaScript module. It is demo code: it wires up the components by their ids and fakes everything a real application would load or send.

## Stylesheet

Every example imports the same stylesheet: the [global styles](./stylesheets.md) the components depend on, Tailwind CSS and the [PDS Tailwind CSS theme](./styles/tailwindcss.md) whose utilities the markup uses, and a rule hiding the components until they are defined. Its comment describes how that rule differs for server-side rendering and Angular.

```css
@import "@porsche-design-system/components-js";
@import "tailwindcss";
@import "@porsche-design-system/components-js/tailwindcss";

/* Hide custom elements (e.g. `p-button`) until they are defined to prevent a flash of unstyled content. The bare
 * selector works here because these pages are vanilla JS; other setups need a variant. The React SSR wrappers of
 * Next.js and React Router mark their server rendered elements with a `data-ssr` attribute, which has to be excluded
 * (`:not(:defined,[data-ssr])`), and Angular has to list the PDS tags explicitly (`:is(p-button, …):not(:defined)`)
 * because its own elements like `app-root` never get defined and would stay invisible. */
:not(:defined) {
  visibility: hidden;
}
```