Barmer Fractal

Search: Default 

<div class="m-breadcrumb breadcrumb--main">
    <span class="breadcrumb__label sr-only">Sie befinden sich hier:</span>
    <ul class="a-list-basic list--breadcrumb">
        <li class="list__item list__item--breadcrumb">
            <a href="/components/preview/homepage" class="a-link ">Barmer Startseite</a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

        </li>
        <li class="list__item list__item--breadcrumb">
            <a href="/components/preview/article" class="a-link "><span class="link__inner">Themen-Übersichtseite</span><i class="a-icon icon--lock" aria-label=""></i></a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

        </li>
        <li class="list__item list__item--breadcrumb">
            Barmer So ein Unterthema
        </li>
    </ul>

</div>

<div class="p-searchresults__header">
    <h1 class="sr-only">Suchergebnisse</h1>
    <div class="m-search-bar js-search-bar-init">
        <form action="/action/barmer-ueberuns/12368/search" method="get" data-suggestion-url="/mock/search-suggestion.json?query&#x3D;" data-min-length="3" class="search-bar__form">
            <div class="search-bar__input-container" role="combobox" aria-expanded="false" aria-owns="searchPageSuggestions" aria-haspopup="listbox">
                <label class="a-label " for="bm-search-query-page">
                    Suche nach:

                </label>

                <input type="text" value="Reisepass" class="a-input input--text" id="bm-search-query-page" name="query" placeholder="Suchbegriff, Login-Code" autocomplete="off" autofocus="true" minlength="2" required="required" data-no-result="Keine Ergebnisse gefunden" data-one-result="Ein Ergebnis gefunden" data-more-results="Ergebnisse gefunden" aria-controls="searchPageSuggestions" aria-autocomplete="list">
                <button class="a-btn btn--search-submit js-search-submit" type="submit" aria-label="Suchanfrage abschicken" disabled="disabled"><i class="a-icon icon--search" aria-hidden="true"></i></button>

                <button class="a-btn btn--search-close js-search-reset" type="button" aria-label="Eingabe löschen"><i class="a-icon icon--close" aria-hidden="true"></i></button>

            </div>
            <ul role="listbox" class="search-bar__suggestion-panel m-nav-list" id="searchPageSuggestions" hidden></ul>
        </form>

    </div>

    <section class="o-accordion js-accordion-init accordion--search-filter js-accordion--search-filter-init">

        <div class="m-accordion__panel js-accordion-panel accordion__panel--shadow">

            <button class="a-btn accordion__panel__toggle js-accordion-toggle" type="button" aria-expanded="true"><span class="accordion__panel__label">Suchergebnisse eingrenzen</span><i class="a-icon icon--arrow-downward" aria-hidden="true"></i></button>

            <div class="accordion__panel__body js-accordion-body">

                <div class="m-list ">

                    <ul class="a-list-basic list--filters">
                        <li class="list__item ">
                            <a class="a-filter filter--button " href="" title="" data-filter-id="1000">
                                <span class="filter__text">Unsere Leistungen (1)</span></a>

                        </li>
                        <li class="list__item ">
                            <a class="a-filter filter--button is-active" href="" title="" data-filter-id="1001">
                                <span class="sr-only">Zurzeit ausgewählt: </span>
                                <span class="filter__text">Gesundheit Verstehen (12)</span></a>

                        </li>
                        <li class="list__item ">
                            <a class="a-filter filter--button " href="" title="" data-filter-id="1002">
                                <span class="filter__text">Kursangebote (2)</span></a>

                        </li>
                        <li class="list__item ">
                            <a class="a-filter filter--button " href="" title="" data-filter-id="1003">
                                <span class="filter__text">Firmenangebote (13)</span></a>

                        </li>
                        <li class="list__item ">
                            <a class="a-filter filter--button " href="" title="" data-filter-id="1004">
                                <span class="filter__text">Forenbeiträge (13)</span></a>

                        </li>
                        <li class="list__item ">
                            <a class="a-filter filter--button " href="" title="" data-filter-id="1005">
                                <span class="filter__text">Über uns (5)</span></a>

                        </li>
                        <li class="list__item ">
                            <a class="a-filter filter--button " href="" title="" data-filter-id="1006">
                                <span class="filter__text">Meine Barmer (38)</span></a>

                        </li>
                    </ul>

                </div>

                <div class="m-list ">

                    <ul class="a-list-basic list--filters">
                        <li class="list__item ">
                            <a class="a-filter filter--checkbox" href="" title="" data-filter-id="1007" role="checkbox" aria-checked="false">
                                <span class="filter__checkbox" aria-hidden="true"></span>
                                <span class="filter__text">Webartikel</span></a>

                        </li>
                        <li class="list__item ">
                            <a class="a-filter filter--checkbox" href="" title="" data-filter-id="1008" role="checkbox" aria-checked="true">
                                <span class="filter__checkbox" aria-hidden="true"></span>
                                <span class="filter__text">Downloads</span></a>

                        </li>
                    </ul>

                </div>

                <a class="a-btn btn--clear-filter" href="" title="">
                    Auswahl aufheben<i class="a-icon icon--close" aria-hidden="true"></i>
                </a>

            </div>
        </div>

    </section>

    <div class="m-toggle-links ">
        <span class="label">Sortieren nach:</span>
        <a href="/components/preview/search-default?query&#x3D;Reisepass&amp;sort&#x3D;&amp;pageNum&#x3D;1" class="a-link is-selected">
            Relevanz
            <span class="sr-only">Relevanz zurzeit aktiv</span>
        </a>

        <span class="a-separator" aria-hidden="true">|</span>

        <a href="/components/preview/search-default?query&#x3D;Reisepass&amp;sort&#x3D;freshness&amp;pageNum&#x3D;1" class="a-link ">
            Aktualität
        </a>

    </div>

