Container Component
Synopsis: The container component can be used standalone on a page or within other components to achieve the desired layout. Multiple containers can also be nested together to achieve a combination of layouts. A container can be configured to display at full page width (100%) with no max width, or can be configured with a max width of 1440px. The container will scale down to match the width of the containing element, or the screen, whichever is the parent object. When the container is configured to max at 1440px (contained option) and the screen is larger than 1440px, the container will automatically center with equal gudders on left and right.
The container can also display backgrounds in various combinations. This background will show through any combinations of child components, such as columns, as long as the child component does not have it's own respective background set. Following this pattern, the author can achieve many different combinations of background treatments using the background type, size and position properties.
Additionally, the container can be configured with multiple size and padding options to achieve the desired layout. Nesting multiple containers can also be used to multiply the effects.
Usage: All pages. The container is a foundational element that will be used in combinations with most all other components to accomplish various layouts.
Content Fields:
Background Image (Image or Animation), Description
Options:
Container Type: Full Width, Contained.
Background Type: Solid, Image, Animation.
Colors: Fiserv color palette (Background type Solid- this field will show).
Fading Background Check box (Background type Solid- this field will show).
Background Size for image or animation: None, Scale Width, Scale Height, Fix.
Background Position for image or animation: Left, Center, Right.
Vertical Alignment: Align Top, Align Middle, Align Bottom.
Padding options (Left/Right): No Padding, Small, Medium, Large.
Padding options (Top/Bottom): No Padding, Small, Medium, Large.
Height options: None, Extra Small(200px), Small(320px), Medium(640px), Large(830px).
Border Color: Fiserv color palette.
Recommended Image Specificatiopns: When used as a full width background, the recommended image size is 2400 x 1200.
Note: This should be used as an example only. There will be additional requirements related to each individual component usage and page design, such as font treatments, padding and margin requirements, ADA compliance etc, so please use the below examples for reference only to demonstrate core function.
Scenario 1
Full Width Solid Background Color with Inner Container
Ingredients: 2 Containers, Text component
This use case involves an outside container set to full width with a background color set to Gray 600. This example also includes the fading background option where the background color will fade on scroll.
Inside the outside container is a child container set to contained, to max at 1440px wide with no specified background. This child container will automatically center as the screen width extends beyond 1440px wide. Additionally, left/right padding properties of medium is set to align the content with our header within the 1170 margin, along with a height option to display the container a minimum height.
Scenario 2
Full Width Solid Background Color with Inner Container Background Color
Ingredients: 2 Containers, Text component
This use case involves an outside container set to full width with a background color set to Gray 200.
Inside the outside container is a child container set to contained, to max at 1440px wide with a blue background color. This child container will automatically center as the screen width extends beyond 1440px wide. Additionally, left/right padding properties of medium is set to align the content with our header within the 1170 margin, along with a height option to display the container a minimum height.
Scenario 3
Full width Container with Background Image
Ingredients: Containers, Text component
This use case involves an outside container set to full width with a background image set to scale width. Scale width forces the image to fit the width of the container regardless of size, preserving the aspect ratio of the image. If the image is taller than the container, the bottom will be cropped. In contrast, the scale height option will force the image to fill the height of the container, while cropping the side. The side cropped is determined by the background position property, between left, center and right. This particular container variation is set with a height of medium to reveal more of the image.
Inside the outside container is a child container set to contained, to max at 1440px wide. This child container will automatically center as the screen width extends beyond 1440px wide. Additionally, padding properties are set to align the content as desired, along with a height option to display the container a minimum height. The copy in this instance is set to Primary White.
Scenario 4
Full Width container with Background Animation
Ingredients: 2 Containers, Text component
This use case involves an outside container set to full width with a background animation set. The scale properties do not have an affect on animations as we do not want to distort or resize the original animation as it is intended. The background position property, however, will anchor the animation left, center or right. The sides of the animation will be cropped based on the background position property selected. This particular container variation is set with a height of medium to reveal more of the animation.
Inside the outside container is a child container set to contained, to max at 1440px wide. This child container will automatically center as the screen width extends beyond 1440px wide. Additionally, padding properties are set to align the content as desired, along with a height option to display the container a minimum height.
Scenario 5
3 Contained Containers( With Left/Right padding) with in the container.
Ingredients: 4 Containers, Text component
This use case involves an outside container set to full width, and inside containers authored as Contained and Left/Right padding used as Small,Medium,Large.
Default container
Contained Container with Left&Right Padding, Top&Bottom padding Small
Contained Container with Left&Right Padding, Top&Bottom padding Medium
Contained Container with Left/Right padding, Top&Bottom padding Large