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&name=search&display_id=page_1&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