@e-fellows/website-2022

Seite: Artikel 

<div id="page-82546-61549" class="page">
    <div class="page__stage">
        <header id="page-82546-61549-stage" class="stage">
            <div class="stage__inner">
                <div class="stage__content">
                    <div class="stage__breadcrumb">
                        <nav class="breadcrumb" aria-label="Deine aktuelle Position:">
                            <ul class="breadcrumb__list u-line-clamp">
                                <li class="breadcrumb__item"><a class="breadcrumb__link u-underline" href="#"><span class="breadcrumb__icon"><svg class="icon icon--home" viewBox="0 0 200 200" aria-hidden="true">
                                                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#home"></use>
                                            </svg></span><span class="breadcrumb__link-text u-hidden-visually">Startseite</span></a></li>
                                <li class="breadcrumb__item"><a class="breadcrumb__link u-underline" href="#"><span class="breadcrumb__link-text">Unterseite</span></a></li>
                                <li class="breadcrumb__item"><a class="breadcrumb__link u-underline" aria-current="page"><span class="breadcrumb__link-text">Artikel</span></a></li>
                            </ul>

                            <script type="application/ld+json">
                                {
                                    "@context": "https:\/\/schema.org",
                                    "@type": "BreadcrumbList",
                                    "itemListElement": [{
                                            "@type": "ListItem",
                                            "position": 1,
                                            "name": "Startseite",
                                            "item": "#"
                                        },
                                        {
                                            "@type": "ListItem",
                                            "position": 2,
                                            "name": "Unterseite",
                                            "item": "#"
                                        },
                                        {
                                            "@type": "ListItem",
                                            "position": 3,
                                            "name": "Artikel",
                                            "item": "#"
                                        }
                                    ]
                                }
                            </script>
                        </nav>
                    </div>

                    <div class="stage__text-container">
                        <div class="stage__headline">
                            <h2 class="headline headline--2"><span class="headline__text u-line-clamp">Titel mit etwa 75 Zeichen auf maximal vier Zeilen, danach wird ausgepunktet</span></h2>
                        </div>

                    </div>

                </div>

            </div>
        </header>
    </div>

    <div class="page__content">
        <div class="page__blocks">

            <div class="page__action-bar">
                <div class="action-bar">
                    <ul class="action-bar__buttons" role="list">
                        <li class="action-bar__item">
                            <button class="action-bar__button js-share" data-title="Das ist ein Testtitel">
                                <svg class="icon icon--share action-bar__icon" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#share"></use>
                                </svg>
                                <span class="action-bar__text u-underline">Teilen</span>

                                <span class="action-bar__loading">
                                    <div class="loading"></div>
                                </span>
                            </button>
                        </li>
                        <li class="action-bar__item">
                            <button class="action-bar__button">
                                <svg class="icon icon--bookmark-outline action-bar__icon" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#bookmark-outline"></use>
                                </svg>
                                <span class="action-bar__text u-underline">Merken</span>

                                <span class="action-bar__loading">
                                    <div class="loading"></div>
                                </span>
                            </button>
                        </li>
                        <li class="action-bar__item">
                            <a class="action-bar__button" href="#">
                                <svg class="icon icon--xing action-bar__icon" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#xing"></use>
                                </svg>
                                <span class="action-bar__text u-underline">Kalender</span>

                                <span class="action-bar__loading">
                                    <div class="loading"></div>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="page__block page__block--intro">

                <p class="paragraph">Hallo Welt</p>

            </div>

            <div class="page__block">

                <p class="paragraph">Hallo Welt</p>

            </div>

            <div class="page__clearfix"></div>

            <div class="page__block page__block--wide">

                <p class="paragraph">Hallo Welt</p>

            </div>

            <div class="page__block page__block--full">

                <p class="paragraph">Hallo Welt</p>

            </div>
        </div>

    </div>
</div>
 
{% set id = id ??? html_id('page') %}
{% set level = level ??? 2 -%}

