Person Card (vcard)

NOTE: This component is deprecated.

The person card is accessed from a person's name. Hovering over the name reveals a link from which you launch the card.

The card contains application links so you can get to the person's page in each application, relevant data for the person, and a drop-down action menu.

Inline Person Card

Hover Link

Classes

  • lotusVCard - the class that goes on the component wrapper div.
  • lotusContainer - the class that goes on the table.
  • lotusAppLinks - the class on the rows in the table that contain the application links.
  • lotusFirst - the class used on the first application link in a row and the first item of the person actions, to get rid of the left borders.
  • lotusMore - the class that goes on the link that expands the second row of application links.
  • lotusDetails - this class goes on the td cell that surrounds the body of the card.
  • lotusPhoto - the class assigned to the div that surrounds the person's picture
  • lotusPersonInfo - the class on the div that wraps the information displayed for the person
  • lotusPersonActions - the class on the div surrounding the action links at the bottom of the person card.
  • lotusActionMenu - the person card contains an action menu
  • lotusInlineVCard - an additional class that goes on the person card when it sits inline in the left column.
  • lotusPivotNav, lotusPivotNavToggle - classes used for the area of the inline person card that toggles the details of the card.
  • lotusInlineVCardDetails - the class that surrounds the details of the inline card.

Basic Implementation

The styles for the person card (including support styles from our base style sheets) are self contained in a vcard.css file to provide customers the option of using our person card code in other apps.

You can optionally include standard hcard microformat classes on the profile card elements.

The action drop down menu can be expanded but not collapsed (the person would either pick a menu item or dismiss the card).

The vcard is created as an absolutely positioned div (with a unique id) at the bottom of your page.

The card is dismissed when you choose a link on the card or click outside of it.

Variations

The format of the inline person card is a little different than the popup card. There is an additional control that allows you to open and close the details of the card.

The easiest way to see how to code the inline person card is to look at the code on the Stand-alone Vcard page.

Accessibility

This version of the person card is being replaced by a new object card (not in the Toolkit yet) and has not been reviewed for accessibility, although there are some ARIA attributes in place.

Examples

Sample HTML

Sample HTML - Inline person card

Sample HTML - Hover link

CSS (vcard.css)

Theme CSS (vcardTheme.css)

The vcard was initially the inline person card. That component has been removed as a navigational element, but we are supporting a version for customers who are still using it.

The vcard is creating using a table, so it can grow and shrink properly and behaves in IE 6.

January 2011: Design is currently working on a revision to the look of the person card, to bring it into alignment across web and desktop apps (Notes and Sametime).

February 9, 2011: Removed the styling to automatically hide the component using top:-9999px. This wasn't hiding the component for screen reader users.

March 2, 2011: Updated the hover link styles.

June 26, 2012: Updated color contrast of the toggle twisty icon to be accessible (small text 4.5:1 equivalent).

July 3, 2012: Updated color contrast of the more/hide icons to be accessible.