Labels

You can easily add nice looking labels to the text on your page. Just by tweaking the snippet code you can mix and match for many different styles.

<span class="[success alert secondary] [round radius] label">Advanced Label</span>

Code

If you want to display inline code or just make some text stand out, you can use this snippet

<code>Some Code</code>

Keystrokes

Keystrokes allow you to add a different kind of text accent to your page. It looks great for keyboard shortcuts!

Use Cmd + R to switch to preview mode in RapidWeaver.

<p>Use <kbd>Cmd</kbd> + <kbd>R</kbd> to switch to preview mode in RapidWeaver</p>

Tooltips

The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top", "tip-left", or "tip-right" of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full-width and bottom aligned.

For more advanced settings for the Tooltips (disabling touch events, round the corners of the tooltips), please visit this Foundation page.

<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>

More at Foundation Docs

You can hand code any of the Foundation snippets and components to your heart's content. If getting down and dirty with some code is your thing, head over the the Foundation docs and have some fun.