<div {{ html_attributes({
  id: id,
  class: 'page',
}, attrs ?? {}) }}>
  {% if stage|default %}
    <div class="page__stage">
      {% include stage.use with stage.configuration | merge({
        id: 'stage' | namespaceInputId(id),
        level: stage.configuration.level ?? level,
      }) only %}
    </div>
  {% endif %}

  <div class="page__content">
    <div class="page__blocks">
      {% set clearfix = false %}

      {% if actionBar|default and actionBar.items|length > 0 %}
        <div class="page__action-bar">
          {% include '@action-bar' with actionBar only %}
        </div>
      {% endif %}

      {% if date|default and date is instance of('DateTimeInterface') %}
        <time class="page__date" datetime="{{ date | date('Y-m-d') }}">{{ date | date('d. F Y') }}</time>
      {% elseif date|default %}
        <div class="page__date">{{ date }}</div>
      {% endif %}

      {% if introBlock|default %}
        <div {{ html_attributes({
          id: introBlock.id ?? false,
          class: 'page__block page__block--intro',
        }, introBlock.attributes ?? {}) }}>
          {{ introBlock.content | raw }}
        </div>
      {% endif %}

      {% for block in blocks|default([]) %}
        {% set spacing = block.spacing ?? false %}
        {% set halfFull = block.halfFull ?? false %}
        {% set full = block.full ?? false %}
        {% set wide = block.wide ?? false %}
        {% set wider = block.wider ?? false %}
        {% set breaker = block.breaker ?? false %}
        {% set floating = block.floating ?? false %}
        {% set highlight = block.highlight ?? false %}

        {% if (halfFull or full or wide or wider or breaker or highlight) and actionBar.items|default|length > 0 and not clearfix %}
          <div class="page__clearfix"></div>
          {% set clearfix = true %}
        {% endif %}

        <div {{ html_attributes({
          id: block.id ?? false,
          class: {
            'page__block': true,
            'page__block--spacing': spacing,
            'page__block--half-full': halfFull,
            'page__block--full': full,
            'page__block--wide': wide,
            'page__block--wider': wider,
            'page__block--breaker': breaker,
            'page__block--floating': floating,
            'page__block--highlight': highlight,
          },
        }, block.attributes ?? {}) }}>
          {{ block.content | raw }}
        </div>
      {% endfor %}
    </div>

    {% if source|default %}
      <div class="page__blocks page__blocks--outro">
        {% include '@small-print' with {
          content: "<p>#{source}</p>",
        } only %}
      </div>
    {% endif %}
  </div>
</div>
 
{
  "stage": {
    "use": "@stage",
    "configuration": {
      "breadcrumb": {
        "items": [
          {
            "text": "Startseite",
            "link": "#"
          },
          {
            "text": "Unterseite",
            "link": "#"
          },
          {
            "text": "Artikel",
            "link": "#"
          }
        ]
      },
      "headline": {
        "text": "Titel mit etwa 75 Zeichen auf maximal vier Zeilen, danach wird ausgepunktet"
      }
    }
  },
  "actionBar": {
    "items": [
      {
        "icon": "share",
        "text": "Teilen",
        "attrs": {
          "class": "js-share",
          "data-title": "Das ist ein Testtitel"
        }
      },
      {
        "icon": "bookmark-outline",
        "text": "Merken"
      },
      {
        "icon": "xing",
        "text": "Kalender",
        "link": "#"
      }
    ]
  },
  "introBlock": {
    "content": "!twig\n{% apply componentize %}\n  <p>Hallo Welt</p>\n{% endapply %}\n"
  },
  "blocks": [
    {
      "content": "!twig\n{% apply componentize %}\n  <p>Hallo Welt</p>\n{% endapply %}\n"
    },
    {
      "wide": true,
      "content": "!twig\n{% apply componentize %}\n  <p>Hallo Welt</p>\n{% endapply %}\n"
    },
    {
      "full": true,
      "content": "!twig\n{% apply componentize %}\n  <p>Hallo Welt</p>\n{% endapply %}\n"
    }
  ]
}
  • Content: 
    @use 'sass:map';

:root {
  --page-block-spacing: 2rem;

  @include use-responsive-sizing(--page-block-spacing-wide, responsive-map(xs 3.6rem, xl 5.6rem));
  @include use-responsive-sizing(--page-block-spacing-full, responsive-map(xs 4.2rem, xl 7.2rem));
  @include use-responsive-sizing(--page-content-padding, responsive-map(xs 4rem, xl 6rem));
}

.page__content {
  padding-block: var(--page-content-padding);

  @include use-container();
}

.page__blocks {
  clear: both;
  margin-inline: auto;

  @include use-responsive-sizing(width, (
    m: column-width(m, 8),
    l: column-width(l, 8),
    xl: column-width(xl, 6),
  ));
  @include use-responsive-sizing(max-width, (
    xs: 50rem,
    m: none,
  ));
  @include use-responsive-sizing(--infobox-padding-inline, (
    xs: map.get($inner-container-padding, xs),
    s: map.get($inner-container-padding, s),
    m: 0,
  ));
  @include use-responsive-sizing(--infobox-content-width, (
    m: column-width(m, 8),
    l: column-width(l, 8, $number-of-columns: 10),
    xl: column-width(xl, 6, $number-of-columns: 10),
  ));
  @include use-responsive-sizing(--video-gallery-column-width, (
    l: column-width(l, 3),
    xl: column-width(xl, 3),
  ));
}

.page__blocks--outro {
  margin-block-start: var(--page-block-spacing-wide);
}

