Popover

<div class="preview-item">
  <div class="c-popover c-popover--auto">
    <div class="c-popover__arrow c-popover__arrow--left">
      <div class="c-popover__arrow-inner"></div>
    </div>
    <div class="c-popover__body">
      <div class="c-popover__header">
        <h3 class="c-popover__title">Auto-scaling popover</h3>
        <button type="button" class="c-button c-button--subtle c-button--icon">
          <i class="c-button__icon icon icon-close"></i>
        </button>
      </div>
      <p>Popover content</p>
    </div>
  </div>
</div>

<div class="preview-item">
  <div class="c-popover c-popover--extra-small">
    <div class="c-popover__arrow c-popover__arrow--left">
      <div class="c-popover__arrow-inner"></div>
    </div>
    <div class="c-popover__body">
      <div class="c-popover__header">
        <h3 class="c-popover__title">Extra small popover</h3>
        <button type="button" class="c-button c-button--subtle c-button--icon">
          <i class="c-button__icon icon icon-close"></i>
        </button>
      </div>
      <p>Popover content</p>
    </div>
  </div>
</div>

<div class="preview-item">
  <div class="c-popover c-popover--small">
    <div class="c-popover__arrow c-popover__arrow--left">
      <div class="c-popover__arrow-inner"></div>
    </div>
    <div class="c-popover__body">
      <div class="c-popover__header">
        <h3 class="c-popover__title">Small popover</h3>
        <button type="button" class="c-button c-button--subtle c-button--icon">
          <i class="c-button__icon icon icon-close"></i>
        </button>
      </div>
      <p>Popover content</p>
      <div class="c-popover__footer">
        <div class="c-toolbar">
          <div class="c-toolbar__right">
            <div class="c-toolbar__item">
              <button type="button" class="c-button c-button--subtle">
                Cancel
              </button>
            </div>
            <div class="c-toolbar__item">
              <button type="button" class="c-button c-button--primary">
                Apply
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="preview-item">
  <div class="c-popover c-popover--medium">
    <div class="c-popover__arrow c-popover__arrow--left">
      <div class="c-popover__arrow-inner"></div>
    </div>
    <div class="c-popover__body">
      <div class="c-popover__header">
        <h3 class="c-popover__title">Medium popover</h3>
        <button type="button" class="c-button c-button--subtle c-button--icon">
          <i class="c-button__icon icon icon-close"></i>
        </button>
      </div>
      <p>Popover content</p>
    </div>
  </div>
</div>

<div class="preview-item">
  <div class="c-popover c-popover--large">
    <div class="c-popover__arrow c-popover__arrow--left">
      <div class="c-popover__arrow-inner"></div>
    </div>
    <div class="c-popover__body">
      <div class="c-popover__header">
        <h3 class="c-popover__title">Large popover</h3>
        <button type="button" class="c-button c-button--subtle c-button--icon">
          <i class="c-button__icon icon icon-close"></i>
        </button>
      </div>
      <p>Popover content</p>
    </div>
  </div>
</div>