skouter/views/test.tpl

{{define "header"}}
<header class="default fade-in">
</header>
{{end}}

{{define "main"}}
<div id="pdf-doc" ref="doc" v-if="estimate">
<div class="disclaimer"><p>Actual costs may vary from estimates after approval. Get an official quote before choosing a loan.</p></div>

<header class="heading">

<img src="data:image/png;base64,{{.Letterhead}}" />

<div>
<div class="user-info">
<h4>{{.User.FirstName}} {{.User.LastName}}</h4>
<span>{{.User.Email}}</span>
<span>{{.User.Phone}}</span>
<small>{{.User.Address.Street}}</small>
<small>
{{.User.Address.City}}, {{.User.Address.Region}} {{.User.Address.Zip}}
</small>
</div>
<img src="data:image/png;base64,{{.Avatar}}" />
</div>

</header>

<style scoped>
#pdf-doc {
    margin: 4px 30px;
}

.disclaimer {
    font-weight: bold;
    border-bottom: 1px solid lightgrey;
    margin-bottom: 20px;
    color: var(--text);
}

.disclaimer p {
    margin: 5px 0;
}

h4 {
    margin: 4px 0;
}

header.heading {
    display: flex;
    justify-content: space-between;
}

.user-info {
    display: flex;
    flex-flow: column;
}

#pdf-doc header.heading > div {
    display: flex;
    text-align: right;
}

header.heading .user-info {
  margin-right: 8px;
}
</style>
{{end}}