Details

WIP

HTML
View
Context
Assets
Info
Notes


        
        <div class="details">
    <dl class="details__items">
        <div class="details__item">
            <dt class="details__item-label">10:00 – 10:20</dt>

            <dd class="details__item-text">
                <p class="paragraph"><strong>Begrüßung und Kurzvorstellung aller Unternehmen</strong></p>

            </dd>
        </div>
        <div class="details__item">
            <dt class="details__item-label">10:20 – 10:40</dt>

            <dd class="details__item-text">
                <p class="paragraph"><strong>Cowen:</strong> M&amp;A – Where Private Equity meets Entrepreneurship</p>
                <p class="paragraph"><strong>zeb:</strong> Inside zeb – Einblicke in die Unternehmensberatung im Bereich Financial Services</p>

            </dd>
        </div>
        <div class="details__item">
            <dt class="details__item-label">10:40 – 11:00</dt>

            <dd class="details__item-text">
                <p class="paragraph"><strong>EY:</strong> Digitalisierung</p>
                <p class="paragraph"><strong>KfW IPEX-Bank:</strong> Export- und Projektfinanzierung in bewegten Märkten: Ein Blick in die Praxis nachhaltigen Bankings</p>

            </dd>
        </div>
        <div class="details__item details__item--highlight">
            <dt class="details__item-label">11:00 – 11:20</dt>

            <dd class="details__item-text">
                <p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>

            </dd>
        </div>
        <div class="details__item">
            <dt class="details__item-label">5. Mai<br />
                Bonn</dt>

            <dd class="details__item-text">
                <p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>

            </dd>
        </div>
        <div class="details__item details__item--overlay" aria-hidden="true" inert>
            <dt class="details__item-label">10. Mai<br />
                Saarbrücken</dt>

            <dd class="details__item-text">
                <p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>

            </dd>
        </div>
        <div class="details__item" hidden aria-hidden="true" inert>
            <dt class="details__item-label">20. Mai<br />
                Bonn</dt>

            <dd class="details__item-text">
                <p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>

            </dd>
        </div>
        <div class="details__item" hidden aria-hidden="true" inert>
            <dt class="details__item-label">23. Mai<br />
                Darmstadt</dt>

            <dd class="details__item-text">
                <p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>

            </dd>
        </div>
    </dl>

    <div class="details__overlay has-overlay-link">
        <button class="button u-underline u-overlay-link details__button" type="button">Alles anzeigen</button>
    </div>
</div>


        {% set visibleItems = visibleItems ?? false -%}

<div {{ html_attributes({
  id: id ?? false,
  class: {
    'details': true,
    'details--no-wrapping': noWrapping ?? false,
  },
}, attrs ?? {}) }}>
  <dl class="details__items">
    {% for item in items %}
      <div {{ html_attributes({
        class: {
          'details__item': true,
          'details__item--overlay': visibleItems and loop.index == visibleItems + 1,
          'details__item--highlight': item.highlight ?? false,
        },
        hidden: visibleItems and loop.index > visibleItems + 1,
        'aria-hidden': visibleItems and loop.index >= visibleItems + 1 ? 'true',
        inert: visibleItems and loop.index >= visibleItems + 1,
      }) }}>
        <dt class="details__item-label">
          {{- item.label | nl2br | breakerize | make_efellows_non_breakable -}}
        </dt>

        <dd class="details__item-text">
          {{ item.text | componentize }}
        </dd>
      </div>
    {% endfor %}
  </dl>

  {% if visibleItems and items|length > visibleItems %}
    <div class="details__overlay has-overlay-link">
      {% include '@button' with {
        attrs: {
          class: 'details__button',
        },
        text: 'Show all' | t('site'),
        overlay: true,
      } %}
    </div>
  {% endif %}
