HIDA - Helmholtz Information and Data Science Academy

News: News with message 

<div class="news">
    <div class="news__inner">
        <div class="news__tabs">
            <div class="tab-bar"><a class="tab-bar__item tab-bar__item--active" href="#"><span class="tab-bar__item__text">News</span></a><a class="tab-bar__item" href="#"><span class="tab-bar__item__text">Aus der Forschung</span></a></div>
        </div>
        <div class="news__filter">
            <div class="filter filter--single">
                <div class="filter__button-open"><button class="button button--secondary" type="button"><span class="button__inner"><span class="button__text">Filter</span></span></button></div>
                <div class="filter__button-close"><button class="button button--secondary" type="button"><span class="button__inner"><span class="button__text">Filter schließen</span></span></button></div>
                <div class="filter__filter">
                    <form class="filter__filter__form" action="#">
                        <div class="filter__filter__item">
                            <div class="select"><select class="select__select">
                                    <option value="" disabled="" selected="">Alle Meldungen</option>
                                    <option value="">Lorem ipsum dolor sit amet sit amet</option>
                                    <option value="">Lorem ipsum 2</option>
                                    <option value="">Lorem ipsum 3</option>
                                </select></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="news__grid">
            <div class="news__grid__sizer"></div>
        </div>
        <div class="news__message">
            <p class="bodytext">Keine Ergebnisse.</p>
        </div>
    </div>
</div>
 
#{tag || 'div'}.news()&attributes(attr)
  .news__inner
    if tabs
      .news__tabs
        +include('@tab-bar', tabs)
    if filter
      .news__filter
        +include('@filter', filter)
    .news__grid
      .news__grid__sizer
      if items
        each item in items
          .news__grid__item(class=item.large && 'news__grid__item--large')
            +include(`@${item.use}`, item.settings || {})
    if message
      .news__message
        +include('@paragraph', message)
    if paging
      .news__paging
        +include('@paging', paging)
 
{
  "tabs": {
    "items": [
      {
        "active": true,
        "title": "News",
        "href": "#"
      },
      {
        "title": "Aus der Forschung",
        "href": "#"
      }
    ]
  },
  "filter": {
    "variant": "single",
    "items": [
      {
        "filter": "Alle Meldungen"
      }
    ]
  },
  "paging": null,
  "message": {
    "text": "Keine Ergebnisse."
  }
}
  • Content: 
    import Masonry from 'masonry-layout';

const newsGrid = document.querySelector('.news__grid');
if (newsGrid) {
  const msnry = new Masonry(newsGrid, {
    columnWidth: '.news__grid__sizer',
    itemSelector: '.news__grid__item',
    percentPosition: true,
  });

  msnry.once('layoutComplete', () => {
    newsGrid.classList.add('.news__grid--loaded');
  });

  msnry.layout();
}
  • URL: /components/raw/news/news.js
  • Filesystem Path: src/components/organisms/news/news.js
  • Size: 380 Bytes
  • Content: 
    .news {
  padding: 0 1.5rem;

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

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

.news__inner {
  margin: 0 auto;
  max-width: 126rem;
}

.news__tabs {
  margin-bottom: 2.5rem;

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

.news__filter {
  margin-bottom: 3rem;

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

.news__grid {
  margin: 0 -2rem;
  position: relative;
  z-index: 1;

  @include mq($from: xl) {
    margin: 0 -4rem;
  }
}

.news__grid__sizer,
.news__grid__item {
  width: 100%;

  @include mq($from: m) {
    width: 50%;
  }

  @include mq($from: l) {
    width: 25%;
  }
}

.news__grid__item--large {
  @include mq($from: l) {
    width: 50%;
  }
}

.news__grid__item {
  padding: 0.5rem 2rem 3rem;

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

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

.news__paging {
  margin-top: 3rem;

  @include mq($from: m) {
    margin-top: 6rem;
  }
}

.news__message {
  background: $color-blue-gray;
  min-height: 20rem;
  padding: 2rem;

  @include mq($from: m) {
    min-height: 50rem;
    padding: 2.5rem;
  }
}
  • URL: /components/raw/news/news.scss
  • Filesystem Path: src/components/organisms/news/news.scss
  • Size: 1.2 KB

There are no notes for this item.