</div>

<div class="o-teaser-collection teaser-collection--searchresult">

    <div class="teaser-collection__teaser-wrapper">
        <div class="o-teaser teaser--searchresult">

            <a href="/components/preview/article" class="a-link teaser__headline-wrapper">
                <span class="teaser__image">
                    <i class="a-icon icon--website" aria-hidden="true"></i>
                </span>

                <h3 class="teaser__headline">
                    <span class="link__inner">Kleine Fremdkörper im Auge</span>&nbsp;<i class="a-icon icon--lock" aria-label="Geschützter Inhalt"></i>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                </h3>
            </a>

            <div class="teaser__content">

                <div class="teaser__text teaser__text--richtext">
                    Ob beim Radeln oder Renovieren – schnell fliegt einem etwas ins Auge. Wenn ein Fremdkörper hineingelangt, kann er die <b>Hornhaut</b> verletzen. Eine oberflächliche Verletzung heilt meist innerhalb weniger Stunden oder Tage ...
                </div>

                <div class="m-breadcrumb ">
                    <span class="breadcrumb__label ">Gefunden in:</span>
                    <ul class="a-list-basic list--breadcrumb">
                        <li class="list__item list__item--breadcrumb">
                            <a href="/components/preview/homepage" class="a-link ">Barmer Startseite</a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

                        </li>
                        <li class="list__item list__item--breadcrumb">
                            <a href="/components/preview/article" class="a-link ">Übersichtsseite eines Themas</a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

                        </li>
                        <li class="list__item list__item--breadcrumb">
                            <a href="/components/preview/article" class="a-link ">Barmer So ein Unterthema</a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

                        </li>
                    </ul>

                </div>

                <div class="m-timestamp "><span class="timestamp__label">Erstellt am:</span> <time class="a-datetime ">06.03.2020</time>
                </div>

            </div>

        </div>

        <div class="o-teaser teaser--searchresult">

            <a href="/components/preview/article" class="a-link teaser__headline-wrapper">
                <span class="teaser__image">
                    <i class="a-icon icon--download" aria-label="Dateiformat: PDF"></i>
                </span>

                <h3 class="teaser__headline">
                    <span class="link__inner">Barmer eCare: die elektronische Patientenakte (ePA) mit einer etwas längeren, umbrucherzwingenden Headline</span>&nbsp;<i class="a-icon icon--lock" aria-label="Geschützter Inhalt"></i>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                </h3>
            </a>

            <div class="teaser__content">

                <div class="teaser__text teaser__text--richtext">
                    Mit der elektronischen Patientenakte eCare haben wir eine digitale Plattform geschaffen. Auf der Testen wir auch Abkürzungen wie z.B. WHO um zu sehen, ob das ABBR-Tag ...
                </div>

                <div class="m-breadcrumb ">
                    <span class="breadcrumb__label ">Gefunden in:</span>
                    <ul class="a-list-basic list--breadcrumb">
                        <li class="list__item list__item--breadcrumb">
                            <a href="/components/preview/homepage" class="a-link ">Barmer Startseite</a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

                        </li>
                        <li class="list__item list__item--breadcrumb">
                            <a href="/components/preview/article" class="a-link "><span class="link__inner">Gesundheit verstehen</span><i class="a-icon icon--lock" aria-label=""></i></a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

                        </li>
                        <li class="list__item list__item--breadcrumb">
                            <a href="/components/preview/article" class="a-link ">Die Barmer packt alle wichtigen Themen, wie z.B. lange, mehrzeilig laufende Breadcrumbs, an</a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

                        </li>
                        <li class="list__item list__item--breadcrumb">
                            <a href="/components/preview/article" class="a-link ">Zukunftsplattformen</a><i class="a-icon icon--chevron-right" aria-hidden="true"></i>

                        </li>
                    </ul>

                </div>

                <div class="m-timestamp "><span class="timestamp__label">Erstellt am:</span> <time class="a-datetime ">06.03.2020</time>
                </div>

            </div>

        </div>

    </div>

