Search Template

In Development

HTML
View
Context
Assets
Info
Notes


        
        <div class="search-template">
    <div class="search-template__inner">
        <div class="search-template__header">
            <h2 class="headline headline--module-2">Mobilitätsprogramm-suche</h2>
            <div class="search-template__text">In venenatis bibendum blandit neque. Vulputate nunc neque neque sed diam sed urna.</div>
        </div>
        <div class="search-template__selectfields">
            <div class="search-template__selectfields-item">
                <div class="search-template__selectfields-text">Wohin solls gehen?</div>
                <div class="ts-select"><select class="ts-select__wrapper" autocomplete="off">
                        <option value="lorem">Lorem ipsum dolor sit amet sit amet</option>
                        <option value="lorem 2">Lorem ipsum 2</option>
                        <option value="lorem 3">Lorem ipsum 3</option>
                    </select></div>
            </div>
            <div class="search-template__selectfields-item">
                <div class="search-template__selectfields-text">Forschungsschwerpunkte und Themen</div>
                <div class="ts-select"><select class="ts-select__wrapper" autocomplete="off">
                        <option value="lorem">Lorem ipsum dolor sit amet sit amet</option>
                        <option value="lorem 2">Lorem ipsum 2</option>
                        <option value="lorem 3">Lorem ipsum 3</option>
                    </select></div>
            </div>
        </div>
        <div class="search-template__buttons"><a class="button button--tertiary" href="#"><span class="button__inner"><span class="button__text">Filter Zurücksetzen</span><svg class="icon icon--reset" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-reset"></use>
                    </svg></span></a></div>
        <div class="search-template__results">
            <h3 class="headline headline--module-3">Ergebnisse</h3>
            <div class="search-template__results-items"><a class="microcard" href="#">
                    <div class="microcard__inner">
                        <div class="microcard__image"><img class="microcard__image__img" src="/images/content/contacts.jpg" width="400" height="400" alt="Alternativ-Text" /></div>
                        <div class="microcard__bottom">
                            <div class="microcard__headline">
                                <h3 class="headline headline--3">Deutscher Akademischer Austauschdienst</h3>
                            </div>
                            <div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                        <use xlink:href="#icon-arrow-right"></use>
                                    </svg></span></div>
                        </div>
                    </div>
                </a><a class="microcard" href="#">
                    <div class="microcard__inner">
                        <div class="microcard__image"><img class="microcard__image__img" src="/images/content/contacts.jpg" width="400" height="400" alt="Alternativ-Text" /></div>
                        <div class="microcard__bottom">
                            <div class="microcard__headline">
                                <h3 class="headline headline--3">Deutscher Akademischer Austauschdienst</h3>
                            </div>
                            <div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                        <use xlink:href="#icon-arrow-right"></use>
                                    </svg></span></div>
                        </div>
                    </div>
                </a><a class="microcard" href="#">
                    <div class="microcard__inner">
                        <div class="microcard__image"><img class="microcard__image__img" src="/images/content/contacts.jpg" width="400" height="400" alt="Alternativ-Text" /></div>
                        <div class="microcard__bottom">
                            <div class="microcard__headline">
                                <h3 class="headline headline--3">Deutscher Akademischer Austauschdienst</h3>
                            </div>
                            <div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                        <use xlink:href="#icon-arrow-right"></use>
                                    </svg></span></div>
                        </div>
                    </div>
                </a><a class="microcard" href="#">
                    <div class="microcard__inner">
                        <div class="microcard__image"><img class="microcard__image__img" src="/images/content/contacts.jpg" width="400" height="400" alt="Alternativ-Text" /></div>
                        <div class="microcard__bottom">
                            <div class="microcard__headline">
                                <h3 class="headline headline--3">Deutscher Akademischer Austauschdienst</h3>
                            </div>
                            <div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                        <use xlink:href="#icon-arrow-right"></use>
                                    </svg></span></div>
                        </div>
                    </div>
                </a><a class="microcard" href="#">
                    <div class="microcard__inner">
                        <div class="microcard__image"><img class="microcard__image__img" src="/images/content/contacts.jpg" width="400" height="400" alt="Alternativ-Text" /></div>
                        <div class="microcard__bottom">
                            <div class="microcard__headline">
                                <h3 class="headline headline--3">Deutscher Akademischer Austauschdienst</h3>
                            </div>
                            <div class="microcard__icons"><span class="microcard__icons__item"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                        <use xlink:href="#icon-arrow-right"></use>
                                    </svg></span></div>
                        </div>
                    </div>
                </a></div>
        </div>
    </div>
</div>


        .search-template()&attributes(attr)
  .search-template__inner
    .search-template__header
      +include('@headline--module-2', {
            text: title,
          })
      .search-template__text #{text}
    .search-template__selectfields
      each item in items
        .search-template__selectfields-item
          .search-template__selectfields-text #{item.text}
          +include(`@${item.use}`, item.settings || {})
    .search-template__buttons
      +include('@button--tertiary-icon', button)
    .search-template__results
      +include('@headline--module-3', {
        text: result.text,
      })
      .search-template__results-items
        each microcard in microcards
          +include(`@${microcard.use}`, microcard.settings || {})


        
            
            {
  "title": "Mobilitätsprogramm-suche",
  "text": "In venenatis bibendum blandit neque. Vulputate nunc neque neque sed diam sed urna."
}

File:

Content:


                                .search-template {
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
  background-color: $color-gray-xxlight;
  padding-top: 2rem;
  padding-bottom: 1rem;


  @include mq($from: m) {
    padding: 0 3rem;
    padding-top: 4rem;
    padding-bottom: 2rem;
  }

  @include mq($from: xl) {
    padding: 0 9rem;
    padding-top: 8rem;
    padding-bottom: 6rem;
  }
}

.search-template__inner {
  margin: 0 auto;
  max-width: 61rem;

  @include mq($from: l) {
    max-width: 127rem;
  }
}

.search-template__text {
  padding-top: 2rem;
}

.search-template__selectfields {
  padding-top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;

  .ts-select {
    padding-top: 2rem;
  }
}

.search-template__buttons {
  display: flex;
  justify-content: flex-end;
  padding-top: 6rem;
}

.search-template__results {
  padding-top: 14rem;
}

.search-template__results-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6rem;
  padding-top: 6rem;

  @include mq($from: m) {
    grid-template-columns: 1fr 1fr;
  }

  @include mq($from: l) {
    grid-template-columns: 1fr 1fr 1fr;
  }

  @include mq($from: header) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .microcard {
    width: 100%;
  }
}

URL: /components/raw/search-template/search-template.scss
Filesystem Path: src/components/organisms/search-template/search-template.scss
Size: 1.2 KB

Handle: @search-template
Preview:
- With layout
- Component only
Filesystem Path: src/components/organisms/search-template/search-template.pug
References (3): @headline--module-2, @button--tertiary-icon, @headline--module-3

There are no notes for this item.