</div>


        
            
            {
  "visibleItems": 5,
  "items": [
    {
      "label": "10:00 – 10:20",
      "text": "<p><strong>Begrüßung und Kurzvorstellung aller Unternehmen</strong></p>\n"
    },
    {
      "label": "10:20 – 10:40",
      "text": "<p><strong>Cowen:</strong> M&A – Where Private Equity meets Entrepreneurship</p>\n<p><strong>zeb:</strong> Inside zeb – Einblicke in die Unternehmensberatung im Bereich Financial Services</p>\n"
    },
    {
      "label": "10:40 – 11:00",
      "text": "<p><strong>EY:</strong> Digitalisierung</p>\n<p><strong>KfW IPEX-Bank:</strong> Export- und Projektfinanzierung in bewegten Märkten: Ein Blick in die Praxis nachhaltigen Bankings</p>\n"
    },
    {
      "label": "11:00 – 11:20",
      "highlight": true,
      "text": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n"
    },
    {
      "label": "5. Mai\n Bonn",
      "text": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n"
    },
    {
      "label": "10. Mai\n Saarbrücken",
      "text": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n"
    },
    {
      "label": "20. Mai\n Bonn",
      "text": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n"
    },
    {
      "label": "23. Mai\n Darmstadt",
      "text": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n"
    }
  ]
}

File:

Content:


                                :root {
  --details-background-color: var(--color-cyan-light);
  --details-highlight-background-color: var(--color-orange);
  --details-overlay-height: 25rem;
  --details-font-size: inherit;
}

.details {
  position: relative;
}

.details__items {
  font-size: var(--details-font-size);

  @include mq($until: m) {
    border-inline-start: 3px solid var(--details-background-color);
  }
}

.details__item {
  position: relative;

  &[hidden] {
    display: none;
  }

  @include mq($from: m) {
    display: grid;
    grid-template-columns: 25rem 1fr;
    position: relative;

    &::after {
      background-color: var(--details-background-color);
      block-size: 3px;
      content: '';
      display: block;
      inline-size: 100%;
      inset-block-end: 0;
      inset-inline-start: 0;
      mix-blend-mode: multiply;
      position: absolute;
    }
  }
}

.details__item--overlay {
  block-size: var(--details-overlay-height);
  overflow: hidden;

  &::before {
    background-image: linear-gradient(180deg, transparent 0%, var(--color-white) 75%);
    content: '';
    display: block;
    inset: 0;
    position: absolute;
    z-index: 1;
  }
}

.details__item-label,
.details__item-text {
  @include use-responsive-sizing(padding-block, responsive-map(xs 1.5rem, xl 3rem));
  @include use-responsive-sizing(padding-inline, responsive-map(xs 1.5rem, xl 4rem));
}

.details__item-label {
  background-color: var(--details-background-color);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);

  .details__item--highlight & {
    background-color: var(--details-highlight-background-color);
  }

  .details--no-wrapping & {
    white-space: pre;
  }

  @include mq($from: m) {
    flex-shrink: 0;
  }
}

.details__item-text {
  --bullet-list-indent: -0.5rem;

  * + * {
    margin-block-start: 1em;
  }
}

.details__overlay {
  align-items: flex-end;
  display: flex;
  inline-size: 100%;
  inset-block-end: 0;
  inset-inline-start: 0;
  justify-content: center;
  min-block-size: var(--details-overlay-height);
  position: absolute;
  z-index: 2;
}

URL: /components/raw/details/details.scss
Filesystem Path: src/components/2-molecules/details/details.scss
Size: 2.1 KB

Content:


                                import { on } from 'delegated-events';
import invisibleFocus from '../../../javascripts/utils/invisibleFocus';

on('click', 'button.details__button', (event) => {
  event.preventDefault();

  const { currentTarget: $button } = event;
  const $container = $button.closest('.details');

  $container
    ?.querySelectorAll<HTMLDivElement>('.details__item[aria-hidden="true"]')
    .forEach(($item, index) => {
      $item.removeAttribute('aria-hidden');
      $item.removeAttribute('inert');
      $item.hidden = false;
      $item.classList.remove('details__item--overlay');

      if (index === 0) {
        invisibleFocus($item, {}, true);
      }
    });

  $button.closest('.details__overlay')?.remove();
});

URL: /components/raw/details/details.ts
Filesystem Path: src/components/2-molecules/details/details.ts
Size: 712 Bytes

Handle: @details
Preview:
- With layout
- Component only
Filesystem Path: src/components/2-molecules/details/details.twig
References (1): @button
Referenced by (1): @event-agenda

No notes defined.