Header (application)

Provides context by displaying breadcrumbs, page name, and subheading.

Examples

Application headers include the:

breadcrumbs component
Page heading (H1)
Optional subheading or page description

There are two types of application header, a homepage header and a subpage header. All Turas applications use a standard homepage and subpage header.

Usage

Application headers provide context for users. They are the area at the top of the page that displays the application or page name.

Do:

use the header code as supplied
ensure the product owner has agreed on the product description

Avoid:

removing the homepage header
designing a bespoke header for your application

Header (application)

Provides context by displaying breadcrumbs, page name, and subheading.

Header (application)

Provides context by displaying breadcrumbs, page name, and subheading.

Copy


    <turas-banner-sub-page banner-header="Header (application)" banner-paragraph="Provides context by displaying breadcrumbs, page name, and subheading.">
        <partial name="_breadcrumbs" />
    </turas-banner-sub-page>

Copy


    <div class="main-banner " id="mainbanner">
            <div class="container">
                <div class="row">
                    <div class="col-md-10">
                        
        


        <nav class="" id="breadcrumbs" aria-label="breadcrumb"><ol class="breadcrumb" id="breadcrumbInner">
          
                <li class="breadcrumb-item  " id="breadcrumbHome">
                        <a href="/" aria-label="Home"></a>
                </li>
                 <li class="breadcrumb-item  ">
                    <a href="/components/">Components</a>
                </li>
           
            <li class="breadcrumb-item active " aria-current="page">
                  Header (application)
            </li>
        
        </ol></nav>

    
                        <div class="home-banner-text">
                            <h1 id="bannerPageTitle">Header (application)</h1>
                            <p id="homeBannerText">Provides context by displaying breadcrumbs, page name, and subheading.</p>
                        </div>

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

Page header with breadcrumbs

Header (application)

Provides context by displaying breadcrumbs, page name, and subheading.

Copy


    <turas-banner-sub-page banner-header="Header (application)" banner-paragraph="Provides context by displaying breadcrumbs, page name, and subheading.">
        <turas-breadcrumb>
            <turas-breadcrumb-item breadcrumb-is-home>
                <a asp-controller="Home" asp-action="Index" asp-area="Home" aria-label="Home"></a>
            </turas-breadcrumb-item>
            <turas-breadcrumb-item>
                <a asp-controller="Home" asp-action="Index" asp-area="Components">Components</a>
            </turas-breadcrumb-item>
            <turas-breadcrumb-item breadcrumb-is-active>
                Breadcrumbs
            </turas-breadcrumb-item>
        </turas-breadcrumb>
    </turas-banner-sub-page>

Copy


    <div class="main-banner " id="mainbanner">
            <div class="container">
                <div class="row">
                    <div class="col-md-10">
                        
        <nav class="" id="breadcrumbs" aria-label="breadcrumb"><ol class="breadcrumb" id="breadcrumbInner">
            <li class="breadcrumb-item  " id="breadcrumbHome">
                <a aria-label="Home" href=""></a>
            </li>
            <li class="breadcrumb-item  ">
                <a href="">Components</a>
            </li>
            <li class="breadcrumb-item active " aria-current="page">
                Breadcrumbs
            </li>
        </ol></nav>
    
                        <div class="home-banner-text">
                            <h1 id="bannerPageTitle">Header (application)</h1>
                            <p id="homeBannerText">Provides context by displaying breadcrumbs, page name, and subheading.</p>
                        </div>

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

Sign in page header

Copy


    <turas-sign-in-banner banner-header="Header (application)" banner-tagline="This is the banner tag line" banner-paragraph="Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae." banner-image-alt-text="Banner alt image text">

        <turas-button button-style="Primary" button-type="Hyperlink" href="">Sign in</turas-button>
    </turas-sign-in-banner>

Copy


    <div class="main-banner " id="sign-in"><div class="container"><div class="row">
<div class="col-lg-6 col-xl-6 flexy-text">
<div class="home-banner-text flexy-content">
<h1 id="bannerPageTitle">Header (application)</h1>
<p id="tagline">This is the banner tag line</p>
<p id="homeBannerText">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>


        <a href="" class="btn btn-primary ">Sign in</a>
    