.page__action-bar {
  @include use-responsive-sizing(margin-bottom, (xs: calc(var(--page-block-spacing) * 2), m: 0));
  @include use-responsive-sizing(width, (
    m: column-width(m, 2, $number-of-columns: 8),
    l: column-width(l, 2, $number-of-columns: 8),
    xl: column-width(xl, 2, $number-of-columns: 6),
  ));
  @include use-responsive-sizing(margin-left, (
    m: column-offset(m, 2, $negative: true, $number-of-columns: 8),
    l: column-offset(l, 2, $negative: true, $number-of-columns: 8),
    xl: column-offset(xl, 3, $negative: true, $number-of-columns: 6),
  ));

  @include mq($from: m) {
    --action-bar-button-padding: 2rem 1rem;
    --action-bar-button-width: 100%;

    float: left;
  }
}

.page__date {
  display: block;
  font-size: 2rem;
  font-style: italic;
  margin-block-end: var(--page-block-spacing);
  text-transform: uppercase;
}

.page__clearfix {
  @include use-clearfix();
}

.page__block {
  margin-block-end: var(--page-block-spacing);

  .page__blocks:first-child &:first-child,
  .page__blocks:first-child &:first-child > *:first-child {
    margin-block-start: 0;
  }

  .page__blocks:last-child &:last-child {
    margin-block-end: 0;
  }

  > * + * {
    margin-block-start: var(--page-block-spacing);
  }

  > .headline {
    margin-block-start: calc(var(--page-block-spacing) * 2);
  }
}

.page__block--intro > .paragraph:first-child {
  font-weight: var(--font-weight-semibold);
  margin-block-end: calc(var(--page-block-spacing) * 2);

  @include use-responsive-sizing(font-size, (xs: 2.2rem, m: 2.4rem));
}

.page__block--wide {
  margin-block: var(--page-block-spacing-wide);

  @include use-responsive-sizing(margin-left margin-right, (
    xs: map.get($inner-container-padding, xs) * -1,
    m: column-offset(m, -1, $number-of-columns: 8),
    l: column-offset(l, -1, $number-of-columns: 8),
    xl: column-offset(xl, -1, $number-of-columns: 6),
  ));

  @include mq($until: m) {
    --list-pagination-padding-inline: #{map.get($inner-container-padding, xs)};
    --list-search-results-padding-inline: #{map.get($inner-container-padding, xs)};
    --list-teasers-padding-inline: #{map.get($inner-container-padding, xs)};
    --form-padding-inline: #{map.get($inner-container-padding, xs)};
  }
}

.page__block--wider {
  margin-block: var(--page-block-spacing-wide);

  @include use-responsive-sizing(margin-left margin-right, (
    xs: map.get($inner-container-padding, xs) * -1,
    m: column-offset(m, -1, $number-of-columns: 8),
    l: column-offset(l, -1, $number-of-columns: 8),
    xl: column-offset(xl, -2, $number-of-columns: 6),
  ));

  @include mq($until: m) {
    --extended-table-padding-inline: #{map.get($inner-container-padding, xs)};
  }
}

.page__block--spacing {
  margin-block: var(--page-block-spacing-wide);
}

.page__block--half-full {
  margin-block: var(--page-block-spacing-wide);

  @include use-responsive-sizing(margin-inline, (
    m: column-offset(m, -1, $number-of-columns: 8),
    l: column-offset(l, -1, $number-of-columns: 8),
    xl: column-offset(xl, -2, $number-of-columns: 6),
  ));
}

.page__block--full {
  margin-block: var(--page-block-spacing-full);

  @include use-responsive-sizing(margin-left margin-right, (
    m: column-offset(m, -2, $number-of-columns: 8),
    l: column-offset(l, -2, $number-of-columns: 8),
    xl: column-offset(xl, -3, $number-of-columns: 6),
  ));
}

.page__block--highlight {
  padding-block: var(--page-block-spacing-wide);
  position: relative;

  .page__blocks:first-child &:first-child {
    margin-block-start: calc(var(--page-content-padding) * -1);
  }

  &::before {
    background-color: var(--color-orange-light);
    content: '';
    inset: 0;
    margin-inline: calc((100vw - 100%) / -2);
    position: absolute;
    z-index: -1;
  }
}

.page__block--breaker {
  margin-block: var(--page-block-spacing-full);

  & + & {
    margin-block-start: calc(var(--page-block-spacing-full) * -1 + 0.5rem);
  }

  .page__blocks:first-child &:first-child {
    margin-block-start: calc(var(--page-content-padding) * -1 + 0.5rem);
  }

  @include use-break-out();
}

.page__block--floating {
  display: contents;
}
  • URL: /components/raw/page/page.scss
  • Filesystem Path: src/components/3-organisms/page/page.scss
  • Size: 5.4 KB

No notes defined.