Phone Numbers

The Phone Numbers block allows the user to manage their phone numbers.
Edit on GitHub
On this page:
Best Practices

MyLa should be used to allow users to manage their phone numbers. If not, use this form.
Usage

Phone Numbers

Add as many phone numbers as you need. These phone numbers must be able to receive text messages.
CardLabelHere
Card Value Here
Card Meta Here
CardLabelHere
Card Value Here
Card Meta Here
Add a Phone Number
Phone Number Label
Phone Number
Extension
Language
<div class="content-container py-4 p-lg-16 my-16">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <h3 class="h3 mb-6 text-primary">
                    <span class="fas fa-phone fa-fw mr-1 text-primary-10"></span> Phone Numbers
                </h3>
                <p>Add as many phone numbers as you need. These phone numbers must be able to receive text messages.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-4 mb-lg-0">
                    <div class="card-body">
                        <p class="h6 card-title font-weight-bold mr-12 mb-2">CardLabelHere</p>
                        <p class="mr-12 mb-2">Card Value Here</p>
                        <p class="small mr-12 mb-0">Card Meta Here</p>
                        <button class="btn btn-link bg-transparent border-0 shadow-none btn-card-edit">
                            <span class="fas fa-pencil-alt"></span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card mb-4 mb-lg-0">
                    <div class="card-body">
                        <p class="h6 card-title font-weight-bold mr-12 mb-2">CardLabelHere</p>
                        <p class="mr-12 mb-2">Card Value Here</p>
                        <p class="small mr-12 mb-0">Card Meta Here</p>
                        <button class="btn btn-link bg-transparent border-0 shadow-none btn-card-edit">
                            <span class="fas fa-pencil-alt"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <button type="button" class="addThis btn-add-this">
                    <div>
                        <span class="fa fa-plus-circle fa-fw text-white"></span>
                    </div>
                </button>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="form-row">
                            <div class="col-12">
                                <p class="h6 card-title font-weight-bold mr-12 mb-2">Add a Phone Number</p>
                            </div>
                            <div class="col-12 col-md-6 col-xl-4">
                                <div class="form-group">
                                    <label for="PhoneLabel">Phone Number Label</label>
                                    <select class="custom-select" id="PhoneLabel">
                                        <option selected>&mdash; Select a Label for this Phone Number &mdash;</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-xl-3">
                                <div class="form-group">
                                    <label for="PhoneNum">Phone Number</label>
                                    <input type="tel" class="form-control" id="PhoneNum">
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-xl-2">
                                <div class="form-group">
                                    <label for="PhoneExt">Extension</label>
                                    <input type="tel" class="form-control" id="PhoneExt">
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-xl-3">
                                <div class="form-group">
                                    <label for="PhoneLang">Language</label>
                                    <select class="custom-select" id="PhoneLang">
                                        <option selected>&mdash; Select Language &mdash;</option>
                                        <option value="PreferredLanguage">Use my preferred language</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <button class="btn btn-ui">
                                    <span class="fas fa-check"></span>
                                </button>
                                <button class="btn btn-ui">
                                    <span class="fas fa-undo-alt"></span>
                                </button>
                                <button class="btn btn-ui">
                                    <span class="fas fa-minus-circle"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>