New design for incentive cards #169
Conversation
## Description I believe this is exactly as designed. There are a couple of things that weren't 100% clear to me: - The max-width of these cards is 720px; does that mean the max width of the _entire calculator_ should also be 720px, including the form? (That's what I've implemented here.) - If the headline is long, it can run into the top-right CTA link (especially if the CTA text is "Learn how to apply"). The designs didn't specify what should happen in that case. I made the headline line-wrap, while the CTA link stays flush against the top and right. The CTA link never line-wraps. There's at least a 4-rem (16px) gap between the headline and CTA. Screenshot attached. ## Follow-up CI will fail because of translations. If copy looks good, do those. ## Test Plan Look at the cards on desktop (whole variety of window sizes) and mobile (portrait and landscape). Make sure to look at an IRA rebate card, which gets two chips that line-wrap on narrow layout.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -27,8 +31,9 @@ export const Card = forwardRef< | |||
| 'grid-cols-1', | |||
| 'gap-4', | |||
| isFlat && 'mx-auto text-center max-w-78', | |||
| isFlat && 'px-4 py-8', | |||
| !isFlat && 'p-4 sm:p-6', | |||
| padding === 'large' && 'px-4 py-8', | |||
There was a problem hiding this comment.
Nit: Should we add these as custom styles and make the className dynamic instead? (wondering if this padding css could be made reusable).
| @@ -72,5 +72,11 @@ | |||
| margin: 0 auto; /* center on page */ | |||
| display: block; /* required for max-width to kick in */ | |||
| width: 100%; | |||
| max-width: 1280px; | |||
| max-width: 720px; | |||
There was a problem hiding this comment.
The max-width of these cards is 720px; does that mean the max width
of the entire calculator should also be 720px, including the form?
(That's what I've implemented here.)
So, I was curious about this as well. The Calc and c
ards don't look as good on really large screens with this set to only 720 px and I could have been looking at the wrong place in the designs, but it looked like at least here...
That the cards should be allowed to be larger.
There was a problem hiding this comment.
Confirmed in DMs with Emiola that the whole thing is actually supposed to be 720px max-width. (I think you're looking at an outdated part of the Figma -- the part I'm working from has gotten rid of the pill button project selector.)
I'm going to update the demo page to match that max width.
|
Discussed with Emiola in DMs -- the treatment of the headline is basically right, though we may just tweak its line height. I'll see about translations now. |
Description
I believe this is exactly as designed. There are a couple of things
that weren't 100% clear to me:
The max-width of these cards is 720px; does that mean the max width
of the entire calculator should also be 720px, including the form?
(That's what I've implemented here.)
If the headline is long, it can run into the top-right CTA link
(especially if the CTA text is "Learn how to apply"). The designs
didn't specify what should happen in that case. I made the headline
line-wrap, while the CTA link stays flush against the top and right.
The CTA link never line-wraps. There's at least a 4-rem (16px) gap
between the headline and CTA. Screenshot of wrapped and unwrapped
cases attached.
Follow-up
CI will fail because of translations. If copy looks good, do those.
Test Plan
Look at the cards on desktop (whole variety of window sizes) and
mobile (portrait and landscape). Make sure to look at an IRA rebate
card, which gets two chips that line-wrap on narrow layout.