canonical / canonical/vanilla-framework

CTA Block: Excessive bottom padding

Open
#5,397 3 comments 0 reactions 0 assignees View on GitHub
Priority: Low WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

While building https://github.com/canonical/canonical.com/pull/1406, I noticed a visual quirk with the [CTA block](https://vanillaframework.io/docs/patterns/cta/block): we have given it `padding-bottom: $spv--x-large` here:

https://github.com/canonical/vanilla-framework/blob/78211ca79d33f316815a660be4ff91089fef40d3/scss/_patterns_cta.scss#L19

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:
Screenshot 2024-10-23 at 3 19 22 PM

Expected (no bottom padding):
Screenshot 2024-10-23 at 3 19 37 PM

Contributor guide

Open the contributing guide

Research direction

Start in scss/_patterns_cta.scss at the padding declaration linked in the issue, then compare the .p-cta-block styling with CTA blocks that do not use that class. Verify the change against the supplied screenshots or the CTA block documentation; done means the extra bottom spacing is no longer present.

Written by the indexing model from the issue text.

Assessment

Tech stack
sass
Domain
frontend
Issue type
Bug
Difficulty
1/5
Estimated time
Under an hour
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.