Search API page

Added themable markup to the Search API page.

Sass:

@import "sass-essentials";

.search-api-page {
  &__title {}
  &__number-of-results {}
  &__no-results-found {}
  &__form {}
  &__results {}
  &__pager {}
}

Twig:

{% set component = 'search-api-page' %}

{{ attach_library('compony/' ~ component) }}

<section class="{{ component }}">
  <div class="container">
    <div class="{{ component }}__form">
      {{ form }}
    </div>
    {% if search_title %}
      <h1 class="{{ component }}__title">{{ search_title }}</h1>
    {% endif %}
    {% if no_of_results %}
      <p class="{{ component }}__number-of-results">{{ no_of_results }}</p>
    {% endif %}
    {% if no_results_found %}
      <p class="{{ component }}__no-results-found">{{ no_results_found }}</p>
    {% endif %}
    {{ search_help }}
  </div>
  <div class="{{ component }}__results container">
    {{ results }}
  </div>
  <div class="{{ component }}__pager container">
    {{ pager }}
  </div>
</section>

Specifications

Machine name

search-api-page

Perks

Using Sass
Responsive
Accessible

Building blocks

HTML
CSS

Stats

Public component
2 downloads
No open issue

Contributors