---
title: Page-header
layout: component.html
---
<h1 class="docs--page-header">Page-header</h1>
<h1>DENNIS SKAL FÅ FLERE KOMBINATIONER TIL AT VIRKE</h1>

<p class="docs--page-description">
    A core component in the nStack views, the page-header is designed to contain breadcrumbs and page actions aswell
    as the title of the page ofcourse.
</p>

<p class="docs--section-description">
    The page-header is designed to hold up to four sub-components:
</p>
<ul class="docs--section-list">
    <li><code>.breadcrumbs</code></li>
    <li><code>.search-form</code></li>
    <li><code>&lt;h1&gt;</code></li>
    <li><code>...buttongroup</code></li>
</ul>

<section class="page-header">

    <div class="page-header__top-section">

        <ol class="breadcrumb hidden-xs">
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">Translate</a></li>
        </ol>

        <form class="form-inline search-form">
            <div class="form-group action-wrapper">
                <button class="btn btn-icon-transparent action-wrap-action action-wrap-left">
                    <i class="fa fa-search"></i>
                </button>
                <input type="text" placeholder="Search" class="form-control action-wrap-item action-wrap-left transparent" id="searchInput"/>
            </div>
        </form>

    </div>

    <div class="page-header__bottom-section">

        <h1>Web</h1>

        <button class="btn btn-info">API Spec</button>

    </div>

</section>

<br/>

<section class="page-header">

    <div class="page-header__top-section">

        <ol class="breadcrumb hidden-xs">
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">Translate</a></li>
        </ol>

    </div>

    <div class="page-header__bottom-section">

        <h1>Web</h1>

        <button class="btn btn-info">API Spec</button>

    </div>

</section>

<br/>

<section class="page-header">

    <div class="page-header__top-section">

        <ol class="breadcrumb hidden-xs">
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">Translate</a></li>
        </ol>

        <form class="form-inline search-form">
            <div class="form-group action-wrapper">
                <button class="btn btn-icon-transparent action-wrap-action action-wrap-left">
                    <i class="fa fa-search"></i>
                </button>
                <input type="text" placeholder="Search" class="form-control action-wrap-item action-wrap-left transparent" id="searchInput"/>
            </div>
        </form>

    </div>


</section>