Skip to content

Hero

MetrePay hero sections use the signature gradient to establish context and brand identity at the top of payment flows and catalog pages.

Gradient Hero (Default)

MetrePay

Automate your payments

Simple, fast, and reliable payment automation for your business.

<section style="background:linear-gradient(73deg,#6E96FF 20%,#5C0390 100%); padding:64px 32px; color:white; font-family:'Cabin',sans-serif; text-align:center;">
  <h1 style="font-size:40px; font-weight:700; color:white; margin:0 0 12px 0; line-height:1.2;">
    Automate your payments
  </h1>
  <p style="font-size:18px; color:rgba(255,255,255,0.85); margin:0 0 32px 0; max-width:560px; margin-left:auto; margin-right:auto;">
    Simple, fast, and reliable payment automation for your business.
  </p>
  <button style="background:linear-gradient(90deg,#6E96FF 0%,#84a7ff 75%,#adc5ff 100%); color:white; border:none; border-radius:8px; padding:0 28px; height:52px; font-family:'Cabin',sans-serif; font-size:17px; font-weight:600; cursor:pointer;">
    Get Started
  </button>
</section>

Payment Form Hero (Blue)

Used at the top of single payment forms:

MetrePay

Acme Corp

Monthly Invoice

$150.00

<!-- Blue hero for single payment forms -->
<div style="background:#6E96FF; padding:24px 32px; color:white; font-family:'Cabin',sans-serif; border-radius:10px 10px 0 0;">
  <p style="font-size:13px; opacity:0.8; margin:0 0 4px 0;">Acme Corp</p>
  <p style="font-size:24px; font-weight:700; margin:0 0 4px 0;">Monthly Invoice</p>
  <p style="font-size:32px; font-weight:700; margin:0;">$150.00</p>
</div>

Payment Form Hero (Purple)

Used at the top of recurrent/subscription payment forms:

Acme Corp

Pro Subscription

$29.99/month

<!-- Purple hero for recurrent payment forms -->
<div style="background:#5C0390; padding:24px 32px; color:white; font-family:'Cabin',sans-serif; border-radius:10px 10px 0 0;">
  <p style="font-size:13px; opacity:0.8; margin:0 0 4px 0;">Acme Corp</p>
  <p style="font-size:24px; font-weight:700; margin:0 0 4px 0;">Pro Subscription</p>
  <p style="font-size:32px; font-weight:700; margin:0;">$29.99<span style="font-size:14px; font-weight:400; opacity:0.7;">/month</span></p>
</div>

Catalog Hero

Used at the top of product catalog pages:

<div style="background:linear-gradient(73deg,#6E96FF 20%,#5C0390 100%); padding:32px; color:white; font-family:'Cabin',sans-serif; border-radius:10px; margin-bottom:32px;">
  <div style="display:flex; align-items:center; gap:16px;">
    <!-- Merchant logo -->
    <div style="width:56px; height:56px; background:rgba(255,255,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px;">
      🏢
    </div>
    <div>
      <p style="font-size:13px; opacity:0.8; margin:0 0 2px 0;">Payment catalog</p>
      <h1 style="font-size:24px; font-weight:700; color:white; margin:0;">Acme Corp</h1>
    </div>
  </div>
</div>

Rules

Hero rules

  • Use --mp-gradient-hero for full-page hero sections and catalog headers
  • Use solid #6E96FF for single payment form headers
  • Use solid #5C0390 for recurrent payment form headers
  • Hero text is always white — never dark text on gradient backgrounds
  • Hero padding: 64px 32px for full-page, 24px 32px for form headers
  • Never use the gradient as a page background — only for hero sections
  • Always include the MetrePay logo in white on gradient backgrounds