Global

Application bar


                    <nav class="navbar navbar-expand-lg navbar-light">
                        <div class="container-fluid">
                            <div class="nav" id="appSelect">
                                <div class="nav-item dropdown">
                                    <a class="nav-link pl-2 pr-2 pt-1" data-toggle="dropdown" href="#" role="button"
                                        aria-haspopup="true" aria-expanded="false">
                                        <div class="media">
                                            <div class="align-self-start mr-3 img ttLogo-tm ttLogo rounded"></div>

                                            <div class="media-body">
                                                <p class="appName d-none d-md-block">Manager</p>
                                                <p class="brandBlurb d-none d-md-block">Blurb</p>
                                                <span class="d-md-none headTxtSm">Talent<br>Manager</span>
                                            </div>
                                            <div class="appSelectChevron">
                                                <span class="fal fa-chevron-down"></span>
                                            </div>
                                        </div>
                                    </a>

                                    <div class="dropdown-menu">
                                        <a class="dropdown-item w-100 mt-1" href="#">
                                            <div class="media">
                                                <img src="/v2/images/talentech-logo.jpg"
                                                    class="align-self-start mr-3 img ttLogo" alt="">
                                                <div class="media-body">
                                                    <p class="appName mt-0">App 1</p>
                                                    <p class="brandBlurb">Blurb</p>
                                                </div>
                                            </div>
                                        </a>
                                        <div class="dropdown-item w-100 section-title">
                                            <p>Section title</p>
                                        </div>
                                        <a class="dropdown-item w-100 mt-1" href="#">
                                            <div class="media">
                                                <img src="/v2/images/talmundo-logo.jpg"
                                                    class="align-self-start mr-3 img ttLogo" alt="">
                                                <div class="media-body">
                                                    <p class="appName mt-0">App 2</p>
                                                    <p class="brandBlurb">Blurb</p>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <ul class="nav ml-auto">
                                <li class="nav-item d-flex align-middle">
                                    <a class="navIcon d-none d-sm-block mt-2 mb-1" href="#" data-toggle="collapse"
                                        data-target="#collapseSearch" aria-expanded="false"
                                        aria-controls="collapseSearch">
                                        <span class="navbar-text pl-3 pr-3">
                                            <span class="fa-light fa-sharp fa-search"></span>
                                        </span>
                                    </a>
                                </li>
                                <li class="nav-item d-flex align-middle" data-toggle="tooltip" data-placement="bottom"
                                    title="News">
                                    <a class="navIcon d-none d-sm-block mt-2 mb-1" href="#">
                                        <span class="navbar-text pl-3 pr-3">
                                            <span class="fa-sharp fa-solid fa-sparkles"></span>
                                            <!--<span class="badge badge-pill">&nbsp;</span>-->
                                        </span>
                                    </a>
                                </li>
                                <li class="nav-item  d-flex align-middle" data-toggle="tooltip" data-placement="bottom"
                                    title="Notifications">
                                    <a class="navIcon d-none d-sm-block mt-2 mb-1" href="#">
                                        <span class="navbar-text pl-3 pr-3">
                                            <span class="fa-sharp fa-solid fa-bell"></span>
                                            <span class="badge badge-pill">&nbsp;</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="d-sm-none">
                                    <button type="button" class="btn btn-tt btn-light btn-tt-light" data-toggle="modal"
                                        data-target="#navModal">
                                        <span class="fa-sharp fa-light fa-bars"></span>
                                    </button>
                                </li>
                                <li class="nav-item active">
                                    <div class="navbar-text dropdown userB text-center">
                                        <a aria-expanded="false" aria-haspopup="true" class="nav-link mt-1"
                                            data-toggle="dropdown" href="#" id="navbarDropdownA2" role="button">
                                            <img alt="" class="rounded-circle img-fluid userBimg"
                                                src="/v2/images/user2.png">
                                            <span class="userName">
                                                <span class="firstName">Firstname</span>
                                                <span class="fal fa-chevron-down"></span>
                                            </span>
                                        </a>
                                        <div aria-labelledby="navbarDropdownA2"
                                            class="dropdown-menu dropdown-menu-right dropdown-menu-sm-right w-100">
                                            <div class="userDD text-center">
                                                <img alt="" class="rounded-circle img-fluid"
                                                    src="/v2/images/user2.png">
                                                <h2 class="pt-4">Firstname Lastname</h2>
                                                <h3>janine.fredrica.brockelwink.stang@acme-industries.com</h3>
                                                <hr>
                                                <p>
                                                    <a class="dropdown-item text-left pt-3 pb-3" href="#">
                                                        <span class="fa-sharp fa-light fa-gear"></span>
                                                        <span class="pl-2">My account</span>
                                                    </a>
                                                </p>
                                                <p>
                                                    <a class="dropdown-item text-left pt-3 pb-3 pt-3" href="#">
                                                        <span class="fa-sharp fa-light fa-arrow-right-from-bracket"></span>
                                                        <span class="pl-2">Sign out</span>
                                                    </a>
                                                </p>
                                                <hr>
                                                <ul
                                                    class="list-group list-group-horizontal d-flex justify-content-center mb-1 mt-2">
                                                    <li class="list-group-item"><a href="#">Privacy policy</a></li>
                                                    <li class="list-group-item">&bull;</li>
                                                    <li class="list-group-item"><a href="#">Terms of service</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>

                            <button type="button" class="btn userBtn d-inline-block d-md-none" data-toggle="modal"
                                data-target="#exampleModal">
                                <img alt="" class="rounded-circle img-fluid userBimg" src="/v2/images/user2.png">
                            </button>
                    </nav>
                

                    <footer class="col p-0">
                        <div class="talentech-footer d-flex justify-content-center">
                            <a href=""><img src="/v2/images/powered-by-talentech.png"></img></a>
                        </div>

                        <div class="whitelable-footer d-flex justify-content-between align-items-end">
                            <a href="#"><img class="logo-left" src="/v2/images/visma-datalon.png"></img></a>
                            <a href="#"><img class="logo-right" src="/v2/images/powered-by-talentech.png"></img></a>
                        </div>
                    </footer>

