Add list--spaced modifier

[36degrees]

This modifier is designed to make lists easier to scan when the list items are long, and span multiple lines.

Closes #1272

[NickColley]

Makes sense, think we'll need to add some new guidance to the Design System too.

[timpaul]

Makes sense, think we'll need to add some new guidance to the Design System too.

Absolutely - I'm going to work on that later

[36degrees]

On mobile, we do not include any margin after bulleted or numbered list items – the margin is only added on tablet and above.

I'm wondering if we should be using a slightly smaller margin on mobile to be consistent and to better associate each bullet point with the lead-in paragraph:

  %govuk-list--spaced > li {
    margin-bottom: govuk-spacing(2);

    @include govuk-media-query($from: tablet) {
      margin-bottom: govuk-spacing(3);
    }

    &:last-child {
      margin-bottom: govuk-spacing(0);
    }
  }

To my (non-designer) eyes the 15px on mobile otherwise seems excessive.

Thoughts @timpaul or @christopherthomasdesign?

Current (15px)	Proposed (10px)

[timpaul]

I think that typically the internal padding and margins of textual components should shrink by a similar proportion to the text shrinkage, so yep - I'd agree with your suggestion. @christopherthomasdesign - what do you think? There's no crazy vertical rhythm thing we're doing that I've forgotten about is there?

[christopherthomasdesign]

Looks good to me @timpaul, good suggestion @36degrees 👍

[timpaul]

This proposal was approved by the Design System working group on 14 May 2020

[hannalaakso]

🎉

[frankieroberto]

Nice work! 🎊 I've used this style a few times in the past.