Instructions for Use:

Option One: Copy and paste the element

  1. Higlight the entire element above (Control C)
  2. Paste the element inside your email program signautre block (Control P)
  3. Replace your name, title, and cell numbers as needed

Option Two: Copy and paste the HTML

  1. Copy all the HTML code below from <style> all the way to </div>
  2. Paste this inside your email programs signautre block (note this method may not work depending on your email system requirements)
  3. Change the text as needed
<style>
.email_wrap {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    place-items: start;
    display: grid;
}
.email_name-block {
    flex-flow: column;
    margin-bottom: 15px;
}
.email_contact-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}
.email_biz-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    color: #083768;
    background-color: #083768;
    border-radius: 10px;
    justify-content: flex-start;
    align-items: center;
    margin-top: 15px;
    padding: 15px;
    display: inline-flex;
}
.email_name {
    color: #083768;
    margin-bottom: 5px;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 400;
}
.email_title {
    color: #60a0e2;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 18px;
}
.email_contact-block {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    align-items: flex-start;
    display: flex;
}
.email_icon-circle {
    background-color: #60a0e2;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    display: flex;
}
.email_text {
    color: #083768;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 20px;
}
.email_icon-square {
    background-color: #60a0e2;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    padding: 10px;
    display: flex;
}
</style>

<div class="email_wrap">
	<div class="email_name-block">
		<div class="email_name">Jordan Boughner</div>
		<div class="email_title">Field Engineer</div>
	</div>
    <div class="email_contact-wrap">
    	<div class="email_contact-block">
        	<div class="email_icon-circle">
            	<img src="https://cdn.prod.website-files.com/664bb4bd8841f4fbbc351837/69f273231d9aaec587eedaa6_phone-icon-white.png" width="15" height="15" alt="">
            </div>
            <div class="email_text">Cell: 954-459-7832<br>Main: 954-523-2815
            </div>
           </div>
        <div class="email_contact-block">
        	<div class="email_icon-circle">
            	<img src="https://cdn.prod.website-files.com/664bb4bd8841f4fbbc351837/69f2731bb313629c4c98d31a_geo-icon-white.png" width="15" height="15" alt="">
            </div>
            <div class="email_text">617 SW 3rd Ave.<br>Fort Lauderdale 
            </div>
       	</div>
    </div>
    <div class="email_biz-block">
    	<img src="https://cdn.prod.website-files.com/664bb4bd8841f4fbbc351837/69f275975fdb3d1cb77ee4c5_wards-logo-primary-white_1-web.png" sizes="143" height="35" alt="Wards Marine Electric">
        <a href="https://www.wardsmarine.com/" target="_blank" class="email_icon-square w-inline-block">
        	<img src="https://cdn.prod.website-files.com/664bb4bd8841f4fbbc351837/69f272b58de7d91e1ad8dfa6_internet-icon-white.png" width="20" height="20" alt=""></a>
        <a href="https://www.https://www.instagram.com/wardsmarine/.com/" target="_blank" class="email_icon-square w-inline-block">
        	<img src="https://cdn.prod.website-files.com/664bb4bd8841f4fbbc351837/69f272ba99c5c6b8ef5f0906_ig-icon-white.png" width="20" height="20" alt=""></a>
        <a href="https://www.facebook.com/WardsMarineElectric/" target="_blank" class="email_icon-square w-inline-block">
        	<img src="https://cdn.prod.website-files.com/664bb4bd8841f4fbbc351837/69f272b52673f19476a5f246_facebook-icon-white.png" width="20" height="20" alt=""></a>
        <a href="https://www.youtube.com/@WardsWay75" target="_blank" class="email_icon-square w-inline-block">
        	<img src="https://cdn.prod.website-files.com/664bb4bd8841f4fbbc351837/69f272b53a42f055461904b8_youtube-icon-white.png" width="20" height="20" alt=""></a>
        <a href="https://www.linkedin.com/company/wards-marine-electric" target="_blank" class="email_icon-square w-inline-block"><img src="https://cdn.prod.website-files.com/664bb4bd8841f4fbbc351837/69f272b54b42028dc44f5adf_linkedin-icon-white.png" width="20" height="20" alt=""></a>
    </div>
</div>

Instructions for Use:

Option One: Copy and paste the element

  1. Click the button below to copy the entire element
  2. Paste the element inside your email program signautre block
  3. Replace your name, title, and cell numbers as needed