Article: Artikel Event

Design

HTML
View
Context
Assets
Info
Notes


        
        <article class="article article--event">
    <div class="article__inner">
        <div class="article__block article__block--wide">
            <div class="header-event">
                <div class="header-event__back"><a class="link link--back" href="#">Zur Übersicht</a></div>
                <div class="header-event__headline"><span class="headline-kicker">Konferenzen<span class="u-hidden-visually">: </span></span>
                    <h1 class="headline headline--1">RDA Deutschland Tagung 2021</h1>
                </div>
                <div class="header-event__details">
                    <div class="header-event__details__item"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-calendar"></use>
                        </svg><span class="header-event__details__item__text">Fr, 22.02. – Mo, 26.02.2021 · 15:00 – 17:00 Uhr</span></div>
                    <div class="header-event__details__item"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-location"></use>
                        </svg><span class="header-event__details__item__text">Online</span></div><a class="header-event__details__item header-event__details__item--a" href="#"><svg class="icon icon--calendar-check" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-calendar-check"></use>
                        </svg><span class="header-event__details__item__text">Kalendereintrag</span></a>
                </div>
                <div class="header-event__button"><a class="button button--primary" href="#"><span class="button__inner"><svg class="icon icon--ticket" viewBox="0 0 200 200" role="presentation">
                                <use xlink:href="#icon-ticket"></use>
                            </svg><span class="button__text">zur Anmeldung</span></span></a></div>
            </div>
        </div>
        <div class="article__block article__block--wide">
            <div class="grid grid--two-columns">
                <div class="grid__row">
                    <div class="grid__col grid__col--1">
                        <div class="grid__item">
                            <div class="richtext">
                                <p class="bodytext">Die Research <a href="#" class="link">Data Alliance (RDA)</a> hat zum Ziel, dass Forschende und Innovatoren Daten über Technologien, Disziplinen und Länder hinweg austauschen können, um so dazu beizutragen, die großen Herausforderungen der Gesellschaft anzugehen. Dazu baut RDA die sozialen und technischen Brücken, die den offenen Austausch und die Wiederverwendung von Daten ermöglichen.</p>
                                <p class="bodytext">Die RDA Deutschland Tagung 2021 wird gemeinsam vom Verein RDA DE und dem Helmholtz Open Science Büro veranstaltet.</p>
                                <p class="bodytext">Bitte registrieren Sie sich, um an der RDA Deutschland Tagung 2021 teilzunehmen.</p>
                                <p class="bodytext"><a href="#" target="_blank" class="link link--external">Weitere Informationen und das Programm</a><br /><a href="#" target="_blank" class="link link--external">Zur Anmeldung</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="grid__col grid__col--2">
                        <div class="grid__item">
                            <figure class="figure" aria-labelledby="figure-9d58e2-label">
                                <div class="figure__media">
                                    <div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="500" height="500" src="https://via.placeholder.com/500x500/A0A0A6/FFFFFF.png?text=500x500" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="500" height="500" data-src="https://via.placeholder.com/500x500/A0A0A6/FFFFFF.png?text=500x500" /></div>
                                </div>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="three-teaser three-teaser--bg-image three-teaser--full-width">
                <div class="three-teaser__inner">
                    <div class="three-teaser__headline">
                        <h2 class="headline headline--module-2">Course Catalog</h2>
                    </div>
                    <div class="three-teaser__text">Die nächsten Data-Science-Events und -Trainings in der Helmholtz-Gemeinschaft.</div>
                    <div class="three-teaser__items"><a class="three-teaser__item" href="#">
                            <div class="three-teaser__item__inner">
                                <div class="three-teaser__item__kicker">Hackaton</div>
                                <div class="three-teaser__item__headline">
                                    <h3 class="headline headline--3">Ich bin die Headline Lorem ipsum dolor sit amet consectetur</h3>
                                </div>
                                <div class="three-teaser__item__date"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
                                        <use xlink:href="#icon-calendar"></use>
                                    </svg><span class="three-teaser__item__date__text">20.01.2022</span></div>
                            </div>
                        </a><a class="three-teaser__item" href="#">
                            <div class="three-teaser__item__inner">
                                <div class="three-teaser__item__kicker">Workshop</div>
                                <div class="three-teaser__item__headline">
                                    <h3 class="headline headline--3">Ich bin die Headline Lorem ipsum dolor sit amet consectetur</h3>
                                </div>
                                <div class="three-teaser__item__date"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
                                        <use xlink:href="#icon-calendar"></use>
                                    </svg><span class="three-teaser__item__date__text">20.01.2022</span></div>
                            </div>
                        </a><a class="three-teaser__item" href="#">
                            <div class="three-teaser__item__inner">
                                <div class="three-teaser__item__kicker">Workshop</div>
                                <div class="three-teaser__item__headline">
                                    <h3 class="headline headline--3">Ich bin die Headline Lorem ipsum dolor sit amet consectetur</h3>
                                </div>
                                <div class="three-teaser__item__date"><svg class="icon icon--calendar" viewBox="0 0 200 200" role="presentation">
                                        <use xlink:href="#icon-calendar"></use>
                                    </svg><span class="three-teaser__item__date__text">20.01.2022</span></div>
                            </div>
                        </a></div>
                    <div class="three-teaser__button"><a class="button button--primary" href="#"><span class="button__inner"><span class="button__text">Zum Course Catalog</span></span></a></div>
                </div>
            </div>
        </div>
    </div>
