First off, to enable this template on your website, make sure you set the page keyword to membercard under the SEO & Options. This will then override our out of the box page with this custom screen. Enjoy.
<div class="container" data-pv-component="membership" data-pv-type="membershipcard" data-pv-parameters="">
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-5 col-xl-4 mb-4"> <div class="card card-shadow digital-id"> <div class="card-header"> <img class="digital-id-symbol" src="https://members.thefbrk.com/media/212147/media/1008/assets/img/fbrk-symbol.png" /> </div><!-- // .card-header --> <div class="card-body"> <h2 class="card-title" data-pv-element="membership_details.customer_name">Israel Idonije</h2> <ul class="digital-id-list"> <li data-pv-element="membership_details.membership_title">Network Member</li> <!--<li>Access Member</li>--> <!--<li>Private Office</li>--> </ul><!-- // .digital-id-list --> <div class="digital-id-details"> <span class="card-subtitle d-block"><strong>MEMBER # {@membership_details.membership_id@}</strong></span> <span class="card-subtitle d-block"><strong>MEMBER SINCE: <span data-pv-element="membership_details.created_on" data-pv-formatter="date(MMM d, yyyy)">Aug 23, 2018</span></strong></span> </div><!-- // .digital-id-details --> </div><!-- // .card-body --> <div class="card-footer row"> <img class="digital-id-qrcode d-inline" src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=https://peoplevine.com/verify.aspx%3Freference_type%3Dmembership%26reference_no%3D{@membership_details.membership_card_no@}%26serial_number%3DM{@membership.membership_no@}|{@membership_details.membership_id@}%26customer_no%3D{@membership_details.customer_no@}&choe=UTF-8" /> <div class="digital-id-logo"> <img class="img-fluid" src="https://members.thefbrk.com/media/212145/media/1008/assets/img/fbrk-logo.png" alt="FBRK" /> </div> </div><!-- // .card-footer --> </div><!-- // .card --> </div><!-- // .col --> <div class="col-lg-6 col-xl-6"> <h4>Add to your Phone</h4> <p class="lead text-black">Did you know that if you open this on your mobile phone, you can save it directly to Apple Wallet or Pass Wallet on Android? Visit your account to login via your mobile device.</p> <div class="row"> <div class="col-xl-8"> <h4 class="mt-4">Get a link to open on your phone:</h4> <a href="?generate=memcard" class="btn btn-primary btn-block"><strong>Download Digital ID</strong></a> </div><!-- // .col --> <div class="col-xl-8 mt-3"> <h4 class="mt-4">or send to yourself via:</h4> <a href="?send=sms" class="btn btn-outlined">Text</a> <a href="?send=email" class="btn btn-outlined">Email</a> </div><!-- // .col --> </div><!-- // .row --> </div><!-- // .col --> </div><!-- // .row --> </div><!-- // .container -->