# 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.
- **Type:** Template
- **Components:** [`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)
- **Conventions and stylesheet:** shared by all examples, see [examples.md](../../examples.md)
## Markup
```html
Search
User
Template
Landing Page
Some label
Pause Video
Some Title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Some label
Some Title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Some label
```
## Script
```js
// DO NOT USE IN PRODUCTION!
// EXAMPLE CODE FOR DEMONSTRATION PURPOSE ONLY.
// Behaviour of the header navigation: the menu button opens the drilldown, and the drilldown reports the level
// the user drilled into.
const navButton = document.getElementById('nav-button');
const navDrilldown = document.getElementById('nav-drilldown');
navButton.addEventListener('click', () => {
navDrilldown.open = true;
});
// Closing is requested by the component (Escape, the close button, a click on the backdrop) – the open state is
// owned by the page, so it has to be written back.
navDrilldown.addEventListener('dismiss', (e) => {
e.target.open = false;
});
navDrilldown.addEventListener('update', (e) => {
e.target.activeIdentifier = e.detail.activeIdentifier;
});
// Behaviour of the hero video: a pause control that follows the actual state of the video.
const video = document.getElementById('hero-video');
const pauseButton = document.getElementById('pause-button');
// The button hides its label, so its text content is its accessible name – it has to follow the actual state of
// the video, not the last click. Deriving it from the media events also covers autoplay being refused by the
// browser.
const syncPauseButton = () => {
pauseButton.textContent = video.paused ? 'Play Video' : 'Pause Video';
pauseButton.icon = video.paused ? 'play' : 'pause';
};
video.addEventListener('play', syncPauseButton);
video.addEventListener('pause', syncPauseButton);
pauseButton.addEventListener('click', () => {
video[video.paused ? 'play' : 'pause']();
});
// WCAG 2.2: an animation that starts on its own must be stoppable – and it must not start at all when the
// operating system was asked for reduced motion.
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
video.autoplay = false;
video.pause();
}
syncPauseButton();
```