</div>

<div class="p-searchresults__footer">
    <div class="m-pager js-pager-init">
        <form action="/components/preview/search" method="get">
            <input type="hidden" value="Reisepass" class="a-input input--hidden" name="query">
            <input type="hidden" value="" class="a-input input--hidden" name="sort">
            <input type="hidden" value="0" class="a-input input--hidden" name="pageNum">
            <ul class="pager__list">
                <li class="list__item">
                    <button class="a-btn btn--previous" type="button" title="Vorige Seite" disabled="disabled"><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>

                </li>
                <li class="list__item">
                    <label class="a-label " for="search-result-page">
                        Sprung zur Suchergebnisseite

                    </label>

                    <input type="text" value="1" class="a-input input--text js-pager-search-results-page" id="search-result-page" autocomplete="off" inputmode="numeric" required="required">
                    von <span class="js-pager-number-max">7</span>
                    <button class="a-btn is-hidden" type="submit">Zur eingegebenen Seite wechseln</button>

                </li>
                <li class="list__item">
                    <a class="a-btn btn--next" href="/components/preview/search?query&#x3D;Reisepass&amp;sort&#x3D;&amp;pageNum&#x3D;2" title="Nächste Seite">
                        <i class="a-icon icon--arrow-forward" aria-hidden="true"></i>
                    </a>

                </li>
            </ul>
        </form>
    </div>

</div>
 
{{ render '@breadcrumb--main' partials.breadcrumb merge=true }}

