PSI Software SE Design Library

Trends Page Header: With Figure

No notes defined.

<header class="trendsPageHeader">

    <div class="trendsPageHeader-figure">
        <figure class="figure" style="">

            <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />

            <figcaption class="figure-caption"><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>

        </figure>

    </div>

    <div class="trendsPageHeader-text">

        <h1 class="trendsPageHeader-heading">

            <span class="kicker">
                Thema der Seite
            </span>

            <span class="trendsPageHeader-title">Ich bin der Titel der Seite</span>
        </h1>

        <div class="trendsPageHeader-description">
            <p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>

        </div>

    </div>

</header>
 
<header class="trendsPageHeader{{#modifier}} {{.}}{{/modifier}}">

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

    <div class="trendsPageHeader-text">

        <h1 class="trendsPageHeader-heading">
            {{#if kicker}}
                {{#unless kicker.content}}{{#unless kicker.items}}{{!-- Legacy --}}<strong class="trendsPageHeader-kicker">{{{kicker}}}</strong><span class="is-visually-hidden">:</span>{{/unless}}{{/unless}}
                {{#if kicker.content}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
                {{#if kicker.items}}{{#kicker}}{{render '@kicker' (contextData '@teasercard' this) merge=true}}{{/kicker}}{{/if}}
            {{/if}}
            {{#title}}<span class="trendsPageHeader-title">{{{.}}}</span>{{/title}}
        </h1>

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

    </div>

        {{#byline}}
    <div class="trendsPageHeader-byline">

        {{#image}}
            <div class="trendsPageHeader-byline-image" style="background-image: url({{path src}});"></div>
        {{/image}}

            {{#unless persondata}}
        <div class="trendsPageHeader-byline-text">
            <strong class="trendsPageHeader-byline-name">{{{name}}}</strong>{{#jobtitle}} <span class="trendsPageHeader-byline-jobtitle">{{{.}}}</span>{{/jobtitle}}
        </div>
            {{/unless}}

        {{#persondata}}
            {{render '@persondata' (contextData '@trendspageheader' this) merge=true}}
        {{/persondata}}

    </div>
        {{/byline}}

    {{#interactionbar}}
        {{render '@interactionbar' (contextData '@trendspageheader' this) merge=true}}
    {{/interactionbar}}

        {{#taggroup}}
    <div class="trendsPageHeader-tags">
        {{render '@taggroup' (contextData '@trendspageheader' this) merge=true}}
    </div>
        {{/taggroup}}

</header>
 
{
  "kicker": {
    "content": "Thema der Seite"
  },
  "title": "Ich bin der Titel der Seite",
  "description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
  "figure": {
    "src": "/images/placeholder/dummy-image.jpg",
    "alt": "Alternative Bildbeschreibung",
    "caption": null,
    "copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
  }
}
  • Content: 
    @import "_trendsPageHeader.settings";
@import "_trendsPageHeader.styles";

// Legacy support

.blogPageHeader {
    @extend .trendsPageHeader;

    &-figure {
        @extend .trendsPageHeader-figure;
    }

    &-text {
        @extend .trendsPageHeader-text;
    }

    &-heading {
        @extend .trendsPageHeader-heading;
    }

    &-kicker {
        @extend .trendsPageHeader-kicker;
    }

    &-title {
        @extend .trendsPageHeader-title;
    }

    &-description {
        @extend .trendsPageHeader-description;
    }

    &-byline {
        @extend .trendsPageHeader-byline;

        &-image {
            @extend .trendsPageHeader-byline-image;
        }

        &-jobtitle {
            @extend .trendsPageHeader-byline-jobtitle;
        }

        &-name {
            @extend .trendsPageHeader-byline-name;
        }

    }

    &-tags {
        @extend .trendsPageHeader-tags;
    }

}
  • URL: /components/raw/trendspageheader/_trendsPageHeader.scss
  • Filesystem Path: components/04-modules/pageHeader/trendsPageHeader/_trendsPageHeader.scss
  • Size: 908 Bytes
  • Content: 
    $trendsPageHeader_kicker-styles: (
    text-size: default,
    font-weight: $_font-weight__bold,
    text-transform: uppercase,
) !default;

$trendsPageHeader_title-styles: (
) !default;

$trendsPageHeader_description-styles: (
    stack-spacing: default,
    text-size: large,
) !default;
  • URL: /components/raw/trendspageheader/_trendsPageHeader.settings.scss
  • Filesystem Path: components/04-modules/pageHeader/trendsPageHeader/_trendsPageHeader.settings.scss
  • Size: 290 Bytes
  • Content: 
    .trendsPageHeader {
    @include stack-spacing(component);

    .navigationInset + .mainContent &:first-child {
        @include stack-spacing();
    }

    .kicker {
        @extend %kicker--large;
        @include stack-spacing(0);
    }

    &-figure {
        @extend %pageHeader-figure;

        img {
            border-radius: var(--br);
        }

        & > * {
            @include stack-spacing(0);
        }

    }

    &-figure + &-text {
        @include stack-spacing();
    }

    &-heading {
        @include stack-spacing(0);
    }

    &-kicker {
        display: block;
        @include styles($trendsPageHeader_kicker-styles);
    }

    &-title {
        display: block;

        @extend %heading--page-title;
        @include stack-spacing(0);

        @include styles($trendsPageHeader_title-styles);
    }

    &-kicker ~ &-title,
    .kicker ~ &-title {
        @include stack-spacing(small);
    }

    &-description {
        @include styles($trendsPageHeader_description-styles);

        > *:first-child {
            @include stack-spacing(0);
        }
    }

    &-byline {
        $image_size: 48px;

        @include stack-spacing(component);

        display: flex;
        align-items: center;
        column-gap: 1rem;

        &-image {
            display: block;

            width: $image_size;
            height: $image_size;

            background-size: cover;
            border-radius: 50%;
        }

        &-name,
        &-jobtitle {
            display: block;
            line-height: 1.4;
        }

        &-image + &-name {
            @include stack-spacing(small);
        }

        .personData {
            @include stack-spacing(0);
        }

    }

    @include only-on-desktop(){
        $figure_aspect-ratio: math.div(16, 9);
        $figure_indent-top: $_stack-spacing--component;
        $figure_indent-left: get-columns-indent(2);
        $figure_indent-right: (1 * $_grid-gutter);
        $text_column-span: 6;

        @include stack-spacing(component);

        &-figure {
            position: relative;
            top: auto;
            left: auto;

            min-width: calc(#{$_page_content_max-width} - #{$figure_indent-left});
            width: calc((100% + .5 * (100vw - 100%)) - #{$figure_indent-left} - #{$figure_indent-right});
            max-width: calc((100% + .5 * (#{$_page_max-width} - 100%)) - #{$figure_indent-left} - #{$figure_indent-right});

            margin-left: $figure_indent-left;

            &::before { // Spacer for Text
                content: "";
                display: block;

                width: 0;
                float: left;
                padding-bottom: math.percentage(.67 * math.div(1, $figure_aspect-ratio));
            }

            .figure {
                z-index: -1;
                position: absolute;
                min-width: 100%;
                height: auto;
            }

            img {
                aspect-ratio: $figure_aspect-ratio;
                object-fit: cover;
            }

        }

        &-text,
        &-byline,
        &-tags,
        .interactionBar {
            width: get-columns-width(8);
            margin-left: auto;
            margin-right: auto;
        }

        &::after { // Clearfix for image spacer
            content: "";

            display: block;
            clear: both;
        }

        &-byline {
            $image_size: 112px;

            clear: both;

            @include stack-spacing(0);
            @include stack-spacing(default, padding-top);

            &-image {
                width: $image_size;
                height: $image_size;
            }

        }

        &-figure ~ &-text {
            @include stack-spacing(0);

            width: calc((100% + #{$_grid-gutter}) * #{math.div($text_column-span, 12)} + #{$_grid-gutter});
            margin-left: (-1 * $_grid-gutter);
            padding: $_grid-gutter;

            background-color: $_glass_background-color;
            backdrop-filter: $_glass_backdrop-filter;

            clear: left;

            @include border-radius();
        }

        &-figure ~ &-byline,
        &-figure ~ &-tags {
            width: auto;
            margin-left: get-columns-indent(2);
        }

    }

    @include only-on-small-desktop(){

        &-figure {
            width: get-columns-width(10);
            min-width: 0;
        }

    }

}
  • URL: /components/raw/trendspageheader/_trendsPageHeader.styles.scss
  • Filesystem Path: components/04-modules/pageHeader/trendsPageHeader/_trendsPageHeader.styles.scss
  • Size: 4.4 KB