PSI Software SE Design Library

Default Page Header: Default (Dark)

Component: Corporate Page Header

Implementation Notes

Optimum image size

  • Desktop: 820 pixels wide, 3:2 aspect ratio
  • Mobile: Full width, 3:2 aspect ratio
<header class="pageHeader has-backdrop" data-theme="dark">
    <nav class="breadcrumbNav">
        <div class="breadcrumbNav-item">
            <a href="#" class="breadcrumbNav-link">Startpage</a>
        </div>
        <div class="breadcrumbNav-item">
            <a href="#" class="breadcrumbNav-link">Page</a>
        </div>
        <div class="breadcrumbNav-item">
            <span>Current Page</span>
        </div>
    </nav>

    <div class="pageHeader-text">

        <h1 class="pageHeader-heading">
            <span class="kicker">
                Thema der Seite
            </span>

            <strong class="pageHeader-title">Ich bin der Titel der Seite</strong>
        </h1>

    </div>

</header>
 
<header class="pageHeader has-backdrop{{#if figure}} has-figure{{/if}}{{#if is-narrow}} is-narrow{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
    {{#breadcrumbnav}}
        {{render '@breadcrumbnav' (contextData '@pageheader' this) merge=true}}
    {{/breadcrumbnav}}

        {{#figure}}
    <div class="pageHeader-figure">
        {{render '@figure' (contextData '@pageheader' this) merge=true}}
    </div>
        {{/figure}}

    <div class="pageHeader-text">

        <h1 class="pageHeader-heading">
            {{#kicker}}
                {{render '@kicker' (contextData '@pageheader' this) merge=true}}
            {{/kicker}}
            {{#notice}}<span class="pageHeader-notice">{{{.}}}</span>{{/notice}}
            {{#title}}<strong class="pageHeader-title">{{{.}}}</strong>{{/title}}
        </h1>

            {{#description}}
        <div class="pageHeader-description">
            {{{.}}}
        </div>
            {{/description}}

    </div>

</header>
 
{
  "breadcrumbnav": {
    "items": [
      {
        "label": "Startpage",
        "url": "#"
      },
      {
        "label": "Page",
        "url": "#"
      },
      {
        "label": "Current Page",
        "is-current": true
      }
    ]
  },
  "kicker": {
    "content": "Thema der Seite"
  },
  "title": "Ich bin der Titel der Seite",
  "theme": "dark"
}
  • Content: 
    %pageHeader--narrow {

    @include only-on-desktop(){

        %pageHeader-text {
            width: get-columns-width(8);
            margin-left: auto;
            margin-right: auto;
        }

    }

}

.pageHeader {
    @extend %pageHeader;

    &-kicker {
        @extend %pageHeader-kicker;
    }

    &-text {
        @extend %pageHeader-text;
    }

    &-notice {
        @extend %pageHeader-notice;
    }

    &-title {
        @extend %pageHeader-title;
    }

    &-description {
        @extend %pageHeader-description;
    }

    &-figure {
        @extend %pageHeader-figure;
    }

    &.is-narrow {
        @extend %pageHeader--narrow;
    }

}
  • URL: /components/raw/pageheader/_defaultPageHeader.scss
  • Filesystem Path: components/04-modules/pageHeader/defaultPageHeader/_defaultPageHeader.scss
  • Size: 664 Bytes