<div class="p-searchresults__header">
  <h1 class="sr-only">Suchergebnisse</h1>
  {{ render '@search-bar' partials.searchbar merge=true}}

  {{!-- @TODO: Add Filter at a later stage (milestone 2) --}}
  {{# switches.hasResults}}
    {{render '@accordion--search-filter' partials.filterAccordion merge=true}}
    {{render '@toggle-links' partials.toggleLinks merge=true }}
  {{/switches.hasResults}}
  {{^ switches.hasResults}}
    <h3 class="p-searchresults__info-text">Ihre Suche ergab keine Treffer</h3>
    <p class="p-searchresults__info-text">Meinen Sie vielleicht <a href="#">Donau Dampf Schifffahrt</a></p>
  {{/ switches.hasResults}}

  </div>

{{# switches.hasResults}}
  {{render '@teaser-collections--searchresult' }}
{{/switches.hasResults}}

{{^ switches.hasResults}}
  {{ render '@text-fragment' partials.textFragment merge=true }}

  {{!-- Accordion module will be implemented at a later stage (milestone 2) --}}
  {{ render '@accordion' partials.accordion merge=true }}
{{/ switches.hasResults}}


<div class="p-searchresults__footer">
  {{# switches.hasResults}}
    {{render '@pager' partials.pager merge=true}}
  {{/switches.hasResults}}
</div>
 
{
  "switches": {
    "hasContactFlyout": "true",
    "hasResults": true
  },
  "content": {
    "alertText": "Die Sitzung wurde erfolgreich verlängert"
  },
  "partials": {
    "sessionMetadata": {
      "content": {
        "expiredDialogId": "bm-dialog-session-expired",
        "expiringDialogId": "bm-dialog-session-expiring"
      }
    },
    "expiring": {
      "switches": {
        "hidden": true,
        "secondaryButton": true
      },
      "content": {
        "id": "bm-dialog-session-expiring",
        "text": "In <span class=\"js-session-timer\">5</span> Minuten endet ihre Sitzung und Sie werden automatisch ausgeloggt."
      },
      "partials": {
        "primaryButton": {
          "content": {
            "label": "Login verlängern"
          }
        },
        "secondaryButton": {
          "content": {
            "label": "Logout"
          }
        }
      }
    },
    "expired": {
      "switches": {
        "hidden": true
      },
      "content": {
        "id": "bm-dialog-session-expired"
      }
    },
    "modalVideo": {
      "switches": {
        "hidden": true
      },
      "content": {
        "id": "bm-video"
      },
      "viewtypes": {
        "specifier": "modal--video"
      },
      "partials": {
        "consent": {
          "viewtypes": {
            "specifier": "consent--in-modal"
          }
        },
        "videoFigure": {
          "switches": {
            "hasHeadline": false,
            "hasFigcaption": false,
            "hasVideo": false
          }
        }
      }
    },
    "searchbar": {
      "switches": {},
      "viewtypes": {},
      "content": {
        "panelId": "searchPageSuggestions"
      },
      "partials": {
        "label": {
          "switches": {},
          "viewtypes": {},
          "content": {
            "text": "Suche nach:",
            "for": "bm-search-query-page"
          },
          "partials": {}
        },
        "input": {
          "switches": {
            "isRequired": true
          },
          "viewtypes": {},
          "content": {
            "id": "bm-search-query-page",
            "name": "query",
            "placeholder": "Suchbegriff, Login-Code",
            "autocomplete": "off",
            "minlength": "2",
            "value": "Reisepass",
            "autofocus": "true",
            "ariaControls": "searchPageSuggestions"
          }
        },
        "btnClose": {
          "switches": {},
          "viewtypes": {
            "specifier": "btn--search-close js-search-reset"
          },
          "content": {
            "ariaLabel": "Eingabe löschen"
          },
          "partials": {}
        }
      }
    },
    "toggleLinks": {
      "switches": {
        "hasLabel": true
      },
      "viewtypes": {
        "specifier": ""
      },
      "content": {
        "label": "Sortieren nach:"
      },
      "partials": {
        "links": [
          {
            "switches": {
              "hasIcon": false,
              "hasAriaExpanded": false,
              "hasAriaPopup": false,
              "isActiveLink": true
            },
            "viewtypes": {
              "specifier": "is-selected"
            },
            "content": {
              "url": "/components/preview/search-default?query=Reisepass&sort=&pageNum=1",
              "text": "Relevanz",
              "activetext": "Relevanz zurzeit aktiv"
            },
            "partials": {}
          },
          {
            "switches": {
              "hasIcon": false,
              "hasAriaExpanded": false,
              "hasAriaPopup": false,
              "isActiveLink": false
            },
            "viewtypes": {},
            "content": {
              "url": "/components/preview/search-default?query=Reisepass&sort=freshness&pageNum=1",
              "text": "Aktualität"
            },
            "partials": {}
          }
        ]
      }
    }
  },
  "viewtypes": {}
}

No notes defined.