Modals

<div>
  <button
    type="primary"
    class="c-button c-button--primary"
  >
    <span class="c-button__label">Open small modal</span>
  </button>
  <div class="c-cover">
    <div
      class="c-modal c-modal--small"
      id="remove-item"
    >
      <div class="c-modal__header">
        <h2 class="c-modal__title">Are you sure?</h2>
        <button
          type="transparent"
          class="c-button c-button--transparent c-button--icon-only c-modal__close"
        >
          <span class="c-button__icon c-icon c-icon--small">
            <!-- SVG element -->
          </span>
        </button>
      </div>
      <div class="c-modal__content">
        <p class="u-paragraph">
          Are your sure you want to remove this item? This
          action is irreversible.
        </p>
      </div>
      <div class="c-modal__footer">
        <div class="c-modal__footer-right">
          <div class="c-field-group">
            <button class="c-button">
              <span class="c-button__label">Cancel</span>
            </button>
            <button
              type="danger"
              class="c-button c-button--danger"
            >
              <span class="c-button__label">Remove</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>