CTA Block: Excessive bottom padding

[jmuzina]

While building canonical/canonical.com#1406, I noticed a visual quirk with the CTA block: we have given it padding-bottom: $spv--x-large here:

vanilla-framework/scss/_patterns_cta.scss

Line 19 in 78211ca

padding-bottom: $spv--x-large;

This causes some extra spacing beneath the CTA block that is not present in CTA blocks that don't use our .p-cta-block.

Default:

Expected (no bottom padding):

[syncronize-issues-to-jira]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-16100.

This message was autogenerated

[jmuzina]

Bringing this one back into discussion, as it's gotten a bit stale and we need further alignment before we proceed with implementing it.

The core of the problem is that the CTA block can sometimes contain a Button element, which has its own bottom margin that, when combines with bottom padding from p-cta-block, creates excessive bottom spacing beneath the CTA block.

However, the CTA block does not always have a button: sometimes, it just has an anchor element. So, blanket removing that bottom padding would cause the anchor to throw off the baseline alignment and not have enough spacing when there is only a link.

We should not apply paragraph block styling to the links, as they are inline elements.

Maybe, a decent way of fixing this without making API changes is to apply paragraph bottom margin (not the rest of paragraph styles) to anchor elements in CTA blocks

.p-cta-block {
  a {
     // apply paragraph element bottom spacing
     margin-bottom: map-get($sp-after, p) - map-get($nudges, p);
  } 
}

We could make this even more specific by targeting a:only-child to only add that spacing for links that don't have buttons next to them, but I'm not sure if that's appropriate or needed, and it feels a bit dirty.

CC @lyubomir-popov @bartaz