Header (Pharma4u)

.l-header
> .l-header__logos
> .l-header__user

Default Header

Show Code

html

<div id="header" class="l-header h-flex h-space-between">
    <a class="c-logo h-flex h-start" title="pharma4u" href="/">pharma4u</a>
    <div class="l-header__user">
        <div class="h-inline-block h-pos-relative">
            <button class="c-btn -small -secondary-outline -icon-right m-r-s" data-target="#header_loginDropdown1">
            <span class="c-btn__text">
              Anmelden
              <i class="fas fa-lock" aria-hidden="true" />
            </span>
            </button>
            <!-- start Login Dropdown -->
            <div class="c-panel -close-backdrop -has-close-btn -arrow-up-right -is-dropdown" id="header_loginDropdown1" role="menu" aria-haspopup="true">
                <div class="c-panel__inner">
                    <p class="h3 p-b-0">
                        Premium-Login
                    </p>
                    <p class="m-b-m">
                        Noch keinen Zugang?
                        <a href="allgemein/benutzer/registrieren/" class="c-link">Jetzt registrieren</a>
                    </p>
                    <form action="allgemein/benutzer/login/" method="post" onsubmit="" class="m-t-reset">
                        <fieldset>
                            <div class="c-float-container">
                                <label for="user">E-Mail</label>
                                <input
                                        type="text"
                                        class="c-input c-float-input h-fullwidth"
                                        data-placeholder=""
                                        id="user"
                                        name="user"
                                        value=""
                                >
                            </div>
                            <div class="c-float-container">
                                <label for="pass">Passwort</label>
                                <input
                                        type="password"
                                        class="c-input c-float-input h-fullwidth"
                                        data-placeholder=""
                                        id="pass"
                                        name="pass"
                                        value=""
                                >
                            </div>
                            <span class="login-forgot h-block m-t-m h-type-align-right">
                    <a class="link -tiny -secondary" href="allgemein/benutzer/login/?tx_felogin_pi1%5Bforgot%5D=1">
                      Passwort vergessen?
                    </a>
                  </span>
                            <button class="c-btn -small -secondary h-fullwidth m-t-s" type="submit" name="submit">
                                Anmelden
                            </button>
                            <div class="felogin-hidden">
                                <input type="hidden" name="logintype" value="login">
                                <input type="hidden" name="pid" value="707">
                                <input type="hidden" name="redirect_url" value="">
                                <input type="hidden" name="tx_felogin_pi1[noredirect]" value="0">
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
            <!-- end Login Dropdown -->
        </div>
        <a href="allgemein/benutzer/registrieren/" class="c-btn -small -secondary">
            <span class="btn__text">Registrieren</span>
        </a>
    </div>
</div>

Header with extra Logo

pharma4u

DAC/NRF

Registrieren

Show Code

html

