8.30 School Staff Work View in a new window

Example
Markup
{% include '@uts_theme/containers/header/header.twig' %}

<div class="breadcrumbs__wrapper">
  {% include '@uts_theme/components/breadcrumbs/breadcrumbs.twig' with {
    breadcrumb: [
      {
        url: "#",
        text: "UTS"
      },
      {
        url: "#",
        text: "About UTS"
      },
      {
        url: "item-8-29.html?hideAll",
        text: "Faculty of Design, Architecture and Building"
      },
      {
        text: "Staff work"
      }
    ]
  } only %}
</div>

{% embed '@uts_theme/containers/one-col/one-col.twig' %}
  {% block content %}
    <div class="gallery-templates">
      <h1>Staff work</h1>
      <div id="block-gallerysubheading" class="block block-ctools-block block-entity-fieldnodefield-gallery-subheading">
        <div class="field field-field-gallery-subheading field-type-string field-label-hidden">
          <div class="field-item">
            <h2>Lorem ipsum</h2>
          </div>
        </div>
      </div>
      <form action="#" class="grid js-collapsible collapsible collapsible--minimal">
        <div class="grid__row gallery-templates__search">
          <div class="grid__col grid__col--align-right">
            <fieldset>
              <legend class="visually-hidden">Search</legend>
              <div class="fieldset__horizontal">
                <div class="js-form-item form-item js-form-type-search-api-autocomplete form-item-name js-form-item-name form-no-label">
                  <label for="edit-name" class="visually-hidden">Name</label>
                  <input placeholder="Enter staff name" data-drupal-selector="edit-name" data-search-api-autocomplete-search="gallery_listing" class="form-autocomplete form-text ui-autocomplete-input" data-autocomplete-path="/search_api_autocomplete/gallery_listing?field=uts_gallery_persons&amp;display=gallery_block&amp;arguments%5B0%5D=staff&amp;arguments%5B1%5D=282%2C283&amp;arguments%5B2%5D=449%2C450" type="text" id="edit-name" name="name" value="" size="30" maxlength="128" autocomplete="off">
                </div>
                <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
                  <input data-drupal-selector="edit-submit-gallery-listing" type="submit" id="edit-submit-gallery-listing" value="Search" class="button js-form-submit form-submit">
                </div>
              </div>
            </fieldset>
            <button class="button button--white collapsible__title">Filters</button>
          </div>
        </div>
        <div class="grid__row gallery-templates__filters collapsible__content collapsible__content--small--screen-only">
          <div class="grid__col one-third">
            <label for="gallery-school" class="visually-hidden">School</label>
            {% include '@uts_theme/components/select-list/select-list.twig' with {
            name: 'All Schools',
            id: 'gallery-school',
            options: [
              { value: 'All Schools' },
              { value: 'School of Architecture', disabled: true },
              { value: 'School of the Built Environment' },
            ]
            } %}
          </div>
          <div class="grid__col one-third">
            <label for="gallery-program" class="visually-hidden">Program</label>
            {% include '@uts_theme/components/select-list/select-list.twig' with {
            name: 'All Programs',
            id: 'gallery-program',
            options: [
              { value: 'All Programs' },
              { value: 'Lorem ipsum dolor sit amet' },
              { value: 'Consectetur adipiscing elit' },
              { value: 'Suspendisse sei amet urna' },
            ]
            } %}
          </div>
          <div class="grid__col one-third">
            <label for="gallery-theme" class="visually-hidden">Theme</label>
            {% include '@uts_theme/components/select-list/select-list.twig' with {
            name: 'All Programs',
            id: 'gallery-theme',
            options: [
              { value: 'All Themes' },
              { value: 'Cursus ligula fusce eget' },
              { value: 'Elementum ex iaculis' },
            ]
            } %}
          </div>
        </div>
      </form>
      {% include '@uts_theme/components/masonry-grid/masonry-grid.twig' %}
    </div>
  {% endblock %}
{% endembed %}

{% include '@uts_theme/containers/footer/footer.twig' %}