Card link + section heading spacing

[davidhunter08]

NHS App Frontend version

2.1.0

Description

The space between the card link and section heading is too small.

Screenshots

A way to fix this is to add padding-top to section heading's that come after card links.

.nhsapp-cards + .nhsapp-section-heading,
.nhsapp-card + .nhsapp-section-heading {
  padding-top: nhsuk-spacing(2);
}

The NHS.UK Frontend handles this is a similar way by adding top padding to headings that appear after body text and lists.

%nhsuk-body-m + %nhsuk-heading-l,
%nhsuk-body-s + %nhsuk-heading-l,
%nhsuk-list + %nhsuk-heading-l {
  @include nhsuk-responsive-padding(4, "top");
}

When card links are stacked they become a list. So when card links come before a regular heading, top padding is added to the heading.

Bu this does not get applied to the nhsapp-section-heading because it is wrapped in a div.

[davidhunter08]

Another option is to increase the nhsapp-card (and nhsapp-cards) margin bottom. It's currently @include nhsuk-responsive-margin(5, "bottom"); changing it to @include nhsuk-responsive-margin(7, "bottom"); would fix the spacing.

[davidhunter08]

Another option is to increase the nhsapp-card (and nhsapp-cards) margin bottom. It's currently @include nhsuk-responsive-margin(5, "bottom"); changing it to @include nhsuk-responsive-margin(7, "bottom"); would fix the spacing.

But this option wouldn't give correct spacing next to other elements.

In the prototype I've this code that looks have solved the problem:

.nhsapp-cards + .nhsapp-section-heading,
.nhsapp-card + .nhsapp-section-heading {
  padding-top: nhsuk-spacing(3);
}