Posted By

visualpropaganda on 05/06/09


Tagged

html hcard


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

geldora
jamiepeloquin


hCard with vcard download link via X2V


 / Published in: HTML
 

URL: http://suda.co.uk/projects/microformats/hcard/

Use of the vCard(hCard) microformat, used to mark up contact details of people, companies, organisations and places. Includes an download link via X2Vs hcard to vcard-service. Can be styled as a 2-column hcard via CSS (see CSS snippet)

inspired by the hcard implementation by Jon Tangerin (http://jontangerine.com/about/)

  1. #
  2. <!--
  3. Use of the vCard(hCard) microformat, used to mark up contact details of
  4. people, companies, organisations and places. Includes an download link via X2Vs
  5. hcard to vcard-service. Can be styled as a 2-column hcard via CSS)
  6. -->
  7.  
  8. <div class="vcard">
  9. <div class="fn">John Smith</div> <!-- FN = Full Structured Name -->
  10. <ul class="communication">
  11. <li class="tel">
  12. <span class="type">Home/Phone</span>
  13. <span class="numbers"> +44 (1234) 56789</span><!-- class "numbers" is for CSS Styling -->
  14. </li>
  15. <li class="email">
  16. <span><a href="mailto:[email protected]" title="Write me an email!">email</a></span><!-- obfuscate email with http://www.zapyon.de/spam-me-not/ -->
  17. </li>
  18. <li class="url">http://thisisfake.com</li>
  19. </ul><!--/end communication -->
  20. <ul class="adr">
  21. <li class="street-address">Fake Street<span class="numbers"> 123 Fake Street</span></li><!-- class "numbers" is for CSS Styling -->
  22. <li class="postal-code">D-<span class="numbers">12345</span><span class="locality"> locality</span></li>
  23. <li class="country-name">Country</li>
  24. </ul>
  25. </div><!--/vcard-->
  26. <div id="vcard-download"><a href="http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri=http://yourcontactpage.com" title="Add my contact-details to your adressbook">Download my contact-details as a vCard (via X2V)</a>
  27. </div>

Report this snippet  

You need to login to post a comment.