HTML-Prototype von DZNE

<div class="c-research-area-overview">
  <h2 class="c-research-area-overview__title">Forschungsbereiche</h2>
  <nav>
    <ul class="c-research-area-overview__section-list o-list-bare">
      <li class="c-research-area-overview__section-list-item"><a class="c-research-area-overview__section-list-item-link" href="#">Grundlagenforschung</a></li>
      <li class="c-research-area-overview__section-list-item"><a class="c-research-area-overview__section-list-item-link" href="#">Systemmedizin</a></li>
      <li class="c-research-area-overview__section-list-item"><a class="c-research-area-overview__section-list-item-link" href="#">Versorungsforschung</a></li>
      <li class="c-research-area-overview__section-list-item"><a class="c-research-area-overview__section-list-item-link" href="#">Populationsforschung</a></li>
      <li class="c-research-area-overview__section-list-item"><a class="c-research-area-overview__section-list-item-link" href="#">Klinische Forschung</a></li>
    </ul>
  </nav>
  <nav>
    <ul class="c-research-area-overview__tag-list o-list-bare">
      <li class="c-research-area-overview__tag-list-item"><a class="c-research-area-overview__tag-list-item-link" href="#"><svg class="c-research-area-overview__tag-list-item-icon" xmlns="http://www.w3.org/2000/svg" width="18.002" height="18">
<path fill="currentColor" d="M7.583.019a.962.962 0 0 1 .755 1.133l-.6 3.026H12.2l.679-3.4a.963.963 0 1 1 1.889.378l-.6 3.026h2.873a.964.964 0 1 1 0 1.929h-3.262l-1.157 5.786h3.13a.964.964 0 1 1 0 1.929h-3.516l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H5.807l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H.964a.964.964 0 1 1 0-1.929h3.259L5.38 6.103H2.25a.964.964 0 1 1 0-1.929h3.516l.679-3.4A.962.962 0 0 1 7.578.019ZM7.35 6.107l-1.158 5.786h4.46l1.157-5.786Z"/>
</svg>Alzheimer</a></li>
      <li class="c-research-area-overview__tag-list-item"><a class="c-research-area-overview__tag-list-item-link" href="#"><svg class="c-research-area-overview__tag-list-item-icon" xmlns="http://www.w3.org/2000/svg" width="18.002" height="18">
<path fill="currentColor" d="M7.583.019a.962.962 0 0 1 .755 1.133l-.6 3.026H12.2l.679-3.4a.963.963 0 1 1 1.889.378l-.6 3.026h2.873a.964.964 0 1 1 0 1.929h-3.262l-1.157 5.786h3.13a.964.964 0 1 1 0 1.929h-3.516l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H5.807l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H.964a.964.964 0 1 1 0-1.929h3.259L5.38 6.103H2.25a.964.964 0 1 1 0-1.929h3.516l.679-3.4A.962.962 0 0 1 7.578.019ZM7.35 6.107l-1.158 5.786h4.46l1.157-5.786Z"/>
</svg>Kindermedizin</a></li>
      <li class="c-research-area-overview__tag-list-item"><a class="c-research-area-overview__tag-list-item-link" href="#"><svg class="c-research-area-overview__tag-list-item-icon" xmlns="http://www.w3.org/2000/svg" width="18.002" height="18">
<path fill="currentColor" d="M7.583.019a.962.962 0 0 1 .755 1.133l-.6 3.026H12.2l.679-3.4a.963.963 0 1 1 1.889.378l-.6 3.026h2.873a.964.964 0 1 1 0 1.929h-3.262l-1.157 5.786h3.13a.964.964 0 1 1 0 1.929h-3.516l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H5.807l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H.964a.964.964 0 1 1 0-1.929h3.259L5.38 6.103H2.25a.964.964 0 1 1 0-1.929h3.516l.679-3.4A.962.962 0 0 1 7.578.019ZM7.35 6.107l-1.158 5.786h4.46l1.157-5.786Z"/>
</svg>Ataxien</a></li>
      <li class="c-research-area-overview__tag-list-item"><a class="c-research-area-overview__tag-list-item-link" href="#"><svg class="c-research-area-overview__tag-list-item-icon" xmlns="http://www.w3.org/2000/svg" width="18.002" height="18">
