Example
Markup: components/search/search.twig
<div class="views-exposed-form contextual-region block search-block show" data-drupal-selector="views-exposed-form-search-page-1" id="block-exposedformsearchpage-1">
  <div data-contextual-id="block:block=exposedformsearchpage_1:langcode=en|entity.view.edit_form:view=search:location=exposed_filter&amp;name=search&amp;display_id=page_1&amp;langcode=en" class="contextual" role="form">
    <button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open  configuration options</button>
    <ul class="contextual-links" hidden="">
      <li class="block-configure"><a href="/web/admin/structure/block/manage/exposedformsearchpage_1?destination=test/esu">Configure block</a></li>
      <li class="entityviewedit-form"><a href="/web/admin/structure/views/view/search/edit/page_1?destination=test/esu">Edit view</a></li>
    </ul>
  </div>

  <div class="search-block__wrapper">
    <div class="search-block__form">
      <form action="/web/search" method="get" id="views-exposed-form-search-page-1" accept-charset="UTF-8" data-drupal-form-fields="edit-text">
        <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-text form-item-text">
          <label for="edit-text">Search</label>
          <input data-drupal-selector="edit-text" type="text" id="edit-text" name="text" value="" size="30" maxlength="128" class="form-text">
        </div>
        <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-drupal-selector="edit-submit-search" type="submit" id="edit-submit-search" value="Apply" class="button js-form-submit form-submit"></div>
      </form>
    </div>
  </div>
  <a role="button" class="close-button" href="#">
    <svg class="icon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close-cross"></use>
    </svg>
  </a>
</div>
Source: base-styleguide.scss, line 252