Links

A sampling of links

Classes

• lotusActions - can be applied to a grouping of action links so you don't have to class each individual link with lotusAction
• lotusAction - applied to individual action link elements
• lotusPerson - applied to individual person link elements
• lotusPersonInactive - applied to either a grouping or individual person links that are inactive
• lotusTags - applied to a grouping of tag links
• lotusRelatedTags - an additional class added along with lotusTags when the tags are related tags
• lotusMyLinks - additional class applied to a grouping of link elements that indicates the user has created them
• lotusMyLink - additional class applied to a link element that indicates the user has created it
• lotusBackToTop - applied to the img following a back to top link

Basic Implementation

Navigational links pick up the default styling for links. No class needed for this type of link.

For individual action links, which can appear anywhere in the UI, apply the lotusAction class to the link. If you have a group of action links, you can apply the lotusActions class to the wrapping container so you don't have to add the lotusAction class to each individual link.

For individual person links, apply the lotusPerson class to the link element. If the person is inactive, use lotusPersonInactive instead.

For tags, apply lotusTags to the containing element. For related tags, add the lotusRelatedTags class (related tags have additional markup. See code tab.)

My links are user-created links. For a grouping of them, apply lotusMyLinks as an additional class. For individual links, apply lotusMyLink as an additional class.

Accessibility

For links that don't take you to another page (or reload the page), put role="button" on the link. This tells the screen reader user they will be performing an action rather than going someplace else. We have an example of this in the action links that are part of our tables. However, any other links in our UI are not marked up with role="button" because it is not always clear what kind of action will occur by just looking at markup, and the action may change over time. So you will have to determine which links require role="button" for your product code.

Examples

All of our example pages contain a combination of links.

• Sample page

Sample HTML

CSS (base.css)

You will have to look at the base.css file (or the top sections of core.css and defaultTheme.css) to see the CSS for links.

In the past, all our different link types had distinct stylings. Most have converged at this point, but the styles allow the option of differing again in the future.

January 2011: This link page was added to our components section, so we have an explanation of the basic types. They are more of a core component, but since there are some accessibility requirements, it made sense to separate them out.

January 19, 2012 - Made the tags lists into ARIA list and added a separator bar between it and the add link.

March 29, 2012 - Added the lotusBackToTop example.