Foundation.mozilla.org: Align styles of IH cta with Image Text Mini component

[kristinashu]

Align the IH cta

with our new image text mini component

Ideas:

• black diving lines
• black icon
• component should lineup page content (it's often too wide, example)
  https://foundation.mozilla.org/en/opportunity/web-literacy/

[youriwims]

* component should lineup page content (it's often too wide, example)
  https://foundation.mozilla.org/en/opportunity/web-literacy/

Will the IH snippet always appear on pages with a layout similar to the web literacy page? On the web literacy page, the IH snippet is in a different container than the rest of the content which is why it appears too wide, like this image:

If we want the IH Snippet to be the same width as whatever primary content is on the page, then it will not only need to be in the same container as the rest of the other content, but also the same container as the primary body content so that we can always achieve a predictable visual outcome, similar to this image:

Some ideas off the top of my head to fix this would be to maybe add a checkbox to pages to 'add ih cta snippet' or add the snippet to pages via image text mini component. @mmmavis, @Pomax any other ideas?

Of course, these ideas could all change if this snippet is supposed to be used on different page layouts 😬 @kristinashu, feel free to let me know if these images weren't helpful at all haha

[kristinashu]

Thanks for the very useful graphic Youri! The second one is exactly what we want, if possible.

The IH Snippet should continue to appear on all the same pages it does now (all the /opportunity, /initiative, and /campaign pages) which means it would need to fit the width on pages that have nav and ones that don't, and pages with the "make narrow" checkbox checked or not checked.

Does that make sense, does that sound doable?

[mmmavis]

@kristinashu how many versions of this 'CTA banner' will we have? I remember seeing multiple versions of it when it was still in the design audit phase (e.g., some include a button and some have slightly different spacing within the banner).

[kristinashu]

You might be thinking of the Image Text Mini component. That one is now a live cms component and can be used anywhere on the page and staff can use any copy/icon/link that they want.

This IH cta is different in that it is automatically added to at the bottom of all opportunity/initiative/campaign pages and the copy/icon/link can't not be changed.

Sorry if you now all this already, just trying to clarify.

[youriwims]

@kristinashu , I spoke with Pomax and should be able to take care of this. I'm going to create a separate dev implementation ticket for this to get it started 👍

[kristinashu]

Here's what it should look like:

I will close this design ticket and open a new implementation ticket to update the line colour and icon https://github.com/mozilla/foundation.mozilla.org/issues/2910