Shipyard Modals

Modals are triggered by applying the following attribute to any button or link (e.g. modal-trigger="login").

Building Modals

Useful when you need to draw attention to information that requires additional action.

<div class="modal-container z-200">
  <div class="modal" role="dialog">
    <div class="modal-content">
      <div class="modal-title">
        <!-- Modal Title -->
      </div>
      <!-- Modal Content -->
    </div>
    <div class="modal-ctas">
      <button class="btn btn-primary">Save</button>
      <button class="btn btn-secondary">Cancel</button>
    </div>
  </div>
</div>

By default, modals don’t have a z-index property applied so it is recommended to use the z-index utility classes on the modal-container element. We’ve chosen the highest possible value (i.e. .z-200) for the purposes of our documentation.

CSS Output

Here’s the raw CSS output if you’d like a peak under the hood.

.modal { width: 100%; max-width: 800px; margin: auto }
.modal-sm { max-width: 660px }
.modal-open { overflow: hidden }
.modal-container { top: 0; left: 0; right: 0; bottom: 0; padding: 10px; overflow: auto; position: fixed; background: rgba(30,37,44,0.9); transition: 300ms padding ease; -webkit-overflow-scrolling: touch }
.modal-content { background: #fff; border-radius: 5px 5px 0 0; padding: 15px }

@media screen and (min-width:  576px) {
.modal-content { padding: 20px }
}

@media screen and (min-width:  768px) {
.modal-content { padding: 30px }
}
.modal-title,
.modal-title-border { line-height: 1; margin: 0 0 15px }
.modal-title-border { padding: 0 0 10px; border-bottom: 2px solid rgba(89,123,145,0.08) }
.modal-ctas { background: #f2f5f7; border-radius: 0 0 5px 5px; padding: 10px 15px }

@media screen and (min-width:  576px) {
.modal-ctas { padding: 15px 20px }
}

@media screen and (min-width:  768px) {
.modal-ctas { padding: 15px 30px }
}