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