Content header

The content header contains some of the main elements to structure a page, like headline, sub headline and content actions.

Content header

Page Title

Optional subline

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 est laborum.

<div class="contentHeader">
    <div class="contentHeader__header">
        <h1 class="header__headline">Page Title</h1>
        <div class="header__subline">Optional subline</div>
    </div>

    <div class="contentHeader__actions">
        <button class="button--secondaryContentAction">
            <span class="iconMdsp addCircle" aria-hidden="true"></span>
            Add Button
        </button>

        <a class="button button--secondaryContentAction" href="#">
            <span class="iconMdsp edit" aria-hidden="true"></span>
            Edit Link
        </a>

        <a class="button button--secondaryContentAction" href="#">
            <span class="iconMdsp delete" aria-hidden="true"></span>
            Delete Link
        </a>
    </div>
</div>
<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 est laborum.
</p>

Content header with breadcrumbs

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 est laborum.

<div class="contentHeader">
    <div class="contentHeader__header">
        <ul class="breadcrumb">
            <li class="breadcrumb__item">
                <a href="#">Breadcrumb 1</a>
            </li>
            <li class="breadcrumb__item">
                <a href="#">Breadcrumb 2</a>
            </li>
            <li class="breadcrumb__item is-current">
                <a href="#">Breadcrumb 3</a>
            </li>
        </ul>
        <h1 class="header__headline">Page Title</h1>
        <div class="header__subline">Optional subline</div>
    </div>

    <div class="contentHeader__actions">
        <button class="button--secondaryContentAction">
            <span class="iconMdsp addCircle" aria-hidden="true"></span>
            Add Button
        </button>

        <a class="button button--secondaryContentAction" href="#">
            <span class="iconMdsp edit" aria-hidden="true"></span>
            Edit Link
        </a>

        <a class="button button--secondaryContentAction" href="#">
            <span class="iconMdsp delete" aria-hidden="true"></span>
            Delete Link
        </a>
    </div>
</div>
<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 est laborum.
</p>

Content header with back button

Page Title

Optional subline

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 est laborum.

<div class="contentHeader">
    <div class="contentHeader__header">
        <button class="button--secondary">
            <span class="iconMdsp arrowSingleLeft" aria-hidden="true"></span>
            Back
        </button>
        <h1 class="header__headline">Page Title</h1>
        <div class="header__subline">Optional subline</div>
    </div>

    <div class="contentHeader__actions">
        <button class="button--secondaryContentAction">
            <span class="iconMdsp addCircle" aria-hidden="true"></span>
            Add Button
        </button>

        <a class="button button--secondaryContentAction" href="#">
            <span class="iconMdsp edit" aria-hidden="true"></span>
            Edit Link
        </a>

        <a class="button button--secondaryContentAction" href="#">
            <span class="iconMdsp delete" aria-hidden="true"></span>
            Delete Link
        </a>
    </div>
</div>
<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 est laborum.
</p>
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top