Component Examples for Michal

Regarding headers:

There are two header components that are very similar, but used in different ways.

The Interior Main Page Header has a single text field for the header and an option to toggle breadcrumbs on or off. It is only used once at the top of the page. The background of the component is determined by the placement of the page. Top level pages, the background is either an image or black to match the nav bar, as seen on the FGSGlobal 2.0 designs page. Interior pages, the background is white. The "Component Examples for Michal" text above is using the Interior Main Page Header component.

The Sub Page Header has a left header, right header, and text fields and options for two column or single column layouts. Example of the two layouts for this component are below.

In the Figma comps, I think the Intro component is a mixup of both. The two layout options are for the Sub Page Header, but the Component Specifications are describing the Interior Main Page Header.

We need both comped separately in Figma.

Regarding the Text & Media Component - there are six ratio options, an optional button, and the option to invert the order of the text and media pieces. All examples are below.

Regarding column grids - there are three multi-column options: two, three, and four columns. The Grid has an optional title. RIght now the designs have an underline under the title. I think this should either be removed or switch to an optional over-line for design consistency. The size of the text should be consistent with other H1 text.

There are two options of cards that can go into the column grids:

1. Generic Grid Item - This can have a title, description, image, link (arrow appears), and button. All items are optional. For both the text and the button, there are light and dark options for white text on a dark background.

2. Insights Card - This can have a title, date, category, image, and link.

Regarding the One Column option on the Content page in Figma - There is a component called "One Column" that is used on the homepage. It contains a title, description, optional button and link. The dark mode has a geode image background. The light mode has a white background. There are also options for left aligned and centered. Examples are below.

Currently on Figma, the Centered option matches the fields and layout, but the Left Aligned option looks like it's a closer match to the Narrowed WYSIWYG component. I think those need to be separated out. Also, it looks like the background options are changing as well, to black background, teal background (contained box), or purple image background.

The Narrowed WYSIWYG component is used for single column blocks of text. There is a title field that has the option to bold or italicize (assuming this will change to the highlight color) and a content field with a standard WYSIWYG editor. You can also nest select components within the Narrowed WYSIWYG component.

There are options to align the section centered, left, or right aligned. You can also align the title and content to the start, center, or end. You can change the text to white for dark backgrounds. There is also a small (standard) text size and big text size. Examples are below.

Content - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Content - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Content - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Content - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.