Adding Text Links and Button Inline?

(Peter Rood) #1

Hi Everyone,

I am working on a new Foundation site and in my Mock-Up I have a top row that contains two text based links and a Button. I have been looking for a good way to create a layout that will work for this but I am stumped.

I just want it to be like this and always stay to the right…


See Mock-Up Image…

(scott williams) #2

One way would be with just a 1 column stack with a paragraph stack inside set to right align.

(Peter Rood) #3

Yes… but adding the button to the right changes things up.

(scott williams) #4

Foundation has built in classes to turn a link into a button

(Peter Rood) #5

I am listening. do you have an example?

(scott williams) #6

you could also just do it with html if you want a particular button using an image.
<a href="https://YourLinkHere"> <img src="Your ButtonImageHere.png"></a>

(Peter Rood) #7

Ok, I was able to add a button, but it still looks like a dogs breakfast. Can I add multiple classes? What if I want the button to use the secondary colours and have rounded corners?

And it seems to generate a large amount of space under the button. Not very tight.

(Peter Rood) #8

here is my majestic header so far…

(Peter Rood) #9

I think I am going to go old school a cheat a small bit.

(scott williams) #10

You can style it any way you want with a little CSS

(Robert Ziebol 🖖🏼) #11

Have you tried adding a label with a link, you can learn about labels here:

(system) #12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.