1. Components

Modal

Modal

Because live preview in iframe preview is complicated, we use image and link to live preview.


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Usage

Lorem ipsum

Regular block quote. Every page should have only one Primary Large button. Remaining large buttons should be secondary.

Use Primary Large button only for most important action on the page Every page should have only one Primary Large button. Remaining large buttons should be secondary.

Use Primary Large button only for most important action on the page

Every page should have only one Primary Large button. Remaining large buttons should be secondary.

Documentation

Lorem ipsum

FAQ

Lorem ipsum