--- a/src/pyams_default_theme/component/paragraph/templates/contact-default.pt	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/paragraph/templates/contact-default.pt	Mon Nov 19 15:16:16 2018 +0100
@@ -1,13 +1,37 @@
-<div class="bordered contact padding-10"
+<div class="contact-card"
 	 tal:define="settings view.settings">
 	<h3 tal:content="view.title">Contact title</h3>
 	<div tal:condition="settings.can_display_photo"
-		 tal:attributes="class string:thumbnail photo pull-${settings.photo_position}">
-		<img tal:attributes="src tales:absolute_url(view.photo, '++thumb++w128')" />
+		 class="thumbnail photo pull-${settings.photo_position}">
+		${structure:tales:picture(view.photo, lg_width=3, md_width=3, sm_width=4, xs_width=4)}
 	</div>
 	<div tal:condition="settings.can_display_map"
 		 tal:attributes="class string:map pull-${settings.map_position}">
 		Location map
 	</div>
-	<strong tal:content="view.name">Contact name</strong><br />
+	<address>
+		<strong class="contact-name">${view.name}</strong><br />
+		<tal:if condition="view.charge">
+			${view.charge}<br />
+		</tal:if>
+		<tal:if condition="view.company">
+			<strong>${view.company}</strong><br />
+		</tal:if>
+		<div class="address"
+			 tal:condition="view.address">
+			${structure:tales:html(view.address)}
+		</div>
+		<tal:if condition="view.contact_email">
+			<span i18n:translate="">Contact email:</span>
+			<a href="mailto:${view.contact_email}">
+				${view.contact_email}
+			</a><br />
+		</tal:if>
+		<tal:if condition="view.phone_number">
+			<span i18n:translate="">Phone number:</span>
+			<a href="tel:${view.phone_number}">
+				${view.phone_number}
+			</a><br />
+		</tal:if>
+	</address>
 </div><div class="clearfix"></div>