<path fill="currentColor" d="M7.583.019a.962.962 0 0 1 .755 1.133l-.6 3.026H12.2l.679-3.4a.963.963 0 1 1 1.889.378l-.6 3.026h2.873a.964.964 0 1 1 0 1.929h-3.262l-1.157 5.786h3.13a.964.964 0 1 1 0 1.929h-3.516l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H5.807l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H.964a.964.964 0 1 1 0-1.929h3.259L5.38 6.103H2.25a.964.964 0 1 1 0-1.929h3.516l.679-3.4A.962.962 0 0 1 7.578.019ZM7.35 6.107l-1.158 5.786h4.46l1.157-5.786Z"/>
</svg>LBD</a></li>
      <li class="c-research-area-overview__tag-list-item"><a class="c-research-area-overview__tag-list-item-link" href="#"><svg class="c-research-area-overview__tag-list-item-icon" xmlns="http://www.w3.org/2000/svg" width="18.002" height="18">
<path fill="currentColor" d="M7.583.019a.962.962 0 0 1 .755 1.133l-.6 3.026H12.2l.679-3.4a.963.963 0 1 1 1.889.378l-.6 3.026h2.873a.964.964 0 1 1 0 1.929h-3.262l-1.157 5.786h3.13a.964.964 0 1 1 0 1.929h-3.516l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H5.807l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H.964a.964.964 0 1 1 0-1.929h3.259L5.38 6.103H2.25a.964.964 0 1 1 0-1.929h3.516l.679-3.4A.962.962 0 0 1 7.578.019ZM7.35 6.107l-1.158 5.786h4.46l1.157-5.786Z"/>
</svg>Huntington</a></li>
      <li class="c-research-area-overview__tag-list-item"><a class="c-research-area-overview__tag-list-item-link" href="#"><svg class="c-research-area-overview__tag-list-item-icon" xmlns="http://www.w3.org/2000/svg" width="18.002" height="18">
<path fill="currentColor" d="M7.583.019a.962.962 0 0 1 .755 1.133l-.6 3.026H12.2l.679-3.4a.963.963 0 1 1 1.889.378l-.6 3.026h2.873a.964.964 0 1 1 0 1.929h-3.262l-1.157 5.786h3.13a.964.964 0 1 1 0 1.929h-3.516l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H5.807l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H.964a.964.964 0 1 1 0-1.929h3.259L5.38 6.103H2.25a.964.964 0 1 1 0-1.929h3.516l.679-3.4A.962.962 0 0 1 7.578.019ZM7.35 6.107l-1.158 5.786h4.46l1.157-5.786Z"/>
</svg>FTD</a></li>
      <li class="c-research-area-overview__tag-list-item"><a class="c-research-area-overview__tag-list-item-link" href="#"><svg class="c-research-area-overview__tag-list-item-icon" xmlns="http://www.w3.org/2000/svg" width="18.002" height="18">
<path fill="currentColor" d="M7.583.019a.962.962 0 0 1 .755 1.133l-.6 3.026H12.2l.679-3.4a.963.963 0 1 1 1.889.378l-.6 3.026h2.873a.964.964 0 1 1 0 1.929h-3.262l-1.157 5.786h3.13a.964.964 0 1 1 0 1.929h-3.516l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H5.807l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H.964a.964.964 0 1 1 0-1.929h3.259L5.38 6.103H2.25a.964.964 0 1 1 0-1.929h3.516l.679-3.4A.962.962 0 0 1 7.578.019ZM7.35 6.107l-1.158 5.786h4.46l1.157-5.786Z"/>
</svg>ALS</a></li>
      <li class="c-research-area-overview__tag-list-item"><a class="c-research-area-overview__tag-list-item-link" href="#"><svg class="c-research-area-overview__tag-list-item-icon" xmlns="http://www.w3.org/2000/svg" width="18.002" height="18">
<path fill="currentColor" d="M7.583.019a.962.962 0 0 1 .755 1.133l-.6 3.026H12.2l.679-3.4a.963.963 0 1 1 1.889.378l-.6 3.026h2.873a.964.964 0 1 1 0 1.929h-3.262l-1.157 5.786h3.13a.964.964 0 1 1 0 1.929h-3.516l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H5.807l-.679 3.4a.963.963 0 0 1-1.889-.378l.6-3.026H.964a.964.964 0 1 1 0-1.929h3.259L5.38 6.103H2.25a.964.964 0 1 1 0-1.929h3.516l.679-3.4A.962.962 0 0 1 7.578.019ZM7.35 6.107l-1.158 5.786h4.46l1.157-5.786Z"/>
</svg>Parkinson</a></li>
    </ul>
  </nav>
</div>