Skip to content

Instantly share code, notes, and snippets.

@gavinworks
Last active December 18, 2015 13:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gavinworks/5794201 to your computer and use it in GitHub Desktop.
Save gavinworks/5794201 to your computer and use it in GitHub Desktop.
FOUNDATION: HTML - vCard Markup
<div id="company-name-here" class="vcard">
<div class="adr">
<div class="org"><a class="url" href="{{ url:site }}">{{ settings:site_name }}</a></div>
<div class="street-address">{{ variables:add_street }}</div>
<span class="locality">{{ variables:add_locality }}</span>
<span class="region">{{ variables:add_region }}</span>
<span class="postal-code">{{ variables:add_postcode }}</span>
</div>
<div class="tel"><!-- Duplicate this div for other phones like cell nos. etc -->
<span class="type visually-hidden">work</span>
<span class="value">{{ variables:tel_work }}</span>
</div>
<span><a class="email" href="mailto:{{variables:add_email}}">{{variables:add_email}}</a></span>
<a type="text/directory" href="http://h2vx.com/vcf/thewebsie.co.uk" class="app-btn button">Download vCard</a>
<span data-tooltip data-width="200px" data-options="disable-for-touch:true" class="has-tip tip-top" title="A vCard is a convenient way to add details to your device's electronic address book.">What's a vCard?</span>
</div>
<!-- And for the styling -->
.vcard {
line-height: $paragraph-line-height;
display: block;
border: none;
padding: 0;
div span, a {
display: block;
}
div.adr {
margin-bottom: 1.5em;
}
a[type="text/directory"] {
margin-top: 1.5em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment