<div class="search-field">
    <div class="search-field__inner">
        <div class="search-field__headline">
            <h2 class="headline headline--display-2">Was suchen Sie?
            </h2>
        </div>
        <div class="search-field__form">
            <form class="form-micro">
                <div class="form-micro-group">
                    <input class="input input--text" type="text" placeholder="Ihr Suchbegriff" id="input-e678" name="input-e678" />
                    <button class="button button--blue button--icon" id="button-dcf5" type="submit">
<svg class="icon button__icon icon--search" id="icon-1a5c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-search"></use>
</svg>
</button>
                </div>
            </form>
        </div>
        <div class="search-field__links-wrap">
            <div class="search-field__label">
                <label class="label" for="dummy-id">Beliebt:</label>
            </div>
            <div class="search-field__links">
                <a class="button button--blue" id="button-bf33" href="#">Corona
</a>
                <a class="button button--blue" id="button-3da9" href="#">Zahnersatz
</a>
                <a class="button button--blue" id="button-8b97" href="#">Bonusprogramm
</a>
            </div>
        </div>
    </div>
</div>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Wrap
.search-field&attributes(attr): .search-field__inner
  if headline
    .search-field__headline
      != include('@headline', headline)

  if form
    .search-field__form
      != include('@form-micro', form)

  if label || links
    .search-field__links-wrap
      if label
        .search-field__label
          != include('@label', label)

      if links
        .search-field__links
          each link in links
            != include('@button', link)
{
  "headline": {
    "level": 2,
    "modifier": "display-2",
    "text": "Was suchen Sie?"
  },
  "form": {
    "id": "form-search",
    "group": [
      {
        "use": "input--text",
        "settings": {
          "placeholder": "Ihr Suchbegriff"
        }
      },
      {
        "use": "button--blue-icon",
        "settings": {
          "link": null,
          "submit": true,
          "icon": "search"
        }
      }
    ]
  },
  "label": {
    "label": "Beliebt:"
  },
  "links": [
    {
      "link": "#",
      "text": "Corona",
      "modifier": "blue"
    },
    {
      "link": "#",
      "text": "Zahnersatz",
      "modifier": "blue"
    },
    {
      "link": "#",
      "text": "Bonusprogramm",
      "modifier": "blue"
    }
  ]
}
  • Content:
    .search-field__headline {
      margin-bottom: 3rem;
    
      .headline {
        margin-bottom: 0;
      }
    }
    
    .search-field__inner {
      margin: 0 auto;
      max-width: 85rem;
      text-align: center;
      width: 100%;
    }
    
    .search-field__form {
      width: 100%;
    
      .form-micro-group {
        position: relative;
      }
    
      .form-micro .input {
        background-color: $color-steelgrey-light;
        border-radius: 0.3rem;
        font-size: 1.9rem;
        height: 6rem;
        padding-left: 2.5rem;
        padding-right: 6rem;
      }
    
      .form-micro .button {
        align-items: center;
        background-color: transparent;
        color: $color-blue;
        display: inline-flex;
        font-size: 2.7rem;
        height: 6rem;
        justify-content: center;
        padding: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 6rem;
      }
    
      .form-micro .button:focus,
      .form-micro .button:hover {
        background-color: $color-blue;
        color: #fff;
      }
    }
    
    .search-field__label {
      .label {
        margin-top: 0.5rem;
    
        @include mq($from: m) {
          margin-top: 0;
        }
      }
    }
    
    .search-field__links-wrap,
    .search-field__links {
      @include mq($from: m) {
        align-items: center;
        display: inline-flex;
        justify-content: center;
      }
    }
    
    .search-field__links-wrap {
      margin-top: 2rem;
      text-align: center;
    }
    
    .search-field__links {
      flex-wrap: wrap;
      margin-left: 1rem;
    
      .button {
        margin: 0 1rem 1rem 0;
        padding: calc(2rem / 2 - 2px) calc(1.5rem - 2px);
      }
    }
    
    .overview-page__search-field {
      padding: 5rem 2rem;
    
      @include mq($from: m) {
        padding-left: 0;
        padding-right: 0;
      }
    
      @include mq($from: l) {
        padding-bottom: 5rem;
        padding-top: 5rem;
      }
    
      @include mq($from: xl) {
        padding-bottom: 7rem;
        padding-top: 7rem;
      }
    }
    
  • URL: /components/raw/search-field/search-field.scss
  • Filesystem Path: src/components/organisms/search-field/search-field.scss
  • Size: 1.7 KB

There are no notes for this item.