Skip to main content link. Accesskey S

Person Card (vcard)

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.

Directionality:

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.

Examples

  • Profile card in action
  • Stand-alone samples (Example of the hover link can be found on this page.)
  • 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.

    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).

    IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.