<div id="header" class="l-header h-flex h-space-between">
    <div class="l-header__logos">
        <a class="c-logo" title="pharma4u" href="/">pharma4u</a>
        <div class="l-divider -large -vertical m-x-l"></div>
        <a class="c-logo -dacnrf" href="https://dacnrf.pharmazeutische-zeitung.de/" title="DAC/NRF" target="_blank">DAC/NRF</a>
    </div>
    <div class="l-header__user">
        <div class="h-inline-block h-pos-relative">
            <button class="c-btn -small -secondary-outline -icon-right m-r-s" data-target="#header_loginDropdown1">
            <span class="c-btn__text">
              Anmelden
              <i class="fas fa-lock" aria-hidden="true" />
            </span>
            </button>
            <!-- start Login Dropdown -->
            <div class="c-panel -close-backdrop -has-close-btn -arrow-up-right -is-dropdown" id="header_loginDropdown1" role="menu" aria-haspopup="true">
                <div class="c-panel__inner">
                    <p class="h3 p-b-0">
                        Premium-Login
                    </p>
                    <p class="m-b-m">
                        Noch keinen Zugang?
                        <a href="allgemein/benutzer/registrieren/" class="c-link">Jetzt registrieren</a>
                    </p>
                    <form action="allgemein/benutzer/login/" method="post" onsubmit="" class="m-t-reset">
                        <fieldset>
                            <div class="c-float-container">
                                <label for="user">E-Mail</label>
                                <input
                                        type="text"
                                        class="c-input c-float-input h-fullwidth"
                                        data-placeholder=""
                                        id="user"
                                        name="user"
                                        value=""
                                >
                            </div>
                            <div class="c-float-container">
                                <label for="pass">Passwort</label>
                                <input
                                        type="password"
                                        class="c-input c-float-input h-fullwidth"
                                        data-placeholder=""
                                        id="pass"
                                        name="pass"
                                        value=""
                                >
                            </div>
                            <span class="login-forgot h-block m-t-m h-type-align-right">
                    <a class="link -tiny -secondary" href="allgemein/benutzer/login/?tx_felogin_pi1%5Bforgot%5D=1">
                      Passwort vergessen?
                    </a>
                  </span>
                    <button class="c-btn -small -secondary h-fullwidth m-t-s" type="submit" name="submit">
                        Anmelden
                    </button>
                    <div class="felogin-hidden">
                        <input type="hidden" name="logintype" value="login">
                        <input type="hidden" name="pid" value="707">
                        <input type="hidden" name="redirect_url" value="">
                        <input type="hidden" name="tx_felogin_pi1[noredirect]" value="0">
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
        <!-- end Login Dropdown -->
    </div>
    <a href="allgemein/benutzer/registrieren/" class="c-btn -small -secondary">
        <span class="btn__text">Registrieren</span>
    </a>
</div>
</div>

Logged In

pharma4u

Show Code

html

<!-- start header--loggedin -->
<div id="header" class="l-header h-flex h-space-between">
    <a class="c-logo h-flex h-start" title="pharma4u" href="/">pharma4u</a>
    <div class="l-header__user">
        <div class="h-pos-relative">
            <button class="c-btn -small -secondary-outline -dropdown -icon-left" data-target="#header_userDropdown">
                <span class="fa-stack h-pos-absolute h-absolute-vertical-center" aria-hidden="true" style="margin-left: -2.5rem; font-size: 0.875rem">
                    <i class="fa-solid fa-circle fa-stack-2x fa-inverse"></i>
                    <i class="fa-solid fa-user-tie fa-stack-1x h-color-white h-absolute-vertical-center"></i>
                </span>
                <span class="c-btn__text h-overflow-ellipsis h-inline-block" style="max-width: 260px; line-height: inherit;">
                    pharma4u-test@pharma4u.de
                </span>
            </button>
            <div class="c-panel -is-dropdown -is-small -arrow-up-right -close-backdrop" id="header_userDropdown" role="menu" aria-haspopup="true">
                <div class="c-panel__inner">
                    <p class="h4 m-b-xs">pharma4u Test1</p>
                    <p class="h5">
                        Inhaber
                    </p>
                    <ul class="c-list -linklist -fullwidth">
                        <li class="c-list__item">
                            <a class="c-link -icon-right -icon-arrow" href="allgemein/benutzerkonto/">Benutzerkonto</a>
                        </li>
                        <li class="c-list__item">
                            <a class="c-link -icon-right -icon-arrow" href="allgemein/forum/eingang/profil/">Forumsprofil</a>
                        </li>
                    </ul>
                    <a class="c-btn -secondary -small h-fullwidth m-t-s" id="globalLogoutButton" href="?logintype=logout&amp;cHash=4d956645768b1eb4609fdb3e8737c74b">Abmelden</a>
                </div>
            </div>
        </div>
    </div>
</div>

Logged in (Page Area)

pharma4u

Show Code

html

