<div class="event-agenda">
    <div class="event-agenda__headline">
        <h1 class="headline headline--2"><span class="headline__text">Meine Event-Agenda</span></h1>
    </div>

    <div class="event-agenda__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.</p>
        <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.</p>

    </div>

    <div class="event-agenda__button">
        <a class="button u-underline" href="#">Zum Meeiting</a>
    </div>

    <div class="event-agenda__alert">
        <div class="alert alert--info" role="alert">
            <svg class="icon icon--info-alt alert__icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#info-alt"></use>
            </svg>
            <p class="alert__text"><a class="link link--internal" href="#"><span class="link__text u-underline">Logge dich hier ein</span></a>, um dein persönliches Programm zu sehen.</p>
        </div>
    </div>

    <div class="event-agenda__days">
        <div class="event-agenda__day">
            <div class="event-agenda__day-headline">
                <h2 class="headline headline--3"><span class="headline__text">Programm am Freitag, 04.08.2024</span></h2>
            </div>

            <div class="event-agenda__day-details">
                <div class="details details--no-wrapping">
                    <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">
                            <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">
                            <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">
                            <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>
            </div>
        </div>
        <div class="event-agenda__day">
            <div class="event-agenda__day-headline">
                <h2 class="headline headline--3"><span class="headline__text">Programm am Freitag, 04.08.2024</span></h2>
            </div>

            <div class="event-agenda__day-details">
                <div class="details details--no-wrapping">
                    <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">
                            <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">
                            <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">
                            <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>
            </div>
        </div>
    </div>
</div>
{% set level = level ??? 1 %}

<div {{ html_attributes({
  id: id ?? false,
  class: 'event-agenda',
}, attrs ?? {}) }}>
  {% if headline|default %}
    <div class="event-agenda__headline">
      {% include '@headline' with headline | merge({
        level: level,
        size: 2,
      }) only %}
    </div>
  {% endif %}

  {% if text|default %}
    <div class="event-agenda__text">
      {{ text | componentize }}
    </div>
  {% endif %}

  {% if button|default %}
    <div class="event-agenda__button">
      {% include '@button' with button only %}
    </div>
  {% endif %}

  {% if alert|default %}
    <div class="event-agenda__alert">
      {% include '@alert' with alert only %}
    </div>
  {% endif %}

  {% if days|default %}
    <div class="event-agenda__days">
      {% for day in days %}
        <div class="event-agenda__day">
          {% if day.headline|default %}
            <div class="event-agenda__day-headline">
              {% include '@headline' with day.headline | merge({
                level: level + 1,
                size: 3,
              }) only %}
            </div>
          {% endif %}

          {% if day.details|default %}
            <div class="event-agenda__day-details">
              {% include '@details' with day.details | merge({
                visibleItems: false,
                noWrapping: true,
              }) only %}
            </div>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  {% endif %}
</div>
{
  "headline": {
    "text": "Meine Event-Agenda"
  },
  "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.</p>\n<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.</p>\n",
  "button": {
    "text": "Zum Meeiting",
    "link": "#"
  },
  "alert": {
    "type": "info",
    "text": "<a href=\"#\">Logge dich hier ein</a>, um dein persönliches Programm zu sehen."
  },
  "days": [
    {
      "headline": {
        "text": "Programm am Freitag, 04.08.2024"
      },
      "details": {
        "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"
          }
        ]
      }
    },
    {
      "headline": {
        "text": "Programm am Freitag, 04.08.2024"
      },
      "details": {
        "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"
          }
        ]
      }
    }
  ]
}
  • Content:
    .event-agenda {
      display: grid;
      row-gap: 2.5rem;
    }
    
    .event-agenda__text {
      line-height: var(--line-height-body);
    
      > * + * {
        margin-block-start: 1.5rem;
      }
    }
    
    .event-agenda__button {
      &:not(:last-child) {
        margin-block-end: 1rem;
      }
    }
    
    .event-agenda__days {
      display: grid;
      row-gap: 5rem;
    
      &:not(:first-child) {
        margin-block-start: 2rem;
      }
    }
    
    .event-agenda__day {
      display: grid;
      row-gap: 2.5rem;
    }
    
  • URL: /components/raw/event-agenda/event-agenda.scss
  • Filesystem Path: src/components/3-organisms/event-agenda/event-agenda.scss
  • Size: 428 Bytes

No notes defined.