Skip to Main Content

Pelican Design System icon Pelican Design System Address

Address

The Address block allows the user to input their address on a form.

Edit on GitHub

On this page:

Best Practices

  • MyLa should be used to manage users’ addresses. If not, use this form.
  • Put the form into a column to size as necessary.
  • Change the heading level when appropriate.

Usage

Address

Give us your mailing address so we can send you documents.

If there’s an asterisk we have to get that information.

<div class="card">
  <div class="card-body">
    <h3 class="form-title">
      <span class="icon fas fa-mail-bulk text-primary-10 me-1" aria-hidden="true"></span>Address
    </h3>
    <p>Give us your mailing address so we can send you documents.</p>
    <p class="small">If there&rsquo;s an asterisk <span class="font-weight-bold fw-bold"><span class="icon fas fa-asterisk text-danger" aria-hidden="true"></span></span> we have to get that information.</p>
    <div class="row">
      <div class="col-12">
        <div class="form-group">
          <label for="address1">
            <span class="icon fas fa-asterisk text-danger me-1" aria-hidden="true"></span>Street Address 1
          </label>
          <input type="text" class="form-control" id="address1">
        </div>
        <div class="form-group">
          <label for="address2">
            Street Address 2
          </label>
          <input type="tel" class="form-control" id="address2">
        </div>
        <div class="form-group">
          <label for="city">
            <span class="icon fas fa-asterisk text-danger me-1" aria-hidden="true"></span>City
          </label>
          <input type="text" class="form-control" id="city">
        </div>
        <div class="form-group">
          <label for="state">
            <span class="icon fas fa-asterisk text-danger me-1" aria-hidden="true"></span>State
          </label>
          <select class="custom-select form-select" id="state">
            <option selected>&mdash; Select your state &mdash;</option>
            <option value="1">1 (One)</option>
            <option value="2">2 (Two)</option>
            <option value="3">3 (Three)</option>
          </select>
        </div>
      </div>
      <div class="col-6">
        <div class="form-group">
          <label for="Zip">
            <span class="icon fas fa-asterisk text-danger me-1" aria-hidden="true"></span>Zip
          </label>
          <input type="text" class="form-control" id="Zip">
        </div>
      </div>
      <div class="col-12">
        <button class="btn btn-primary">
          <span class="icon fas fa-check me-1" aria-hidden="true"></span>Save Address
        </button>
      </div>
    </div>
  </div>
</div>
Next
Page top