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' container should have the following settings in the container options:

Container Type: Full Width
Background Type: Animation
Backround Animation: (URL for animation using the internal syntax)
Background Size: Scale Height
Background Position: Center
Vertical Alignment: Middle
Padding Options ( Left/Right ): No padding
Padding Options ( Top/Bottom ): Medium
Height Options: None
Description: Leave blank

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
Padding Options ( Left/Right ): Medium
Padding Options ( Top/Bottom): Medium
Height Options: None
Description: Type the text for the 'eyebrow' here following the style guide shown below.

Nest a 'Text' component within the child container and style as shown below.

'Eyebrow' - All caps. Font - Univers Bold, Label 1, Color-Grey 600

H1, Font - Univers Light, Heading 2, Color-Primary Black and Color-Primary Orange as appropriate.

H2, Font - Univers Regular, Heading 6, Color-Grey 600. All of this is edited within a textbox nested inside the 'Hero' container except the eyebrow which is edited in the Description Text field of the container options.

"Jump to" banner - This will eventually house a custom contact us button. For now it is just a container with an image set as its background.

The container should have the following settings in the container options:

Container Type: Full Width
Background Type: Image
Backround Image: (internal URL for image ex- /content/dam/fiserv-ent/final-files/...)
Background Size: None
Background Position: Left
Vertical Alignment: Top
Padding Options ( Left/Right ): No padding
Padding Options ( Top/Bottom ): No padding
Height Options: Small

Description should be left blank.

There are no additional elements needed for this section.

The "Jump to Text" container should have the following settings in the container options:

Container Type: Full Width
Background Type: Image
Backround Animation: (URL for animation using the internal syntax)
Background Size: Scale Width
Background Position: Left
Vertical Alignment: Top
Padding Options ( Left/Right ): No padding
Padding Options ( Top/Bottom ): Medium
Height Options: None
Description: Leave blank

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: Middle
Padding Options ( Left/Right ): Medium
Padding Options ( Top/Bottom): No Paddin
Height Options: Small
Description: Leave blank

Nest a 'Text' component within the child container and style as shown below.

Text box component nested inside container. Univers Regular, Heading 5, Color-Primary Black

The 'Proof Point' container should have the following settings in the container options:

Container Type: Contained
Background Type: Solid
Colors: None
Background Size: Scale Width
Background Position: Left
Vertical Alignment: Top
Padding Options ( Left/Right ): No Padding
Padding Options ( Top/Bottom): No Padding
Height Options: None
Description: Leave blank

After the parent container is created, add the "Proof Point" component and set with the following options:

On the 'General' tab:
Background Image: (URL for image)
Description: Type the main text and style as shown below.

On the 'Proof Points' Tab:
First Proof Point is black:For the 'body' text (top text if applicable and bottom text), select the following styles from the style menu: Univers Regular, Heading 6, Grey 300

For the 'proof point' text, select the following styles from the style menu: font - Univers Bold, Heading 2, Color-Primary Orange.

Second Proof Point is White: For the 'body' text, select the following styles from the style menu: Font - Univers Regular, Heading 6, Color-Grey 600

For the 'proof point' text, select the following styles from the style menu: font - Univers Bold, Heading 3, Color-Primary Orange.

Third Proof Point is Blue: For the 'body' text, select the following styles from the style menu: Font - Univers Regular, Heading 6, Color-Primary White

For the 'proof point' text, select the following styles from the style menu: font - Univers Bold, Heading 2, Color-Primary Black.

Fourth Proof Point is Orange: For the 'body' text, select the following styles from the style menu: Font - Univers Regular, Heading 6, Color-Primary White

For the 'proof point' text, select the following styles from the style menu: font - Univers Bold, Heading 2, Color-Primary Black.

In the Description Text field of the Proof Point component: Font - Univers Regular, Heading 5, Color-Primary White

text if needed

Black

Univers Regular, Heading 6, Grey 300

text if needed

White box

Univers Regular, Heading 6, Grey 600

text if needed

Blue box

Univers Regular, Heading 6, Primary White

text if needed

Orange

Univers Regular, Heading 6, white

Container for Tab Intro:

The container should have the following settings in the container options:

Container Type: Contained
Background Type: Solid
Colors: None
Background Size: Scale Width
Background Position: Left
Vertical Alignment: Top
Padding Options ( Left/Right ): Medium
Padding Options ( Top/Bottom): Medium
Height Options: None
Description: Type eyebrow text here

Nest a 'Text' component within the parent and style as shown below.

'Eyebrow' - Univers Bold, Label 2, Color-Grey 600

H2, Heading 3, Color-Primary Black and Color-Primary Orange as appropriate.

Tab Container Component:

Create a parent container and apply the following settings in the container options:

Container Type: Contained
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Top
Padding Options ( Left/Right ): No padding
Padding Options ( Top/Bottom ): No Padding
Height Options: None
Description: Leave blank

Nest a 'Tab' component within the parent container. The following settings should be selected in the Tab Container options:

NOTE: You must set up the tab structure before the layout area for each tab will appear.

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:

Expanded by Default should be checked ( first Tab only ). Add as many tabs here as you need ( up to a maximum of 4 ). Tab Icon should be set to 01, 02, 03, or 04 as appropriate. Analytics Name should be set as Tab1, Tab2, Tab3, or Tab4 as appropriate. Save and exit.

------------------------------------------------------------------

NOTE: Each 'Tab' will be set up the same.

1) Place a container within the 'Tab' layout area. This parent cotainer will house the background/animation. Apply the following settings in the container options:

Container Type: Contained
Background Type: Animation
Backround Animation: (URL for animation)
Background Size: Scale Width
Background Position: Left
Vertical Alignment: Top
Padding Options ( Left/Right ): No padding
Padding Options ( Top/Bottom ): No Padding
Height Options: None
Description: Leave blank

2) Nest a child container inside the first. Apply the following settings in the container options.

Container Type: Contained
Background Type: Solid
Color: None
Background Size: Scale Height
Background Position: Left
Vertical Alignment: Top
Padding Options ( Left/Right ): Medium
Padding Options ( Top/Bottom ): Medium
Height Options: None
Description: Leave blank

3) Nest a 'Column Control' component inside the child container and set to 50/50 in the component settings. The padding option should be unchecked.

NOTE: Each column will autopoulate with a container when it is created. Apply the following settings in each of the container options.

Container Type: Contained
Background Type: Solid
Color: None
Background Size: None
Background Position: Left
Vertical Alignment: Top
Padding Options ( Left/Right ): No Padding
Padding Options ( Top/Bottom ): No Padding
Height Options: None
Description: Leave blank

4 ) Nest a 'Text' component inside the first column. Type the 'Tab Title' text and style as shown in the example below.

Type the 'Tab Body' text in the same text box component as the 'title' text and style as shown in the example below.

-----------------------------------------------------------------------

Tab Basic Cards:

Place a second column control component below the first and set to 33/33/33 in the component settings. The padding option should be unchecked.

NOTE: Each column will autopoulate with a container when it is created. Apply the following settings in each of the container options.

Place a Basic Card Component inside each of the containers within the columns, as appropriate. In the component options, apply the following settings to the each basic card component:

Layout Variation: Standard
Add Border should be checked.
min-height should be unchecked
Icon: Choose the appropriate icon for the represented solution / subject
Title: In the style menu, apply the following styles: Font - Univers Regular, Heading 6.
Link: URL for target page (use internal link format)
Link Target: Same Tab ( for internal pages ) or New Tab ( for external pages )
Description: In the style menu, apply the following styles: Font - Univers Regular, Body 3, Color-Grey 600

Tab1
testing tab 2