[{* Build CSS *}]
<style>
    .backround{
        position:relative;
        left:0;
        top:0;
        width:100%
    }
    .greeting{
        font-size: 3.3mm;
        position: absolute;
        left: 20mm;
        top: 171mm;
        width: 60mm;
        font-family: 'barlowregular', sans-serif;
    }
    .amount{
        font-size: 10mm;
        font-weight: bold;
        color: #6E9EB5;
        position: absolute;
        left: 111mm;
        top: 170mm;
        width: 100mm;
        font-family: 'oswaldregular', sans-serif;
    }
    .code{
        font-size: 6mm;
        position: absolute;
        left: 112mm;
        top: 196mm;
        width: 100mm;
        font-family: 'barlowbold', sans-serif;
    }
    .valid{
        font-size: 3mm;
        color: #828282;
        position: absolute;
        left: 160mm;
        top: 206.3mm;
        width: 100mm;
        font-family: 'barlowregular', sans-serif;
    }
</style>

[{* Prepare Values *}]
[{assign var="giftcertPrice" value=$giftcert->getPrice()}]

[{* Build HTML *}]
[{$params.imageDiv}]
<div class='greeting'>[{$params.recipientText|nl2br}]</div>
<div class='amount'>[{$giftcertPrice->getPrice()}] [{$params.currencySign}]</div>
<div class='code'>[{$giftcert->ysgiftcert__ysgiftcertnr->value}]</div>
<div class='valid'>[{$giftcert->getGiftcertExpirationDate()}]</div>
