Front W - Pattern Library

Drawer: Open 

<section role="dialog" class="drawer show" id="info-bar-1" aria-labelledby="info-bar-1_title">
    <div class="drawer__content">
        <h2 id="info-bar-1_title" class="display--md mb--md">Studium</h2>
        <div>

            <p>Der Fachbereich informiert Studierende im Laufe des Semesters über das <a href="https://wiwi.hs-duesseldorf.de/aktuelles/schwarzes-brett">Schwarze Brett</a>, aktuelle <a href="https://wiwi.hs-duesseldorf.de/aktuelles/meldungen">Meldungen</a> und über die <a href="https://www.facebook.com/hsd.wiwi/">Facebook-Seite des Fachbereichs</a>.</p>
            <p>Weitere relevante Informationen im Studium sind</p>
            <ul>
                <li><a href="https://wiwi.hs-duesseldorf.de/studium/pruefungen/Seiten/pruefungsordnungen.aspx">Prüfungsordnungen</a>
                </li>
                <li><a href="https://wiwi.hs-duesseldorf.de/studium/pruefungen/Seiten/klausureinsichten.aspx">Klausureinsichten</a>
                </li>
                <li><a href="https://wiwi.hs-duesseldorf.de/studium/tutorien">Tutorien</a> und</li>
                <li><a href="https://wiwi.hs-duesseldorf.de/studium/auslandsstudium">Informationen zum Auslandsstudium</a>.</li>
            </ul>

            <h3 class="h4">Plattformen</h3>
            <ul>
                <li><a href="https://ossc.hs-duesseldorf.de/">Online Studierenden Support Center (OSSC)</a></li>
                <li><a href="https://moodle.hs-duesseldorf.de/">Moodle</a></li>
                <li><a href="https://www.stellenwerk-hochschule-duesseldorf.de/">Stellenwerk (Jobportal für Studierende)</a>
                </li>
            </ul>

        </div>
        <button class="btn drawer__close">
            <svg class="icon" aria-hidden="true" focusable="false" width="16" height="16">
                <use xlink:href="/assets/icons.svg#i-close" />
            </svg>
            <span class="visually-hidden">Schließen</span>
        </button>
    </div>
    <div class="drawer__mask"></div>
</section>
 
<section role="dialog" class="drawer{{ open ? ' show' }}" id="info-bar-1" aria-labelledby="info-bar-1_title">
  <div class="drawer__content">
    <h2 id="info-bar-1_title" class="display--md mb--md">{{ title }}</h2>
    <div>
      {{ content }}
    </div>
    <button class="btn drawer__close">
      {% include '@icon' with { 'type': 'i-close' } %}
      <span class="visually-hidden">Schließen</span>
    </button>
  </div>
  <div class="drawer__mask"></div>
</section>
 
{
  "title": "Studium",
  "content": "\n    <p>Der Fachbereich informiert Studierende im Laufe des Semesters über das <a\n      href=\"https://wiwi.hs-duesseldorf.de/aktuelles/schwarzes-brett\">Schwarze Brett</a>, aktuelle <a\n      href=\"https://wiwi.hs-duesseldorf.de/aktuelles/meldungen\">Meldungen</a> und über die <a\n      href=\"https://www.facebook.com/hsd.wiwi/\">Facebook-Seite des Fachbereichs</a>.</p>\n    <p>Weitere relevante Informationen im Studium sind</p>\n    <ul>\n      <li><a\n          href=\"https://wiwi.hs-duesseldorf.de/studium/pruefungen/Seiten/pruefungsordnungen.aspx\">Prüfungsordnungen</a>\n      </li>\n      <li><a\n          href=\"https://wiwi.hs-duesseldorf.de/studium/pruefungen/Seiten/klausureinsichten.aspx\">Klausureinsichten</a>\n      </li>\n      <li><a href=\"https://wiwi.hs-duesseldorf.de/studium/tutorien\">Tutorien</a> und</li>\n      <li><a href=\"https://wiwi.hs-duesseldorf.de/studium/auslandsstudium\">Informationen zum Auslandsstudium</a>.</li>\n    </ul>\n\n    <h3 class=\"h4\">Plattformen</h3>\n    <ul>\n      <li><a href=\"https://ossc.hs-duesseldorf.de/\">Online Studierenden Support Center (OSSC)</a></li>\n      <li><a href=\"https://moodle.hs-duesseldorf.de/\">Moodle</a></li>\n      <li><a href=\"https://www.stellenwerk-hochschule-duesseldorf.de/\">Stellenwerk (Jobportal für Studierende)</a>\n      </li>\n    </ul>\n    ",
  "open": true
}