<div id="header" class="l-header h-flex h-space-between" style="min-width: 900px;">
    <a class="c-logo h-flex h-start" title="pharma4u" href="/">pharma4u</a>
    <div class="l-header__user">
        <div class="h-pos-relative">
            <button class="c-btn -small -light -dropdown js-select" data-target="#globalAreaNavWrap">
                <span class=" m-r-xs" aria-hidden="true"><i class="fas fa-circle"></i></span>
                Allgemein
            </button>
            <div class="c-panel -close-backdrop -is-dropdown -arrow-up-right -is-small" id="globalAreaNavWrap" role="menu" aria-haspopup="true">
                <div class="c-panel__inner">
                    <span class="h6 m-b-s">Bereich wählen</span>
                    <ul class="c-list -linklist js-external-links -fullwidth" id="globalAreaNav">
                        <li class="c-list__item -is-subpages ">
                            <a href="studenten/" class="c-link -icon-left">
                                <span class="h-color-student m-r-xs" aria-hidden="true"><i class="fas fa-circle"></i></span>
                                Studenten
                            </a>
                        </li>
                        <li class="c-list__item -is-subpages">
                            <a href="praktikanten/" class="c-link -icon-left">
                                <span class="h-color-phip m-r-xs" aria-hidden="true"><i class="fas fa-circle"></i></span>
                                PhiP
                            </a>
                        </li>
                        <li class="c-list__item -is-subpages">
                            <a href="apotheker/" class="c-link -icon-left">
                                <span class="h-color-apothecary m-r-xs" aria-hidden="true"><i class="fas fa-circle"></i></span>
                                Apotheker
                            </a>
                        </li>
                        <li class="c-list__item -is-subpages ">
                            <a href="pta/" class="c-link -icon-left">
                                <span class="h-color-pta m-r-xs" aria-hidden="true"><i class="fas fa-circle"></i></span>
                                PTA
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="l-divider -vertical -fullwidth m-x-m"></div>
        <div class="h-pos-relative">
            <button class="c-btn -small -secondary-outline -dropdown -icon-left" data-target="#header_userDropdown">
                <span class="fa-stack h-pos-absolute h-absolute-vertical-center" aria-hidden="true" style="margin-left: -2.5rem; font-size: 0.875rem">
                    <i class="fa-solid fa-circle fa-stack-2x fa-inverse"></i>
                    <i class="fa-solid fa-user-tie fa-stack-1x h-color-white h-absolute-vertical-center"></i>
                </span>
                <span class="c-btn__text h-overflow-ellipsis h-inline-block" style="max-width: 260px; line-height: inherit;">
                    pharma4u-test_longemailexample@pharma4u.de
                </span>
            </button>
            <div class="c-panel -is-dropdown -is-small -arrow-up-right -close-backdrop" id="header_userDropdown" role="menu" aria-haspopup="true">
                <div class="c-panel__inner">
                    <p class="h4 m-b-xs">pharma4u Test1</p>
                    <p class="h5">
                        Inhaber
                    </p>
                    <ul class="c-list -linklist -fullwidth">
                        <li class="c-list__item">
                            <a class="c-link -icon-right -icon-arrow" href="allgemein/benutzerkonto/">Benutzerkonto</a>
                        </li>
                        <li class="c-list__item">
                            <a class="c-link -icon-right -icon-arrow" href="allgemein/forum/eingang/profil/">Forumsprofil</a>
                        </li>
                    </ul>
                    <a class="c-btn -secondary -small h-fullwidth m-t-s" id="globalLogoutButton" href="?logintype=logout&amp;cHash=4d956645768b1eb4609fdb3e8737c74b">Abmelden</a>
                </div>
            </div>
        </div>
    </div>
</div>

Atoms

Molecules

Organisms

Templates

Pages

Logger

Header (Pharma4u)

Default Header

Header with extra Logo

Logged In

Logged in (Page Area)

Header (Pharma4u) ​

Default Header ​

Header with extra Logo ​

Logged In ​

Logged in (Page Area) ​

Header (Pharma4u)

Default Header

Header with extra Logo

Logged In

Logged in (Page Area)