Blog Article

<div class="l-site__wrapper">
    <header class="header">
        <button class="hamburger__wrapper" id="mobileNav" type="button" aria-expanded="false" aria-haspopup="true">
            <div class="hamburger__text u-visually-hidden">
                MENU
            </div>
            <div class="hamburger__btn hamburger hamburger--collapse ">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </div>
        </button>
        <div class="header__top">
            <div class="header__inner l-container__inner header__cols">
                <div class="header__col header__col-left">
                    <div class="logo">
                        <img src="/assets/img/logo.svg" type="image/svg+xml" alt="Logo" />
                    </div>
                </div>
                <div class="header__col header__col-right">
                    <div class="search__wrap" id="searchBar">
                        <input for="" type="search" class="form__input form__input--no-brd" for="" placeholder="Search">
                        <button class="search__btn" type="submit">
                            <span class="u-visually-hidden">Search</span>
                            <div class="search__btn-icon">

                                <svg viewBox="0 0 512 512" class="a-icon__svg a-icon__svg--x1">
                                    <use xlink:href="#icon__search"></use>
                                </svg>

                            </div>
                        </button>
                    </div>
                    <div class="search__toggle">
                        <button id="searchToggle" aria-label="toggle search field">
                            <div class="search__toggle-item search__toggle-open" data-search-toggle="open">

                                <svg viewBox="0 0 512 512" class="a-icon__svg a-icon__svg--x2">
                                    <use xlink:href="#icon__search"></use>
                                </svg>

                            </div>
                            <div class="search__toggle-item search__toggle-close" data-search-toggle="close">

                                <svg viewBox="0 0 384 512" class="a-icon__svg a-icon__svg--x2">
                                    <use xlink:href="#icon__xmark"></use>
                                </svg>

                            </div>
                        </button>
                    </div>
                </div>

            </div>
        </div>
        <div class="navigation__container header__btm" id="mainNav" hidden>
            <div class="header__inner l-container__inner header__cols">
                <div class="header__col header__col-left">
                    <nav class="navigation__wrapper">

                        <div class="navigation">
                            <ul class="navigation__inner">
                                <li class="navigation__item"><a href="#Home" class="navigation__link" aria-expanded="false">Home</a>

                                </li>
                                <li class="navigation__item navigation__item--active"><a href="#About" class="navigation__link" aria-expanded="false">About</a>

                                </li>
                                <li class="navigation__item"><a href="#Projects" class="navigation__link" aria-expanded="false">Projects</a>

                                </li>
                                <li class="navigation__item"><a href="#Outputs" class="navigation__link" aria-expanded="false">Outputs</a>

                                </li>
                                <li class="navigation__item"><a href="#Contact" class="navigation__link" aria-expanded="false">Contact</a>

                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
                <div class="header__col header__col-right">
                    <button class="btn header__btn--sharepoint btn--icon ">
                        Team SharePoint Area

                        <svg viewBox="0 0 15 20" class="a-icon__svg svg-icon__chevron-dims">
                            <use xlink:href="#icon__chevron"></use>
                        </svg>

                    </button>
                </div>

            </div>

        </div>
        <div class="navigation-sub__container">
            <nav class="navigation-sub l-container__inner">
                <ul class="navigation-sub__inner">
                    <li class="navigation-sub__item"><a class="navigation-sub__link" href="">What we do</a></li>
                    <li class="navigation-sub__item navigation-sub__item--active"><a class="navigation-sub__link" href="">Our Work</a></li>
                    <li class="navigation-sub__item"><a class="navigation-sub__link" href="">Our People</a></li>
                    <li class="navigation-sub__item"><a class="navigation-sub__link" href="">Our Partners</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="l-site__main">

        <section class="l-section-full">
            <h2 class="section__heading u-bg-color__1 l-section-full__item">
                <div class="section__heading-inner">
                    <span class="section__heading-icon">
                        <img src="/assets/img/accordion-icon-1.svg">
                    </span>
                    <span class="section__heading-text ">Blogs</span>
                </div>
            </h2>
            <div class="l-section-full__content">
                <div class="l-article">

                    <div class="l-article__main">
                        <h1 class="article__heading">
                            Blog title here lorem ipsum dolor sit amet consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore
                        </h1>

                        <div class="article__details">
                            <div class="article__details-date">
                                1 March 2024
                            </div>
                            <div class="article__details-author">
                                By A Name
                            </div>
                        </div>

                        <div class="article__content">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.</p>

                            <h3>Sub head</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
                        </div>
                    </div>

                    <aside class="l-article__aside">
                        <div class="article__nav">

                            <a class="article__nav-item">
                                <span class="article__nav-item-icon">
                                    <div class="arrow arrow__back"> <!--fwd or back-->
                                        <span class="arrow__link" href="#"><svg viewBox="0 0 20 20" class="a-icon__svg svg-icon__arrow-dims">
                                                <use xlink:href="#icon__arrow"></use>
                                            </svg></span>
                                    </div>
                                </span>
                                This will be the title of the previous blog which you can click to read the blog
                            </a>

                            <a class="article__nav-item">
                                <span class="article__nav-item-icon">
                                    <div class="arrow arrow__fwd"> <!--fwd or back-->
                                        <span class="arrow__link" href="#"><svg viewBox="0 0 20 20" class="a-icon__svg svg-icon__arrow-dims">
                                                <use xlink:href="#icon__arrow"></use>
                                            </svg></span>
                                    </div>
                                </span>
                                This will be the title of the previous blog which you can click to read the blog
                            </a>

                        </div>
                    </aside>
                </div>
            </div>
        </section>

    </div>
    <footer class="footer l-container">
        <div class="footer__inner l-container__inner">
            <div class="footer__top">
                <div class="footer__top-left footer__icons">
                    <div class="footer__icons-icon">
                        <a href="#" class="footer__icons-link"><img src="/assets/img/manchester-logo 1.svg"></a>
                    </div>
                    <div class="footer__icons-icon">
                        <a href="#" class="footer__icons-link"><img src="/assets/img/lshtm-logo 1.svg"></a>
                    </div>
                    <div class="footer__icons-icon">
                        <a href="#" class="footer__icons-link"><img src="/assets/img/Kent-logo 1.svg"></a>
                    </div>
                </div>
                <div class="footer__top-right">
                    <div class="footer__icons-icon footer__icon--last">
                        <a href="#" class="footer__icons-link"><img src="/assets/img/x-logo 1.svg"></a>
                    </div>
                </div>
            </div>

            <div class="footer__btm">
                <div class="footer__btm-left">
                    <p>The NIHR Health and Social Care Systems and Commissioning Policy Research Unit (PRUs) is part of the NIHR and hosted by The University of Manchester.<br> The views expressed are those of the authors and not necessarily those of the NIHR or the Department of Health and Social Care.</p>
                </div>
                <div class="footer__btm-right">
                    <div class="footer__icons-icon footer__icon--last">
                        <a href="#" class="footer__icons-link"><img src="/assets/img/x-logo 1.svg"></a>
                    </div>
                </div>
            </div>
        </div>
</div><!--l-container__inner-->
</footer>
</div>