UCI
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="header-search">
    <div class="row">
        <div class="col-xs-10 col-ms-10 col-sm-4 col-lg-4 col col-xs-mr-ml col-ms-mr-ml col-sm-mr-ml  col-lg-mr-ml">
            <div class="search-engine col-xs-10 col-ms-10 col-sm-4 col-lg-4 col"><!-- ==== La clase fractal es para la previsualización en Fractal. NO INTEGRAR ==== -->
                <div class="fieldset  ">
                    <label class="label " for="webSearch"></label>
                    <input class="input  
                                    input-distinguisher_
                            " id="webSearch" type="search" name="" title="Search" autocomplete="off" placeholder="Buscar" />
                </div>

                <div class="search-engine__icon">
                    <svg class="icon icon-search     ">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#search"></use>
                    </svg>

                </div>
                <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
                    <div class="search-engine__dropdown">
                        <p>Sugerencias</p>
                        <ul>
                            <li>dhsldhsadasldjas</li>
                            <li>dhsldhsadasldjas</li>
                            <li>dhsldhsadasldjas</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{#if isFractal}}<div class="fractal" style="min-height:400px;">{{/if}}
    <!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
    <div {{#if hasID}}id="{{idComponent}}" {{/if}} class="header-search">
        <div class="row">
            <div class="col-xs-10 col-ms-10 col-sm-4 col-lg-4 col col-xs-mr-ml col-ms-mr-ml col-sm-mr-ml  col-lg-mr-ml">
                {{> @search-engine search-engine}}
            </div>
        </div>
    </div>
    {{#if isFractal}}
</div>{{/if}}
{
  "hasID": false,
  "search-engine": {
    "fieldset": {
      "label": {
        "for": "webSearch",
        "text": ""
      },
      "input": {
        "id": "webSearch",
        "type": "search",
        "title": "Search",
        "placeholder": "Buscar",
        "autocomplete": "off"
      }
    }
  }
}
  • Content:
    .header-search {
        background-color: var(--color-accent);
        position: relative;
        height: 100px;
    }
  • URL: /components/raw/header-search/header-search.css
  • Filesystem Path: src/03-organisms/header-search/header-search.css
  • Size: 104 Bytes

***** Se añade una variante fractal que no se debe integrar, para visualizar el header en fractal ****