Applying spacing on the PDP template
- For left aligned content, when a separator is used to define a section, there should be no spacing on the element in that section that comes right after the separator.
- For center aligned content, when a separator is used to define a section, apply "decrease by 2 steps" spacing to element in that section that comes right after the separator.
- When no separator is used to define a section, apply "increase by 1 step" spacing to create space between sections of content.
- Combination
- Separators
- No separators
Combination (defining sections with and without separators)
Most PDPs will have a combination of sections that are defined by using separators and no separators.
Examples shown here do not reflect actual PDP layouts, but are here to show how to apply spacing between different types of content.
Marketing banner
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
How it works
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Why choose this product
Why choose this product
Publication description
Study name h3 - lorem ipsum dolor sit amet consectetur adipiscing elit eiusmod tempor incididunt
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Comparison table
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
| Table heading |
|---|
| Table attribute - lorem ipsum dolor sit |
| Table attribute - lorem ipsum dolor |
| Table attribute - lorem ipsum sit |
| Table attribute - lorem ipsum |
| Table heading |
|---|
| Table attribute - lorem ipsum dolor sit |
| Table attribute - lorem ipsum dolor |
| Table attribute - lorem ipsum sit |
| Table attribute - lorem ipsum |
Required product
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Separators
Examples shown here do not reflect actual PDP layouts, but are here to show how to apply spacing between different types of content.
2 up title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
How it works
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Why choose this product
Marketing title
2 up title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Comparison table
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
| Table heading |
|---|
| Table attribute - lorem ipsum dolor sit |
| Table attribute - lorem ipsum dolor |
| Table attribute - lorem ipsum sit |
| Table attribute - lorem ipsum |
| Table heading |
|---|
| Table attribute - lorem ipsum dolor sit |
| Table attribute - lorem ipsum dolor |
| Table attribute - lorem ipsum sit |
| Table attribute - lorem ipsum |
Required product
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
No separators
Examples shown here do not reflect actual PDP layouts, but are here to show how to apply spacing between different types of content.
Marketing banner
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Featured highlights
Publication description
Study name h3 - lorem ipsum dolor sit amet consectetur adipiscing elit eiusmod tempor incididunt
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Why choose this product
Marketing title
2 up title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
