Earth dot gov carousel

[freitagb]

Why are you creating this Pull Request?

With a global sea level portal we have been requested to add another link to highlight the new portal. Since we have 3 featured portals we requested integration of the carousel feature for Earth.gov. This PR configures the carousel as requested by HQ leadership

[netlify]

✅ Deploy Preview for earth-information-center ready!

Name	Link
🔨 Latest commit	45e3a51
🔍 Latest deploy log	https://app.netlify.com/sites/earth-information-center/deploys/673cafb5a135890008e0dba7
😎 Deploy Preview	https://deploy-preview-149--earth-information-center.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[j08lue]

The carousel generally works, but a few things need fixing:

1. The link to sealevel does not work (see comment). A trailing slash seems to fix it.

2. There seem to be a bunch of very similar sealevel media images added - are they all needed?

3. The carousel needs to be better aligned with the title above it and other elements on the page, perhaps by using the grid differently. We might need to ping an engineer to help fix this - on first look, it is not obvious to me how.

   

[freitagb]

1. I committed your change on this. Good catch
2. I don't believe there's a way to add text on the carousel card so the similar images are one with text for the carousel and one without - though we may not need the ones without text in the future. Will come back to this
3. Yeah - i was struggling with that too. I think it's okay on the landing page (will defer to designers) but the alignment does not look good on */stories/sea-level-rise page.

The carousel generally works, but a few things need fixing:

1. The link to sealevel does not work (see comment). A trailing slash seems to fix it.
2. There seem to be a bunch of very similar sealevel media images added - are they all needed?
3. The carousel needs to be better aligned with the title above it and other elements on the page, perhaps by using the grid differently. We might need to ping an engineer to help fix this - on first look, it is not obvious to me how.
   

[j08lue]

Nice, the links now work and alignment is decent.

On the home page, it looks a bit busy with different width blocks. But unless you can make the Carousel a couple of columns wider to match the elements above, I think there is no better way of handling these different elements.

[j08lue]

Not sure the new (8f8f3f5) alignment of the carousel title on the home page is better.

Not much to do, I guess?

[dzole0311]

I adjusted the width of the carousel grid so that it matches the rest of the grid for the page. This can be also configured on a per-instance basis using a USWDS config file to override the default width / spacings of the grid, but i haven't tried it so far in the instances (Docs: https://designsystem.digital.gov/documentation/settings/#configuring-custom-uswds-settings)

Hope this works?

[j08lue]

Nice! The carousel is massive now - could we also make both the carousel and its title have the same width as the elements above?

[dzole0311]

@j08lue Okay, I replaced some of the legacy grid styles with the USWDS grid. There might be some minor differences in the width of the grid or some spacings from before (e.g the hero description might have been 50px wider before due to using legacy grid), but otherwise it should be okay. If anything, it can be easily tweaked now using some of the USWDS classes for spacing: https://designsystem.digital.gov/utilities/margin-and-padding/