HTML-Prototype von TUM Campus Heilbronn

<!-- Grid/ Element container-->
<div class="frame frame-type-container" id="c442001">
  <div class="c-solr-list c-news-solr-list">
    <div class="c-solr-list__toolbar">
      <div class="c-solr-list__search">
        <form action="#">
          <div class="c-solr-list__search-field">
            <label class="u-visually-hidden" for="solr-demo-q">Search news</label>
            <input class="c-solr-list__search-input" id="solr-demo-q" type="text" name="q" placeholder="Search"/>
          </div>
          <button class="c-solr-list__filter-toggle btn" type="button" aria-expanded="false" aria-controls="solr-demo-panel">Filter</button>
          <div class="c-solr-list__filter-panel" id="solr-demo-panel" hidden="hidden">
            <div class="c-solr-list__filters">
              <div class="c-solr-list__filter" data-facet-name="topic"><span class="c-solr-list__filter-label" id="solr-demo-label-topic">Topic</span>
                <ul class="c-solr-list__filter-options" aria-labelledby="solr-demo-label-topic">
                  <li class="c-solr-list__filter-option">
                    <input class="c-solr-list__filter-input" id="solr-demo-topic-all" type="checkbox" checked="checked"/>
                    <label class="c-solr-list__filter-pill" for="solr-demo-topic-all">All</label>
                  </li>
                  <li class="c-solr-list__filter-option">
                    <input class="c-solr-list__filter-input" id="solr-demo-topic-1" type="checkbox"/>
                    <label class="c-solr-list__filter-pill" for="solr-demo-topic-1">
                      Achievements<span class="u-visually-hidden">(3)</span></label>
                  </li>
                  <li class="c-solr-list__filter-option">
                    <input class="c-solr-list__filter-input" id="solr-demo-topic-2" type="checkbox"/>
                    <label class="c-solr-list__filter-pill" for="solr-demo-topic-2">
                      Awards<span class="u-visually-hidden">(1)</span></label>
                  </li>
                  <li class="c-solr-list__filter-option">
                    <input class="c-solr-list__filter-input" id="solr-demo-topic-3" type="checkbox"/>
                    <label class="c-solr-list__filter-pill" for="solr-demo-topic-3">
                      Business &amp; Career<span class="u-visually-hidden">(2)</span></label>
                  </li>
                  <li class="c-solr-list__filter-option">
                    <input class="c-solr-list__filter-input" id="solr-demo-topic-4" type="checkbox"/>
                    <label class="c-solr-list__filter-pill" for="solr-demo-topic-4">
                      Campus Events<span class="u-visually-hidden">(1)</span></label>
                  </li>
                </ul>
              </div>
              <div class="c-solr-list__filter" data-facet-name="format"><span class="c-solr-list__filter-label" id="solr-demo-label-format">Format</span>
                <ul class="c-solr-list__filter-options" aria-labelledby="solr-demo-label-format">
                  <li class="c-solr-list__filter-option">
                    <input class="c-solr-list__filter-input" id="solr-demo-format-all" type="checkbox" checked="checked"/>
                    <label class="c-solr-list__filter-pill" for="solr-demo-format-all">All</label>
                  </li>
                  <li class="c-solr-list__filter-option">
                    <input class="c-solr-list__filter-input" id="solr-demo-format-1" type="checkbox"/>
                    <label class="c-solr-list__filter-pill" for="solr-demo-format-1">
                      Campus<span class="u-visually-hidden">(1)</span></label>
                  </li>
                  <li class="c-solr-list__filter-option">
                    <input class="c-solr-list__filter-input" id="solr-demo-format-2" type="checkbox"/>
                    <label class="c-solr-list__filter-pill" for="solr-demo-format-2">
                      Teaching<span class="u-visually-hidden">(1)</span></label>
                  </li>
                </ul>
              </div>
              <div class="c-solr-list__filter" data-facet-name="date"><span class="c-solr-list__filter-label" id="solr-demo-label-date">Date</span>
                <ul class="c-solr-list__filter-options" aria-labelledby="solr-demo-label-date" role="radiogroup">
                  <li class="c-solr-list__filter-option">
                    <input class="c-solr-list__filter-input" id="solr-demo-date-all" type="radio" name="solr-demo-date" checked="checked"/>
                    <label class="c-solr-list__filter-pill" for="solr-demo-date-all">All</label>
                  </li>
                  <li class="c-solr-list__filter-option">
                    <input class="c-solr-list__filter-input" id="solr-demo-date-1" type="radio" name="solr-demo-date"/>
                    <label class="c-solr-list__filter-pill" for="solr-demo-date-1">
                      Last 30 days<span class="u-visually-hidden">(6)</span></label>
                  </li>
                  <li class="c-solr-list__filter-option">
                    <input class="c-solr-list__filter-input" id="solr-demo-date-2" type="radio" name="solr-demo-date"/>
                    <label class="c-solr-list__filter-pill" for="solr-demo-date-2">
                      2026<span class="u-visually-hidden">(32)</span></label>
                  </li>
                </ul>
              </div>
            </div>
            <p class="c-solr-list__filters-reset"><a href="#">Reset</a></p>
          </div>
          <button class="c-solr-list__search-submit btn btn--primary" type="submit">Find news</button>
        </form>
      </div>
    </div>
  </div>
</div>