TheaterMania Component Library

Search 

<div class="search-block">
    <form class="search-block-form">
        <label for="search" class="label visually-hidden">Search</label>
        <input class="input search-block-form__input js-input-search" name="search" id="search" type="search" placeholder="Search city, actor or keyword..." />
        <svg class="icon icon--search">
  <use xlink:href="/assets/icons/sprite-sheet.svg#search"></use>
</svg>
    </form>
</div>
 
<div class="search-block">
  <form class="search-block-form">
    <label for="{{label}}" class="label{{#if hidden}} visually-hidden{{/if}}">{{title}}</label>
    <input class="input search-block-form__input js-input-search" name="{{label}}" id="{{label}}" type="search" placeholder="{{placeholder}}" />
    {{render '@icons--search'}}
  </form>
</div>
 
{
  "title": "Search",
  "label": "search",
  "placeholder": "Search city, actor or keyword...",
  "hidden": true
}
  • Content: 
    .search-block-form {
  position: relative;
}

.icon--search {
  .search-block-form & {
    position: absolute;
    right: 0.75rem;
    bottom: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    stroke: $color-gray-light;
    stroke-width: 4;
  }
}
  • URL: /components/raw/search/Search.scss
  • Filesystem Path: src/components/01-Units/Search/Search.scss
  • Size: 248 Bytes

There are no notes for this item.