Pleasance Styleguide

Donation Form 

<div>
    <form>
        <div class="border-5 border border-primary rounded p-4">
            <div class="d-flex align-items-center gap-2">
                <div id="via_cart_donation_amount_wrapper">
                    <div class="js-form-item form-item js-form-type-number form-item-amount js-form-item-amount d-flex align-items-center gap-2">
                        <label for="amount" class="form-label m-0 fs-4">
                            <span class="visually-hidden">Amount</span> £
                        </label>
                        <input aria-describedby="amount-description" type="number" id="amount" name="amount" value="10" step="1" min="0" class="form-number form-control form-control__small">
                        <div id="amount-description" class="m-0 description visually-hidden">
                            Please enter an amount in pounds.
                        </div>
                    </div>
                </div>
                <input data-drupal-selector="edit-submit" type="submit" id="submit" name="submit" value="Donate" class="button js-form-submit form-submit m-0 btn btn-primary">
            </div>
            <p class="mt-2 mb-0">Thank you for your donation!</p>
        </div>
    </form>
</div>
 
<div>
  <form>
    <div class="border-5 border border-primary rounded p-4">
      <div class="d-flex align-items-center gap-2">
        <div id="via_cart_donation_amount_wrapper">
          <div class="js-form-item form-item js-form-type-number form-item-amount js-form-item-amount d-flex align-items-center gap-2">
            <label for="amount" class="form-label m-0 fs-4">
              <span class="visually-hidden">Amount</span> £
            </label>
            <input aria-describedby="amount-description" type="number" id="amount" name="amount" value="{{ amount }}" step="1" min="0" class="form-number form-control form-control__small">
            <div id="amount-description" class="m-0 description visually-hidden">
              Please enter an amount in pounds.
            </div>
          </div>
        </div>
        <input data-drupal-selector="edit-submit" type="submit" id="submit" name="submit" value="{{ update ? 'Update' : 'Donate'}}" class="button js-form-submit form-submit m-0 btn btn-primary">
      </div>
      <p class="mt-2 mb-0">Thank you for your donation!</p>
    </div>
  </form>
</div>
 
{
  "amount": 10,
  "update": false
}

No notes defined.