Magnolia Overview

Use these components at the top of any page. Think of them as your page’s face. The first thing people see when they land on a page will be on of these components

Homepage

Should be used to promote a campaign or a product on the homepage

Use a single accent (yellow) button and write descriptive keywords for CTA buttons, related to the destination page and the action.

Homepage banner

Content page

Use these components at the top of any content page.

For advisers and employers, more usage of images rather than illustrations. More professional relationship, images or pictograms work better. Illustrations are more customer friendly.

Pictograms as a secondary asset. Use them for pages about a specific product, tool, guide, support material.

Use a white CTA button when there is a main action related to the page.
Use an image or illustration if the page content is about products or services for customers
Use a pictogram on pages such as support or guidance

Content page banner

Blog articles

Should be used on news & insights page. There is the option to use device-specific header images to avoid cropping on different breakpoints.

Desktop	1440x420px
Tablet landscape	1024x420px
Tablet portrait	768x420px
Mobile	375x300px