Bulma Guidelines¶

How to implement MetrePay UI using Bulma CSS. Bulma is used in MetrePay's PHP Symfony projects and some legacy frontend pages.

Setup¶

Load Cabin font and apply MetrePay overrides after Bulma:

<head>
  <link href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <style>
    /* MetrePay Bulma overrides */
    :root {
      --mp-blue:         #6E96FF;
      --mp-blue-hover:   #6687DC;
      --mp-blue-light:   #EBF0FF;
      --mp-purple:       #5C0390;
      --mp-purple-hover: #3A005C;
      --mp-bg-page:      #F1F1F1;
      --mp-bg-card:      #FAFAFA;
      --mp-text-dark:    #333333;
      --mp-text-body:    #666666;
      --mp-text-muted:   #999999;
      --mp-border:       #E5ECFB;
      --mp-border-input: #92A3C8;
    }

    body {
      font-family: 'Cabin', sans-serif !important;
      background: var(--mp-bg-page);
    }

    /* Override Bulma primary color */
    .button.is-primary {
      background-color: var(--mp-blue) !important;
      border-color: transparent !important;
      border-radius: 8px !important;
      font-family: 'Cabin', sans-serif !important;
      font-weight: 600 !important;
      height: 42px !important;
    }

    .button.is-primary:hover {
      background-color: var(--mp-blue-hover) !important;
      transform: translateY(-1px);
    }

    /* Override input styles */
    .input, .textarea, .select select {
      border: 1.5px solid var(--mp-border-input) !important;
      border-radius: 8px !important;
      font-family: 'Cabin', sans-serif !important;
      font-size: 15px !important;
      color: var(--mp-text-body) !important;
      height: 42px !important;
    }

    .input:focus, .textarea:focus, .select select:focus {
      border-color: var(--mp-blue) !important;
      box-shadow: 0 0 0 3px rgba(110, 150, 255, 0.15) !important;
    }

    /* Override label */
    .label {
      font-family: 'Cabin', sans-serif !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      color: var(--mp-text-dark) !important;
    }

    /* Override card */
    .card {
      border-radius: 10px !important;
      box-shadow: 0px 0px 6px 3px rgba(127, 146, 189, 0.1) !important;
    }

    /* Override notification */
    .notification {
      border-radius: 4px !important;
      font-family: 'Cabin', sans-serif !important;
      font-size: 14px !important;
    }

    /* Override tag */
    .tag {
      border-radius: 9999px !important;
      font-family: 'Cabin', sans-serif !important;
      font-weight: 600 !important;
    }
  </style>
</head>

Component Examples¶

Button¶

<!-- Primary (blue) -->
<button class="button is-primary">Pay Now</button>

<!-- Purple (recurrent) — no Bulma class, use inline style -->
<button class="button" style="background:var(--mp-purple); color:white; border-radius:8px; font-family:'Cabin',sans-serif; font-weight:600; height:42px; border:none;">
  Subscribe
</button>

<!-- Outline -->
<button class="button is-primary is-outlined" style="border-radius:8px; font-family:'Cabin',sans-serif; font-weight:600;">
  Cancel
</button>

<!-- Ghost -->
<button class="button" style="background:var(--mp-blue-light); color:var(--mp-blue); border:none; border-radius:8px; font-family:'Cabin',sans-serif; font-weight:600;">
  View Details
</button>

<!-- Full width -->
<button class="button is-primary is-fullwidth">Continue →</button>

<!-- Small -->
<button class="button is-primary is-small" style="border-radius:8px;">Edit</button>

Form Field¶

<div class="field">
  <label class="label">Full name</label>
  <div class="control">
    <input class="input" type="text" placeholder="John Smith">
  </div>
</div>

<div class="field">
  <label class="label">Email</label>
  <div class="control">
    <input class="input" type="email" placeholder="john@example.com">
  </div>
</div>

Alert / Notification¶

<!-- Error -->
<div class="notification is-danger is-light" style="border-radius:4px; padding:12px 16px;">
  ⚠️ Payment failed. Please check your card details and try again.
</div>

<!-- Success -->
<div class="notification is-success is-light" style="border-radius:4px; padding:12px 16px;">
  ✓ Payment confirmed! Your receipt has been sent to your email.
</div>

<!-- Warning -->
<div class="notification is-warning is-light" style="border-radius:4px; padding:12px 16px;">
  ⏳ Your payment is being processed.
</div>

Tags¶

<span class="tag" style="background:var(--mp-blue-light); color:var(--mp-blue-hover);">Active</span>
<span class="tag is-success is-light">Paid</span>
<span class="tag is-warning is-light">Pending</span>
<span class="tag is-danger is-light">Failed</span>

Card¶

<div class="card" style="background:var(--mp-bg-card);">
  <div class="card-content">
    <p class="title is-5" style="color:var(--mp-text-dark); font-family:'Cabin',sans-serif;">Pro Plan</p>
    <p class="title is-3" style="color:var(--mp-blue); font-family:'Cabin',sans-serif;">
      $29.99<small style="font-size:14px; color:var(--mp-text-muted); font-weight:400;">/mo</small>
    </p>
    <button class="button is-primary is-fullwidth">Select Plan</button>
  </div>
</div>

Payment Form (Bulma)¶

<section class="section" style="background:var(--mp-bg-page); min-height:100vh; display:flex; align-items:center;">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-5">

        <!-- Form card -->
        <div style="border-radius:20px; overflow:hidden; box-shadow:0px 10px 16px rgba(0,14,45,0.1);">

          <!-- Blue hero -->
          <div style="background:var(--mp-blue); padding:24px 32px; color:white;">
            <p style="font-size:13px; opacity:0.8; margin-bottom:4px;">Acme Corp</p>
            <p style="font-size:22px; font-weight:700; margin-bottom:4px;">Monthly Invoice</p>
            <p style="font-size:28px; font-weight:700;">$150.00</p>
          </div>

          <!-- Form body -->
          <div style="background:white; padding:28px 32px;">
            <span style="font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--mp-blue); display:block; margin-bottom:4px;">STEP 1 OF 2</span>
            <h2 class="title is-5" style="color:var(--mp-text-dark); font-family:'Cabin',sans-serif; margin-bottom:20px;">Your information</h2>

            <div class="field">
              <label class="label">Full name</label>
              <div class="control">
                <input class="input" type="text" placeholder="John Smith">
              </div>
            </div>

            <div class="field">
              <label class="label">Email</label>
              <div class="control">
                <input class="input" type="email" placeholder="john@example.com">
              </div>
            </div>

            <div class="field" style="margin-bottom:20px;">
              <label class="label">Document number</label>
              <div class="control">
                <input class="input" type="text" placeholder="12345678">
              </div>
            </div>

            <button class="button is-primary is-fullwidth" style="margin-top:4px;">Continue →</button>

            <p style="text-align:center; font-size:12px; color:var(--mp-text-muted); margin-top:16px;">
              Powered by MetrePay · Secure payment
            </p>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>

Rules¶

Bulma rules

Always load Cabin font and apply the MetrePay override stylesheet
Always override .button.is-primary with MetrePay blue
Always override .input height to 42px and border to 1.5px solid #92A3C8
Use .notification.is-danger.is-light for error alerts
Use .tag with inline style overrides for MetrePay tag colors
Use .columns.is-centered + .column.is-5 for centered form layouts
Never rely on Bulma's default primary color — always override it