</div>
</div>
<div class="d-none d-lg-block col-lg-6  col-xl-6">
<img src="/lib/turas-design-system/dist/img/signin-illustration.svg" class="img-fluid" alt="Banner alt image text">
</div>
</div>
</div>
</div>

Signed out page header

Copy


    <turas-sign-in-banner banner-header="Header (application)" banner-tagline="This is the banner tag line" banner-paragraph="Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae." banner-image-alt-text="Banner alt image text" banner-signed-out>

        <turas-button button-style="Primary" button-type="Hyperlink" href="">Sign in</turas-button>
    </turas-sign-in-banner>

Copy


    <div class="main-banner " id="sign-in"><div class="container"><div class="alert-success alert" role="alert"><div class="alert-icon"><span class="fa fa-check"></span></div>
<div class="alert-content">
<p class="mb-0"><strong>Signed out!</strong> You have been signed out of Turas.</p>
For your security you should now close your web browser.
</div></div>
<div class="row">
<div class="col-lg-6 col-xl-6 flexy-text">
<div class="home-banner-text flexy-content">
<h1 id="bannerPageTitle">Header (application)</h1>
<p id="tagline">This is the banner tag line</p>
<p id="homeBannerText">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>


        <a href="" class="btn btn-primary ">Sign in</a>
    
</div>
</div>
<div class="d-none d-lg-block col-lg-6  col-xl-6">
<img src="/lib/turas-design-system/dist/img/signin-illustration.svg" class="img-fluid" alt="Banner alt image text">
</div>
</div>
</div>
</div>

Home page header

Header (application)

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Copy


    <turas-home-banner banner-header="Header (application)" banner-paragraph="Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae." banner-image="/media/3jjpecl4/banner_image.png" banner-image-alt-text="Banner alt image text">

        <form class="search-area d-flex" name="homeSiteSearchForm" method="get" action="/search-results/">
            <input class="form-control" type="search" placeholder="Search ipsum, faucibus orci , guidance and more..." aria-label="Search" name="siteSearch" />
            <button class="btn btn-search m-0" type="submit" aria-label="This will open in a new window">
                <span class="visually-hidden">Search</span>
                <span class="fa-light fa-magnifying-glass" aria-hidden="true"></span>
            </button>
        </form>

    </turas-home-banner>

Copy


    <div class="main-banner " id="sg-header">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 flexy-text">
                        <div class="home-banner-text flexy-content">
                            <h1 id="bannerPageTitle">Header (application)</h1>
                            
                            <p id="homeBannerText">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
                            

        <form class="search-area d-flex" name="homeSiteSearchForm" method="get" action="/search-results/">
            <input class="form-control" type="search" placeholder="Search ipsum, faucibus orci , guidance and more..." aria-label="Search" name="siteSearch" />
            <button class="btn btn-search m-0" type="submit" aria-label="This will open in a new window">
                <span class="visually-hidden">Search</span>
                <span class="fa-light fa-magnifying-glass" aria-hidden="true"></span>
            </button>
        </form>

    
                                                       
                        </div>
                    </div>
                    <div class="d-none d-lg-block col-lg-6 ">
                        <img src="/media/3jjpecl4/banner_image.png" class="img-fluid" alt="Banner alt image text">
                    </div>
                    </div>
            </div></div>

Optional parameters

banner-header
banner-tagline
banner-paragraph
banner-image-alt-text
banner-signed-out displays the 'You have been signed out of Turas' alert
additional-classes - additional CSS classes

Accessibility status

This component is fully compliant with the WCAG 2.2 standard.

Testing

check keyboard navigation to ensure the header does not trap focus and that all interactive elements within the header are accessible with a keyboard , for example any links or buttons
check focus is visible of any interactive elements within the header
test header with screen readers to ensure content is announced as expected within the header

Developer considerations

make sure that the header is consistently in the same place on every page

Header (global)

Modals

Header (application)

Examples

Usage

Header (application)

Header (application)

Page header with breadcrumbs

Header (application)

Sign in page header

Signed out page header

Home page header

Header (application)

Optional parameters

Accessibility status

Testing

Developer considerations

Suggest a new component

Build accessible experiences

Form components

Was this page helpful?