Custom header and footer examples

This article provides some examples of custom headers and footers you can add to your PDFs. See this article for details on how to add custom html headers and footers.

If you just want to add a simple plain text header/footer or a static image, you can read this article.


<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        
        .contact-info {
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            border-top: 1px solid #e0e0e0;
            font-size: 11px;
            color: #666;
            line-height: 1.4;
            width: 100%;
            height: 50px;
            box-sizing: border-box;
        }
        
        .contact-info strong {
            color: #333;
            font-size: 12px;
        }
        
        .company-logo {
            height: 30px;
            width: auto;
        }
        
        .contact-text {
            text-align: right;
        }
        
        @media print {
            body {
                background-color: white;
                padding: 0;
            }
            .contact-info {
                background-color: white;
            }
        }
    </style>
</head>
<body>
    <div class="contact-info">
        <img src="https://imageurl.com" alt="Company Logo" class="company-logo">
        <div class="contact-text">
            <strong>Company Name</strong><br>
            123 Business Street, London, SW1A 1AA<br>
            Phone: +44 20 1234 5678 | Email: info@yourcompany.com | Web: www.yourcompany.com
        </div>
    </div>
</body>
</html>


<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .quotation-footer {
            width: 100%;
            padding: 15px 20px;
            font-family: 'Arial', sans-serif;
            background: #fff;
            border-top: 1px solid #e5e7eb;
            font-size: 12px;
            color: #6b7280;
            text-align: center;
        }
        
        .footer-line {
            margin-bottom: 5px;
        }
        
        .validity {
            color: #dc2626;
            font-weight: 500;
        }
        
        @media (max-width: 600px) {
            .quotation-footer {
                padding: 12px 15px;
                font-size: 11px;
            }
        }
    </style>
</head>
<body>
    <div class="quotation-footer">
        <div class="footer-line validity">This quote is valid for 30 days from August 18, 2025</div>
        <div class="footer-line">Your Company Name • (555) 123-4567 • quotes@yourcompany.com</div>
        <div class="footer-line">Thank you for considering our services</div>
    </div>
</body>
</html>

Footer for contract with page number

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .contract-footer {
            width: 100%;
            padding: 12px 20px;
            font-family: 'Arial', sans-serif;
            background: #fff;
            border-top: 1px solid #d1d5db;
            font-size: 10px;
            color: #6b7280;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .footer-left {
            font-weight: 500;
        }
        
        .footer-center {
            font-style: italic;
        }
        
        .footer-right {
            font-weight: 500;
        }
        
        @media (max-width: 600px) {
            .contract-footer {
                padding: 10px 15px;
                font-size: 9px;
            }
            
            .footer-center {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="contract-footer">
        <div class="footer-left">Your Company Name - Contract Agreement</div>
        <div class="footer-center">Confidential & Proprietary</div>
        <div class="footer-right">Page page-counter</div>
    </div>
</body>
</html>

Header for invoice with company name, invoice number and date

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .page-header {
            width: 100%;
            padding: 15px 20px;
            font-family: 'Arial', sans-serif;
            background: #fff;
            border-bottom: 2px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .company-name {
            font-size: 20px;
            font-weight: bold;
            color: #1f2937;
        }
        
        .invoice-info {
            display: flex;
            gap: 30px;
            align-items: center;
            font-size: 14px;
            color: #6b7280;
        }
        
        .invoice-number {
            font-weight: bold;
            color: #2563eb;
        }
        
        .invoice-date {
            color: #374151;
        }
        
        @media (max-width: 600px) {
            .page-header {
                flex-direction: column;
                gap: 10px;
                text-align: center;
                padding: 12px 15px;
            }
            
            .invoice-info {
                gap: 20px;
            }
            
            .company-name {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    <div class="page-header">
        <div class="company-name">Your Company Name</div>
        <div class="invoice-info">
            <div class="invoice-number">Invoice #INV-2024-001</div>
            <div class="invoice-date">August 18, 2025</div>
        </div>
    </div>
</body>
</html>
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.