To use Underline, simply drag and drop a copy of the stack into your webpage. With the stack selected in edit mode, you can view it's settings in the Stacks side panel. Here you can change the link address and the label text very easily.

Amongst the other settings shown, you can customise these aspects of Underline:
  • Alignment
  • Link Style
  • Font Size
  • Letter Spacing
  • Padding
  • Font Style
  • Colour Scheme

Font size, letter spacing and padding allow you to supply your own units of measurement, like px, rem, em, % or whatever else you are most comfortable with using or conforms closest with your theme / framework for more consistent styling. Colour pickers support RGBa opacity, using the Mac OS colour picker tool.

Examples

Here are ten examples of all the animation effects supported by Underline. Each link is set as a link to https://example.com



Compatibility

Underline will work with most, but not all RapidWeaver themes. Some themes already apply complicated styling to links, and these styles may override the code or options that the Underline stack uses. Underline stack works with nearly all modern web browsers.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.