Eyebrow Field ( Styling is hard-coded into component )
H1, Heading 2
*Title Case, no punctuation*
H2, Univers Regular, Heading 6, Grey 600.
*Sentence case*
NOTE: Unless otherwise specified, a formatting tag ( H1, H2, etc. ) should not be applied to any text and never used to 'style' content as this can adversely affect SEO and Analytics. Special style rules have been created and can be implemented when needed to achieve the look of a 'heading'. They can be found in the Style submenu of the text editor in most component options.
Text components that are NOT nested within a container ( like this one ) are for instructional purposes and not part of the finished production design.
To view the page template without the style notes sections, click here.
The 'Hero' section:
1) Create a 'Split Image Hero':
Apply the following settings in the component options:
Hero Variation: Single Image
Image One: URL for hero image
Hero Layout: Text on Left
Eyebrow: Type 'Solution Set' in this field ( Styling is hard-coded into component )
Title: Type the title here.
Description: Type anchor statement here.
NOTE: This component does not use a drag & drop interface for image selection. Use internal Fiserv AEM DAM syntax for image path. [ Ex: /content/fiserv-com/... ]
The 'Accordion' section:
1) Create a 'Parent' Container:
Apply the following settings in the container options:
Container Type: Full Width
Background Type: Solid
Color: Grey 200
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): No Padding
Padding Options ( Top/Bottom): No Padding
Height Options: None
Description: Description for this container should be left blank.
2) Create a 'Child' Container and nest it within the parent:
Apply the following settings in the container options:
Container Type: Contained
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): Medium
Padding Options ( Top/Bottom): Medium
Height Options: None
Description: Description for this container should be left blank.
3) Create a Column Control Component and nest it within the child:
Apply the following settings in the component options:
Layout: 50/50
Padding: Unchecked
NOTE: Each column will autopoulate with a container when the column control component is configured. The containers will need to be configured before their layout areas can be used.
4) In the right column:
Apply the following settings in the container options:
Container Type: Full Width
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): Medium
Padding Options ( Top/Bottom): Medium
Height Options: None
Description: Description for this container should be left blank.
5) Create an 'Accordion' component and nest it inside the child container in the right column.
Apply the following settings in the component options:
Eyebrow: This field should be left blank.
Mode: Light
Icon: Choose content appropriate icon.
Icon Alt Tag: Three - Five words to describe the icon.
Title: Type the title of the datapoint here.
Description: Type the body content of the datapoint here.
Page Load: Unchecked by default. Check if you wish this datapoint to be 'expanded' when the page loads.
NOTE: This component uses a drag & drop interface for image selection.
6) In the left column:
Apply the following settings in the container options:
Container Type: Full Width
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): Medium
Padding Options ( Top/Bottom): Medium
Height Options: None
Description: Description for this container will be the eyebrow. Style as shown.
7) Create a text box and nest it within the left column.
Style section title and anchor statement as shown.
'Eyebrow' - Label 2, Univers Bold, Grey 600
H2, Heading 3
*Title case, no punctuation*
Univers Regular, Heading 6, Grey 600
*Sentence case*
'Tab Intro' Section:
1) Create a 'Parent' Container:
Apply the following settings in the container options:
Container Type: Contained
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): Medium
Padding Options ( Top/Bottom): Medium
Height Options: None
Description: Description for this container will be the eyebrow. Style as shown.
2) Create a text box and nest it within the container.
Style section title as shown.
'Eyebrow' - Univers Bold, Label 2, Color-Grey 600
H2, Heading 3, Univers Light Color-Primary Black and Color-Primary Orange as appropriate
*Sentence case, no punctuation*
Tab Section:
Tab Component:
1) Create a 'Parent' Container:
Apply the following settings in the container options:
Container Type: Contained
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): No Padding
Padding Options ( Top/Bottom): No Padding
Height Options: None
Description: Description for this container should be left blank.
2) Create a 'Tab' component and nest within the parent container.
NOTE: You must configure the tab options before the layout area for each tab will appear.
Apply the following settings in the component options:
On the 'Style' tab:
Tab Navigation Position: Default
Tab Navigation Width: Contained width
Drop Shadow should be checked.
On the 'Responsive' tab:
Tab Navigation Layout: Accordion
On the 'Tab Items' tab:
Add as many tabs here as needed ( up to a maximum of 4 ).
Expanded by Default: Checked ( first Tab only ).
Tab Title: Type title for tab here. Three - Five words max.
Tab ID: Unique identifier for the tab. Keep it simple. ( Ex: Tab1, Tab2, Tab3, or Tab4 )
Tab Icon: Set to 01, 02, 03, or 04 as appropriate.
Analytics Name: Set as Tab1, Tab2, Tab3, or Tab4 as appropriate.
Click the checkmark in the upper right of the component editor to save your changes and exit. The page will refresh and the tab layout area will then be available.
Tab Layout
NOTE: Each 'Tab' will be set up the same.
1) Create a 'parent' container and nest within the 'Tab' layout area.
Apply the following settings in the container options:
Container Type: Full Width
Background Type: Solid
Colors: None
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): No padding
Padding Options ( Top/Bottom ): Medium
Height Options: None
Description: Description for this container should be left blank.
2) Create a child container and nest inside the parent.
Apply the following settings in the container options:
Container Type: Full Width
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Align Middle
Padding Options ( Left/Right ): Medium
Padding Options ( Top/Bottom ): Medium
Height Options: None
Description: Description for this container should be left blank.
3) Create a Column Control Component and nest it within the child:
Apply the following settings in the component options:
Layout: 50/50
Padding: Unchecked
NOTE: Each column will autopoulate with a container when the column control component is configured. The containers will need to be configured before their layout areas can be used.
4) In the right column:
Apply the following settings in the container options:
Container Type: Full Width
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): No Padding
Padding Options ( Top/Bottom): Small
Height Options: None
Description: Description for this container should be left blank.
5) Create a text box and nest it within the right column.
Style anchor statement as shown.
6) In the left column:
Apply the following settings in the container options:
Container Type: Full Width
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): No padding
Padding Options ( Top/Bottom): No Padding
Height Options: None
Description: Description for this container should be left blank..
7) Create a text box and nest it within the left column.
Style section title as shown.
Tab Basic Cards:
8) Create a second child container and nest inside the parent below the first child.
Apply the following settings in the container options:
Container Type: Full Width
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Align Middle
Padding Options ( Left/Right ): Medium
Padding Options ( Top/Bottom ): No padding
Height Options: None
Description: Description for this container should be left blank.
9) Create a Column Control Component and nest it within the child:
Apply the following settings in the component options:
Layout: 33/33/33
Padding: Unchecked
NOTE: Each column will autopoulate with a container when the column control component is configured. The containers will need to be configured before their layout areas can be used.
10) In each column:
Apply the following settings in the container options:
Container Type: Full Width
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): No Padding
Padding Options ( Top/Bottom): No Padding
Height Options: None
Description: Description for this container should be left blank.
11) Place a Basic Card Component inside each of the containers within the columns, as appropriate.
Apply the following settings in the component options:
Layout Variation: Standard
Add Border: Should be checked.
min-height: Should be unchecked
Icon: Choose content appropriate icon from dropdown.
Title: Type the card title here.
Link: URL for target page (use internal link format)
Link Target: Choose appropriate target. Same Tab ( for internal pages ) or New Tab ( for external pages )
Description: Type card body content here.
Analytics Name: Tab1, Tab2, Tab3, or Tab4 - ( space dash space )Card1, Card2, or Card3, as appropriate. ( Ex: Tab1 - Card1 )
Client Stories Section:
1) Create a 'Parent' Container:
Apply the following settings in the container options:
Container Type: Full Width
Background Type: Solid
Color: Grey 200
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): No Padding
Padding Options ( Top/Bottom): No Padding
Height Options: None
Description: Description for this container should be left blank.
Nest a container inside the Case Study Container:
2) Create a 'Child' Container and nest it within the parent:
Apply the following settings in the container options:
Container Type: Contained
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): Medium
Padding Options ( Top/Bottom): Medium
Height Options: None
Description: Description for this container should be left blank.
3) Create a text box and nest it within the left child container.
Style section title as shown.
4) NOTE: The client stories feature in this area will eventually be replaced by a carousel component. For now it is custom coded in the Unsafe HTML component. Admin only.
Heading 4, Color-Grey 800 - A soft return ( shift+enter) should follow the text entered.
*Sentence case, no punctuation*
Insights Section:
1) Create a 'Parent' Container:
Apply the following settings in the container options:
Container Type: Full Width
Background Type: Solid
Color: Grey 200
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): No Padding
Padding Options ( Top/Bottom): No Padding
Height Options: None
Description: Description for this container should be left blank.
Nest a container inside the Case Study Container:
2) Create a 'Child' Container and nest it within the parent:
Apply the following settings in the container options:
Container Type: Contained
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): Medium
Padding Options ( Top/Bottom): Medium
Height Options: None
Description: Description for this container should be left blank.
3) Create a text box and nest it within the left child container.
Style section title as shown.
Resource Cards:
4) Create a Column Control Component and nest it within the child:
Apply the following settings in the component options:
Layout: 33/33/33
Padding: Unchecked
NOTE: Each column will autopoulate with a container when the column control component is configured. The containers will need to be configured before their layout areas can be used.
5) In each column:
Apply the following settings in the container options:
Container Type: Full Width
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): No Padding
Padding Options ( Top/Bottom): No Padding
Height Options: None
Description: Description for this container should be left blank.
6) Place a Basic Card Component inside each of the containers within the columns, as appropriate.
Apply the following settings in the component options:
Layout Options: Standard
Blur: Should be checked.
Remove Border: Should be unchecked.
Resource Type Icon: Choose content appropriate icon.
Resource Type Text: Enter the type of resource represented ( Ex: Podcast, brochure, video etc. )
Image Path: URL for banner image
Image Alt-Text: A short description of the image. Three - Five words.
Eyebrow: Eyebrow should be left blank.
Title: The title of the Resource ( up to x characters ).
Description: Short Description of the resource ( up to 240 characters ).
CTA Path: URL to resource represented. Use internal Fiserv syntax for resource path. [ Ex: /content/fiserv-com/... ]
CTA Link Target: Choose appropriate target. Same Tab ( for internal pages ) or New Tab ( for external pages )
CTA Analytics Name: Resource - ( space dash space )Card1, Card2, or Card3, as appropriate. ( Ex: Resource - Card1 )
NOTE: This component does not use a drag & drop interface for image selection. Use internal Fiserv AEM DAM syntax for image path. [ EX: /content/fiserv-com/... ]
Heading 4, Color-Primary Black - A soft return ( shift+enter) should follow the text entered
*Sentence case, no punctuation*
Contact Us Section:
1) Create a 'Parent' Container:
Apply the following settings in the container options:
Container Type: Full Width
Background Type: Solid
Color: Primary Blue
Background Size: None
Background Position: Left
Vertical Alignment: Align Top
Padding Options ( Left/Right ): No Padding
Padding Options ( Top/Bottom): No Padding
Height Options: None
Description: Description for this container should be left blank.
2) Create a 'Promo Banner' and nest it within the parent container.
Apply the following settings in the component options:
Title: Type the title here.
Description: Type the subtitle / anchor statement here.
Background Color: Choose design / brand appropriate color.
Background Image: Choose content appropriate image.
Link Path: URL to page / resource represented. Use internal Fiserv syntax for page / resource path. [ Ex: /content/fiserv-com/... ] Include CID extension in URL. [ Ex: ...html?%7cpage-name%7c ]
Link Target: Choose appropriate target. Same Tab ( for internal pages ) or New Tab ( for external pages )
Link Icon: Choose appropriate icon. Arrow ( for page redirects ) or Dowload ( for asset download )
Analytics Name: Should be set to: contact-us
NOTE: This component uses a drag & drop interface for image selection.
