PSI Software SE Design Library

Event Page Header: Default

Component: Event Page Header

Implementation Notes

Optimum image size

  • Desktop: 840 pixels wide, 3:2 aspect ratio
  • Mobile: 608 pixels wide, 3:2 aspect ratio
<header class="eventPageHeader has-backdrop">
    <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="eventPageHeader-text">

        <h1 class="eventPageHeader-heading">
            <span class="kicker">
                <span class="kicker-item">Echo Park</span>
                <span class="kicker-item">Selfies</span>
                <span class="kicker-item">Flexitarian</span>
            </span>

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

        <div class="eventPageHeader-data">

            <div class="metadataList">
                <dl class="metadataList-list">
                    <div class="metadataList-item">
                        <dt class="metadataList-label">Hashtag</dt>
                        <dd class="metadataList-value">Echo</dd>
                    </div>
                    <div class="metadataList-item">
                        <dt class="metadataList-label">Park</dt>
                        <dd class="metadataList-value">Biodiesel</dd>
                    </div>
                    <div class="metadataList-item">
                        <dt class="metadataList-label">Plaid</dt>
                        <dd class="metadataList-value">Skateboard</dd>
                    </div>
                </dl>
            </div>

        </div>
    </div>

</header>
 
<header class="eventPageHeader has-backdrop{{#if figure}} has-figure{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#type}} data-type="{{.}}"{{/type}}>
    {{#breadcrumbnav}}
        {{render '@breadcrumbnav' (contextData '@eventpageheader' this) merge=true}}
    {{/breadcrumbnav}}

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

    <div class="eventPageHeader-text">

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

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

        <div class="eventPageHeader-data">

            {{#datebadge}}
                {{render '@datebadge' (contextData '@teaserinset' this) merge=true}}
            {{/datebadge}}

            {{#metadatalist}}
                {{render '@metadatalist' (contextData '@teaserinset' this) merge=true}}
            {{/metadatalist}}
        </div>
    </div>

</header>
 
{
  "breadcrumbnav": {
    "items": [
      {
        "label": "Startpage",
        "url": "#"
      },
      {
        "label": "Page",
        "url": "#"
      },
      {
        "label": "Current Page",
        "is-current": true
      }
    ]
  },
  "kicker": {
    "content": null,
    "items": [
      "Echo Park",
      "Selfies",
      "Flexitarian"
    ]
  },
  "title": "Ich bin der Titel der Seite",
  "metadatalist": {
    "items": [
      {
        "label": "Hashtag",
        "value": "Echo"
      },
      {
        "label": "Park",
        "value": "Biodiesel"
      },
      {
        "label": "Plaid",
        "value": "Skateboard"
      }
    ]
  }
}
  • Content: 
    .eventPageHeader {
    @extend %pageHeader;

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

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

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

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

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

    &-figure {
        @extend %pageHeader-figure;

        .figure {
            position: relative;
        }

        @include only-on-desktop(){
            padding: var(--bp);
            padding-left: 0;

            .figure {
                border-radius: var(--br-small);
                overflow: hidden;
                background-color: white;
            }

        }

    }

    &[data-type="logo"] &-figure {

        img {
            position: relative;
            transform: scale(.85);
            object-fit: contain;
        }

    }

    &-data {
        @include stack-spacing(large);
        display: flex;
        flex-direction: column;
        row-gap: var(--sp-large);
    }

    .dateBadge,
    .metadataList {
        @include stack-spacing(0);
    }

}
  • URL: /components/raw/eventpageheader/_eventPageHeader.styles.scss
  • Filesystem Path: components/04-modules/pageHeader/eventPageHeader/_eventPageHeader.styles.scss
  • Size: 1.1 KB