List of links with appropriate padding

[StefanTotev]

Can a new class be provided with the appropriate spacing between links such as:

I am currently using the < p > tag, but that provides too much spacing between the links and it looks like this:

Thanks in advance!

[pabloibanezcom]

Hi Stefan,

Could you please provide the html you use for it?

[StefanTotev]

I'm currently using :

<h4>Next steps</h4>
<p>
    <a>
        View this user's details
    </a>
</p>
<p>
    <a>
        Search for another user
    </a>
</p>
<p>
    <a>
        Search for another organisation
    </a>
</p>

This allows me to divide them into different lines and to add spacing between them

[pabloibanezcom]

Hi Stefan,

As each link is inside a paragraph that margin is the one defined for p:

margin-bottom: 15.232px;

However you should use multiple paragraph for this purpose. You should use a list like :

     <ul class="list-unstyled">
        <li><a>View this user's details</a></li>
        <li><a>Search for another user</a></li>
        <li><a>Search for another organisation</a></li>
      </ul>

This should work to you. If you fin the space between the links is too short now let me know and I will create a custom class to increase the margin.

[StefanTotev]

I have tried that as well, but the spacing is too short. Would it be possible to create a new class for this please?

[jamesbirrellgray]

@StefanTotev - are you on IDAM? We may need to look at the spacing for p tags - I don't want different spacing - it should be uniformly global

[StefanTotev]

@jamesbirrellgray Yes, I am. I absolutely agree about it being uniformly global. That's why I mentioned a new class that could handle the links and add the appropriate spacing between them without using the p tag.

[pabloibanezcom]

I think we should create a class (or maybe a collection of them) to apply different margin between list elements. We shouldn't use p tag for a enumeration.

If you are agree I will go for it.

[StefanTotev]

@pabloibanezcom I definitely agree about creating a new class (or collection of classes).

[pabloibanezcom]

A collection of classes have been created to implement this. Please take a look at:

http://cjscommonplatform.github.io/ngGovUk/#!/css

In your case you should use "list-unstyled" and one of these classes (maybe "list-spaced").