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…

LINK ONE | LINK TWO | BUTTON

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

https://foundation.zurb.com/sites/docs/v/5.5.3/components/buttons.html

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…

http://lc.roodsmedia.com


(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:
https://foundationstacks.com/learn/snippets/


(system) #12

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