The LB Redbridge design system.

- Reusability
- User centred design
- An overview
- An introduction
- A starter template
- Accordion
- Back link
- Breadcrumbs
- Button
- Character count
- Checkboxes
- Confirmation
- Date input
- Details
- Declarations
- Error message and summary
- File upload
- Footer
- Header
- Hyperlink
- Inset text
- Layouts
- Mapping
- Phase banner
- Phone numbers
- Print button
- Radio buttons
- Select
- Spacing
- Table ( responsive )
- Text input
- Textarea
- Typography
- Warning text
- Well
- Case examples

Header

Customised header component for LB Redbridge, based on the gov uk header
GDS guidelines on using this component (opens in a new window)

HTML Code ↕

                    
<header class="govuk-header " role="banner"data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">

    <div class="govuk-grid-column-one-half">

    <div class="govuk-header__logo">
        <a href="https://www.redbridge.gov.uk/" class="govuk-header__link govuk-header__link--homepage">
        <img src="assets/images/logo.png" width="166px" height="70px" alt="London Borough of Redbridge">
        </a>
    </div>
    <img src="assets/images/leaf.png" class="header-leaf" width="303px" height="175px" alt="London Borough of Redbridge leaf">

    </div>


    <div class="govuk-grid-column-one-half">

    <div class="redbridge-headerlinks">
        <ul>          
        <li><a class="govuk-link govuk-!-font-size-16" href="#"><img src="assets/images/bell.png" width="15px" height="16px" alt="notification"></a><span class="notify-dot"></span></li>
        <li>|</li>
        <li><a class="govuk-link govuk-!-font-size-16" href="#">My Account</a></li>
        <li>|</li>
        <li><a class="govuk-link govuk-!-font-size-16" href="#">Logout</a></li>
        <li>|</li>
        <li><a class="govuk-link govuk-!-font-size-16" href="#">Accessibility tools</a></li>
        </ul>
    </div>

    <div class="redbridge-search">
        <form action="" method="get" role="search">
        
            <div class="redbridge-search govuk-!-display-none-print  govuk-!-margin-bottom-0 redbridge-search--large-on-mobile redbridge-search--on-white redbridge-search--separate-label">
            
                <h2 class="govuk-!-margin-0"><label for="search-global" class="govuk-label">What are you looking for?</label></h2>

                <div class="redbridge-search__item-wrapper">
                <input enterkeyhint="search" class="redbridge-search__item redbridge-search__input js-class-toggle" id="search-global" name="q" title="Search" type="search" value="">
                <div class="redbridge-search__item redbridge-search__submit-wrapper">
                    <button class="redbridge-search__submit" type="submit" enterkeyhint="search">
                    Search GOV.UK
                    <svg class="redbridge-search__icon" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                        <circle cx="12.0161" cy="11.0161" r="8.51613" stroke="currentColor" stroke-width="3"></circle>
                        <line x1="17.8668" y1="17.3587" x2="26.4475" y2="25.9393" stroke="currentColor" stroke-width="3"></line>
                    </svg>
                    </button>
                </div>
                </div>

            </div>

        </form>
        </div>

    </div>

</div>
</header>