Pageheader

Page header h1

New project Copy project
link 

                    <div class="t-header">
                        <div class="t-header-inner">
                            <div class="col-12">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="#">Breadcrumb Link</a></li>
                                        <li class="breadcrumb-item"><a href="#">Page header</a></li>
                                        <li class="breadcrumb-item"><a href="#">Breadcrumb 3</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Parent</li>
                                    </ol>
                                </nav>
                            </div>
                            <div class="col-12 d-flex flex-wrap">
                                <div class="page-header">
                                    <h1>Page header h1</h1>
                                </div>
                                <div class="ml-auto">
                                    <div class="btn-group btn-group-sm justify-content-end" role="group"
                                        aria-label="Button group">
                                        <button class="btn btn-sq btn-sq-success" type="button">
                                            <i class="fal fa-plus fa-fw"></i>
                                            <p>Project</p>
                                        </button>
                                        <div class="dropdown dropleft">
                                            <button class="btn btn-sq" type="button" id="dropdownMenuButton"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fal fa-plus fa-fw"></i>
                                                <p>Project</p>
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                <a class="dropdown-item" href="#">New project</a>
                                                <a class="dropdown-item" href="#">Copy project</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col p-2 border-top">
                                <a href="#" class="m-2"><span class="far fa-chevron-left pr-1"></span>link</a>
                            </div>
                        </div>
                    </div>

Supportbar


                    <nav class="adminBar d-flex justify-content-between">
                        <span class="d-block d-sm-none"><span class="fal fa-user-crown"></span></span>
                        <span class="d-none d-sm-block"><span class="fal fa-user-crown"></span>Support admin</span>
                        <span class="trunkateB">{Customer name}</span>
                        <span class="d-block d-sm-none"><span class="fal fa-retweet"></span></span>
                        <a href="/" class="d-none d-sm-block"><span class="fal fa-retweet"></span> Switch user</a>
                    </nav>

v1.0.811-rev-07dbbad