Background Container

Background Container is the primary foundational component within the AVEVA component library. It should be used for most stacks within a page created using a Generic 1 Column template.

Exceptions where Background Container is not needed:

Background

Select Image or Color for the background. If using Color, select one of the options provided or add a hex code.

Content

Use the Heading and Description fields in this component to introduce the content in each stack. It is recommended to use these fields rather than adding a Heading and Description component.

Padding

Use 40px in the Top Padding and 40px in the Bottom Padding.

Heading of Background Container H2

Description of Background Container

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate scelerisque laoreet. Pellentesque efficitur pharetra diam. Maecenas vel cursus arcu. Donec non pretium diam. Proin et massa eu sapien sagittis elementum. Quisque libero odio, porta eu massa et, lobortis luctus leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris aliquet risus eu leo porttitor suscipit. Integer sit amet mattis diam.

Accordion Leaf

Accordion Leaf

Smart Button

This example shows what happens to background color and content width if you reduce Horizontal Width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique sapien a lobortis auctor. Nunc scelerisque, sapien sit amet semper accumsan, urna turpis vulputate risus, sit amet egestas quam nulla sit amet eros. Phasellus posuere risus est, sit amet varius enim luctus eget. Praesent non tincidunt mauris, vitae convallis tellus. Nam mi turpis, mattis vitae blandit sed, volutpat et nulla. Suspendisse potenti. Duis commodo hendrerit elit, eget tempor metus tempor sed. Vivamus sodales iaculis erat congue commodo. Fusce et felis a metus interdum tincidunt. Proin molestie nibh eu ante sagittis elementum.

Etiam felis orci, fermentum id eros a, lobortis facilisis erat. Nulla facilisi. Curabitur maximus, purus semper tempor pretium, lacus ante eleifend mi, nec pretium enim orci vitae quam. Suspendisse libero ipsum, fringilla vel ante et, luctus bibendum tortor. Suspendisse nibh risus, fringilla sit amet mauris in, maximus lacinia elit. Pellentesque sed ante non metus bibendum gravida nec ac felis. Nunc elementum ex in magna pretium, vitae lacinia diam condimentum. Morbi sodales efficitur porttitor. Suspendisse potenti. Fusce non laoreet est. Curabitur at mi nulla. Nullam ullamcorper ante eget tellus iaculis fringilla. Donec non dui in lacus lobortis facilisis nec eu odio. In hac habitasse platea dictumst. Nunc lacus est, egestas eget interdum ut, posuere non libero.

Smart Button for PDF