.c-header-option-card

scss
.c-header-option-card {
  background: use-color('base', 'true-white');
  border: solid 1px use-color('secondary');
  border-radius: 8px;
  box-shadow: $box-shadow-card-lvl-2;
  display: none;
  flex-direction: column;
  padding: 16px 20px;
  position: absolute;
  right: -8px;
  top: 30px;
  width: 270px;
  z-index: use-layer('content-3');

  @include media-breakpoint-up('tablet') {
    right: 0;
    top: 28px;
    width: 340px;
  }

  @include element('header') {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;

    h3 {
      margin: 0;
    }
  }

  @include element('content') {
    margin-bottom: 16px;
  }

  @include element('content-notifications') {
    margin-left: -20px;
    margin-right: -20px;
    max-height: 360px;
    min-height: 240px;
    overflow: auto;
  }

  @include element('actions') {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 16px;

    .c-button {
      margin: 0;
      width: 48%;
    }
  }

  @include element('actions-top') {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .c-button {
      @include use-font('body-alt', 'regular');

      padding: 4px 29px;
      width: fit-content;
    }
  }

  &.is-selected {
    display: flex;
  }
}

Example

html
<header class="l-main__content-header">
  <a class="l-main__content-header--open-side-menu" onclick="toggleSideMenu()">
    <span class="icon-sidebar"></span>
  </a>
  
  <div class="l-main__content-header--main-content">
    <h3 class="l-main__content-header--title">
      Analítica
    </h3>

    <ul class="c-breadcrumbs">
      <li class="c-breadcrumbs__item">
        <a href="#">
          home
        </a>
      </li>
      <li class="c-breadcrumbs__item">
        <a href="#">
          second level thing
        </a>
      </li>
      <li class="c-breadcrumbs__item">
        <a href="#">
          last level
        </a>
      </li>
    </ul>
  </div>

  <div class="l-main__content-header--actions">
    
    <div class="u-wrapper--relative-tablet-up">
      
      <a class="c-action-link">
        <span class="icon-download"></span>
      </a>
      
      <div class="c-header-option-card is-selected">
        
        <div class="c-header-option-card__header">
          <h3 class="u-text__subheading">Descargas</h3>

          <a href="#" class="c-modal__close-icon">
            <span class="icon-close"></span>
          </a>
        </div>
        
        <div class="c-header-option-card__content">
          <ul class="c-list">
            <li class="c-list__download-report--header">
              <span>Excel</span>
              <span>CSV</span>
            </li>
            
            <li class="c-list__download-report">
              <a class="c-link-list">
                <span class="icon-reports-sheet"></span>
              </a>
              <a class="c-link-list">
                <span class="icon-reports-csv"></span>
              </a>
              <span class="u-text u-text__body-alt u-text--bold">
                Resumen de los chat
              </span>
            </li>
            <li class="c-list__download-report">
              <a class="c-link-list">
                <span class="icon-reports-sheet"></span>
              </a>
              <a class="c-link-list">
                <span class="icon-reports-csv"></span>
              </a>
              <span class="u-text u-text__body-alt u-text--bold">
                Detalle de los chat
              </span>
            </li>
            <li class="c-list__download-report">
              <a class="c-link-list">
                <span class="icon-reports-sheet"></span>
              </a>
              <a class="c-link-list">
                <span class="icon-reports-csv"></span>
              </a>
              <span class="u-text u-text__body-alt u-text--bold">
                Rendimiento agentes
              </span>
            </li>
          </ul>

          <p class="u-text__body-alt u-text--hint">
            * Si tienes más de 1.8MM de registros, soló pódras descargar los reportes en formato CSV
          </p>
        </div>
        
        <div class="c-header-option-card__actions">
          <a class="c-button c-button--secondary c-button-thin">
            Programar reporte
          </a>
          <a class="c-button c-button--secondary c-button-thin">
            Últimos reportes
          </a>
        </div>
      </div>
    </div>



    <a class="c-action-link">
      <span class="icon-language-es"></span>
    </a>

    <a class="c-action-link">
      <span class="icon-time-zone"></span>
    </a>

    <a class="c-action-link">
      <span class="icon-bell"></span>
      <span class="c-badge">10</span>
    </a>
    
    <a class="c-action-link u-hidden-desktop">
      <span class="icon-filters"></span>
    </a>
  </div>
</header>