About this template
The product detail page template contains components and patterns aimed at helping healthcare professionals find information they need to evaluate a product for adoption.
This template is made up of 2 parts:
- Product details section populated from PIM data, Aprimo data, and an AEM content fragment
- Marketing section consisiting of patterns and components authored in a tabs component and added to the template via an AEM experience fragment
Product details
This section is made up content that is pulled in from PIM, Aprimo, and an AEM content fragment.
- Attributes
- No attributes
Attributes
Annotations key
- PIM data: This data is dynamically pulled in to the PDP from our product information management (PIM) system and displayed on the page based on the product family ID.
- Aprimo data: Product gallery images are dynamically pulled in to the PDP and are displayed on the page based on product family ID tags in Aprimo.
- Content fragment: This data is pulled in from different tabs on an AEM content fragment and displays on the page based on the name of the content fragment (product family ID).
- Template: This data is pulled in from the PDP template for the country the page is built in. These values apply to all PDP templates for a given country and language.
- eLabeling: This data is pulled in from the eLabeling website and displays based on the selected product code (material ID) from a product that's been configured using the product code dropdown or attribute selector.
No attributes
Annotations key
- PIM data: This data is dynamically pulled in to the PDP from our product information management (PIM) system and displayed on the page based on the product family ID.
- Aprimo data: Product gallery images are dynamically pulled in to the PDP and are displayed on the page based on product family ID tags in Aprimo.
- Content fragment: This data is pulled in from different tabs on an AEM content fragment and displays on the page based on the name of the content fragment (product family ID).
- Template: This data is pulled in from the PDP template for the country the page is built in. These values apply to all PDP templates for a given country and language.
Marketing section
This section is made up of components and patterns that align to our user-backed content strategy.
This documentation shows the types of content that are found on each tab, the patterns used, and links to full documentation for patterns.
Discover more PDP template examples:
- PDP variation 1
- PDP variation 2 (coming soon)
Explore live pages:
Spacing guidelines
These spacing styles apply to container components. Every component or pattern that defines a section should be wrapped with a container to ensure equal spacing throughout all tabs and the page.
Overall guidelines
- Use separators to distinguish content sections that don't have a background color or border. Some exceptions may apply.
- Nest components or patterns in a container to allow for consistent spacing throughout across all tabs.
- The first instance of a pattern or component under the tabs component should use "decrease by 2 steps" spacing.
- Most PDPs will have sections defined with separators and without, so spacing between sections will vary.
- First component/pattern on tab: Decrease by 2 steps
- Component/pattern after a separator: None
- Component/pattern after another component/pattern: Increase by 1 step or Default
Applying spacing styles
- First component/pattern on tab: Decrease by 2 steps
- Component/pattern that comes after a separator: None
- Component/pattern that comes after another component/pattern: Increase by 1 step or Default
Spacing with separators
- New content sections should use the separator component with default styles
- When patterns or components are placed under a separator, be sure to remove margins
Spacing without separators
- When placing patterns or components on top of each other without a separator use "increase by 1 step" or "default" spacing to separate content sections (this might vary depending on the pattern or component)
- Overview
- Clinical data
- Technical specifications
- Ordering information
- Training
- Resources
Marketing banner
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Pattern: Marketing banner
Variation: Assertive theme - Title, image, text, button
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.
Pattern: 1-up content layout
Variation: Offset - 6 columns w/ embed (Offset layouts tab)
Why choose this product
Marketing title
Pattern: 3-up content layout
Variation: Mutliple rows w/ section title + marketing title (Teasers tab)
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.
Pattern: 2-up content layout
Variation: Side-by-side (50/50 split) w/ image on left (Side-by-side tab)
Note: The section title was removed because it falls under the "why choose this product" title at the top of the section.
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 |
Pattern: Comparison table
Variation: 2-items with images no table heading (2 items tab)
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.
Pattern: 2-up content layout
Variation: Side-by-side (30/70 split) w/ linked title (Side-by-side tab)
Callout title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Pattern: Callouts
Variation: Single column centered callout
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.
Pattern: Data highlights
Variation: Featured data highlights
Clinical publications
Publication description
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.
Publication description
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.
Publication description
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.
Pattern: Link list
Variation: Publication list (Publication tab)
Callout title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Pattern: Callouts
Variation: Single column centered callout
Mini callout text that describes something. Mini callout link
Pattern: Callouts
Variation: Mini (Mini tab)
Technical specifications
Pattern: 1-up content layout
Variation: 1 up layout (1 up tab)
Note: The text and button were removed and spacing between the title and image was increased from the standard pattern to make the image more readable.
Technical specifications
| Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|
| Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit |
| Table attribute - lorem ipsum dolor | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit |
| Table attribute - lorem ipsum sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit |
| Table attribute - lorem ipsum | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit |
Component: Text
Variation: Table style (Need to use the table plugin in the text component and apply the "responsive data table" style using the style system)
Note: The text and button were removed and spacing between the title and image was increased from the standard pattern to make the image more readable.
Mini callout text that describes something. Mini callout link
Pattern: Callouts
Variation: Mini (Mini tab)
Ordering information
| Table heading |
|---|
| 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 heading |
|---|
| Table attribute - lorem ipsum dolor sit |
| Table attribute - lorem ipsum dolor |
| Table attribute - lorem ipsum sit |
| Table attribute - lorem ipsum |
| Table heading |
|---|
| 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 heading |
|---|
| Table attribute - lorem ipsum dolor sit |
| Table attribute - lorem ipsum dolor |
| Table attribute - lorem ipsum sit |
| Table attribute - lorem ipsum |
Pattern: Comparison table
Variation: 4 items with images - full width (4 items tab)
Ordering information
| Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|
| Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit |
| Table attribute - lorem ipsum dolor | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit |
| Table attribute - lorem ipsum sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit |
| Table attribute - lorem ipsum | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit | Table attribute - lorem ipsum dolor sit |
Component: Text
Variation: Table style (Need to use the table plugin in the text component and apply the "responsive data table" style using the style system)
Note: The text and button were removed and spacing between the title and image was increased from the standard pattern to make the image more readable.
Mini callout text that describes something. Mini callout link
Pattern: Callouts
Variation: Mini (Mini tab)
Callout 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.
Pattern: Callouts
Variation: 2 column (2 column tab)
Training cards
Duration: 00:00
Date: Month Year
Duration: 00:00
Date: Month Year
Duration: 00:00
Date: Month Year
Pattern: 3-up content layout
Variation: Training cards (Training cards tab)
Online medical training and education courses
The EDUCARE online platform makes healthcare education and training more relevant, more comprehensive, more personal, and more accessible. Register to access a library of procedural videos, case studies, training resources, and events.
Pattern: Callouts
Variation: EDUCARE (EDUCARE tab)
Mini callout text that describes something. Mini callout link
Pattern: Callouts
Variation: Mini (Mini tab)
Resources
Pattern: Link list
Variation: 1 column link list (Link list tab)
Videos
Video title / description lorem ipsum dolor sit amet, consectetur adipiscing elit
Video title / description lorem ipsum dolor sit amet, consectetur adipiscing elit
Video title / description lorem ipsum dolor sit amet, consectetur adipiscing elit
Video title / description lorem ipsum dolor sit amet, consectetur adipiscing elit
Pattern: 4-up content layout
Variation: 4-up content layout with embeds (Embeds tab)