</article>


        #{tag || 'article'}.article(
  class=`article--${variant || 'default'}`
)&attributes(attr)
  .article__inner
    if blocks
      each block in blocks
        .article__block(
          class=classNames(
              block.wide && 'article__block--wide',
              block.shifted && 'article__block--shifted'
            )
          )
          +include(`@${block.use}`, block.settings || {})
    .section
      +include('@three-teaser--bg-image', {attr: {class: 'three-teaser--full-width'} })


        
            
            {
  "variant": "event",
  "blocks": [
    {
      "wide": true,
      "use": "header-event"
    },
    {
      "wide": true,
      "use": "grid--two-columns",
      "settings": {
        "cols": {
          "1": [
            {
              "use": "richtext",
              "settings": {
                "richtext": [
                  {
                    "p": "Die Research <a href=\"#\" class=\"link\">Data Alliance (RDA)</a> hat zum Ziel, dass Forschende und Innovatoren Daten über Technologien, Disziplinen und Länder hinweg austauschen können, um so dazu beizutragen, die großen Herausforderungen der Gesellschaft anzugehen. Dazu baut RDA die sozialen und technischen Brücken, die den offenen Austausch und die Wiederverwendung von Daten ermöglichen."
                  },
                  {
                    "p": "Die RDA Deutschland Tagung 2021 wird gemeinsam vom Verein RDA DE und dem Helmholtz Open Science Büro veranstaltet."
                  },
                  {
                    "p": "Bitte registrieren Sie sich, um an der RDA Deutschland Tagung 2021 teilzunehmen."
                  },
                  {
                    "p": "<a href=\"#\" target=\"_blank\" class=\"link link--external\">Weitere Informationen und das Programm</a><br /><a href=\"#\" target=\"_blank\" class=\"link link--external\">Zur Anmeldung</a>"
                  }
                ]
              }
            }
          ],
          "2": [
            {
              "use": "figure",
              "settings": {
                "image": {
                  "width": 500,
                  "height": 500
                }
              }
            }
          ]
        }
      }
    }
  ]
}

File:

Content:


                                .article__inner {
  margin: 0 auto;
  max-width: 144rem;
  padding: 0 1.5rem;

  @include mq($from: m) {
    padding: 0 3rem;
  }

  @include mq($from: xl) {
    padding: 0 9rem;
  }
}

.article__block {
  margin-bottom: 4rem;

  @include mq($from: m) {
    margin-bottom: 8rem;
  }

  @include mq($from: xl) {
    padding: 0 17%;
  }
}

.article__block--wide {
  @include mq($from: xl) {
    padding: 0 0 0 17%;
  }
}

.article__block--shifted {
  @include mq($from: xl) {
    padding: 0 17% 0 0;
  }
}

.article__block--wide .quote {
  @include mq($from: xl) {
    margin-left: -6rem;
  }
}

.article__block .quote--center {
  @include mq($from: m) {
    padding: 0 13%;
  }
}

.article__block .figure__caption {
  border-bottom: 1px solid $color-border-gray-light;
  padding-bottom: 1.5rem;
}

.article__block .grid .figure {
  @include mq($until: m) {
    max-width: 50rem;
  }
}

.article__block--wide > .gallery,
.article__block--wide > .figure {
  @include mq($from: xl) {
    .gallery__slides-frame {
      overflow: visible;
    }

    .figure__caption {
      bottom: 0;
      left: -20.2%;
      position: absolute;
      width: calc(20.2% - 4rem);
    }
  }
}

.article__block .logo-wall {
  padding: 3rem 0;
}

.article__block .grid--three-columns {
  max-width: 94rem;

  .grid__col {
    @include mq($until: m) {
      margin: 0 -1.5rem;

      &:not(:last-child) {
        border-bottom: 1px solid $color-border-gray-light;
        padding-bottom: 0;
      }
    }
  }
}

.article__block .grid--three-columns .microcard {
  @include mq($from: m) {
    height: 32rem;
  }

  @include mq($from: l) {
    height: 40rem;
  }
}

// stylelint-disable max-nesting-depth
.article__block .grid--three-columns .microcard--small.microcard--quickinfo {
  // stylelint-enable
  @include mq($from: m) {
    height: 32rem;
  }

  @include mq($from: l) {
    height: 25rem;
  }
}

// stylelint-disable max-nesting-depth
.article__block .grid--three-columns .microcard:not(.microcard--quickinfo) .microcard__headline {
  // stylelint-enable
  @include mq($from: m) {
    min-height: 4.9rem;
  }
}

.article__block .logo-wall {
  padding: 5rem 0;

  @include mq($from: m) {
    padding: 8rem 0;
  }
}

.article__block .logo-wall::before {
  background: #fff;
  bottom: 0;
  content: '';
  left: -1.5rem;
  position: absolute;
  right: -1.5rem;
  top: 0;

  @include mq($from: m) {
    left: -66%;
    right: -66%;
  }
}

.article--event .grid--two-columns {
  @include mq($until: m) {
    .grid__col--1 {
      padding: 0;
    }

    .grid__col--2 {
      order: -1;
      padding: 0 0 3rem;
    }
  }
}

.article__inner .section {
  .section-quote,
  .tabs-slider,
  .two-cards,
  .two-microcards,
  .three-teaser:not(.three-teaser--full-width) {
    padding-left: 0;
    padding-right: 0;
  }
}

URL: /components/raw/article/article.scss
Filesystem Path: src/components/organisms/article/article.scss
Size: 2.8 KB

Handle: @article--event
Variants (4): Article , Artikel News , Team Übersicht , Artikel Event
Preview:
- With layout
- Component only
Filesystem Path: src/components/organisms/article/article.pug
References (1): @three-teaser--bg-image

There are no notes for this item.