There are no notes for this item.

<div class="extra-articles">

  <div class="extra-articles-content">
    {% include '@heading' with {
      'type': 'h2',
      'heading_text': title
    } %}

    <ul>
      {% include '@teaser' with {
      "teaser_uid": "uid",
      "type": 'teaser-article',
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
      "title": "Event title text",
      "event_date": {
        "text_1": "From the 7th",
        "datetime_1": "2019-01-07",
        "text_2": "untill the 13th of January 2019",
        "datetime_2": "2019-01-13" },
      "teaser_datetime": "2019-01-07",
      "link_text": "read more",
      "link": "#",
      "image_src": "/styleguide/img/stock/teaser_2.jpg" | path,
      "image_alt_text": "alt text",
      "tag": "Just some tag"
      } %}

      {% include '@teaser' with {
      "teaser_uid": "uid_1",
      "type": 'teaser-article',
      "paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias nihil quisquam ratione. Ab deserunt omnis quam quisquam quo repudiandae temporibus totam voluptates.",
      "title": "General article title text",
      "event_date": null,
      "published_date": "Published on Saturday 7th of January 2019",
      "teaser_datetime": "2019-01-07",
      "link_text": "read more",
      "link": "javascript:void(0);",
      "image_src": "/styleguide/img/stock/teaser_1.jpg" | path,
      "image_alt_text": "alt text",
      "tag": "I'm another tag"
      } %}

    </ul>
  </div>
</div>
<div class="extra-articles">

    <div class="extra-articles-content">
        <h2>More news and articles</h2>

        <ul>
            <li class="teaser  teaser-article  ">
                <article class="teaser-content">

                    <div class="content__second">
                        <h3>Event title text</h3>

                        <div class="event">
                            <span>
                                <time datetime="2019-01-07">From the 7th</time>
                                &nbsp;<time datetime="2019-01-13">untill the 13th of January 2019</time>
                            </span>
                        </div>

                        <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>

                        <a href='#' class="read-more standalone-link" title="Event title text">
                            <span class="visually-hidden">
                                Event title text
                            </span>
                            read more</a>
                    </div>
                    <div class="content__first">

                        <div class="figure-wrapper">
                            <figure>
                                <img src="../../styleguide/img/stock/teaser_2.jpg" alt="alt text" />

                            </figure>

                            <div class="accolade-inverse bottom-left"></div>
                        </div>

                        <span class="tag ">
                            Just some tag
                        </span>

                    </div>
                </article>
                <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Event title text</a>
            </li>

            <li class="teaser  teaser-article  ">
                <article class="teaser-content">

                    <div class="content__second">
                        <h3>General article title text</h3>

                        <time class="published" datetime="2019-01-07" pubdate="pubdate">Published on Saturday 7th of January 2019</time>

                        <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias nihil quisquam ratione. Ab deserunt omnis quam quisquam quo repudiandae temporibus totam voluptates.</p>

                        <a href='javascript:void(0);' class="read-more standalone-link" title="General article title text">
                            <span class="visually-hidden">
                                General article title text
                            </span>
                            read more</a>
                    </div>
                    <div class="content__first">

                        <div class="figure-wrapper">
                            <figure>
                                <img src="../../styleguide/img/stock/teaser_1.jpg" alt="alt text" />

                            </figure>

                            <div class="accolade-inverse bottom-left"></div>
                        </div>

                        <span class="tag ">
                            I'm another tag
                        </span>

                    </div>
                </article>
                <a href="javascript:void(0);" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">General article title text</a>
            </li>

        </ul>
    </div>
</div>
{
  "title": "More news and articles"
}
  • Content:
    .extra-articles {
      &-content {
        > ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          margin: 0;
          padding-top: .8rem;
    
          li {
            @include phablet {
              width: span(4 of 8);
            }
    
            width: span(12 of 12);
            margin-bottom: 1.6rem;
          }
        }
      }
    }
    
  • URL: /components/raw/extra-articles/_extra-articles.scss
  • Filesystem Path: components/41-organisms/extra-articles/_extra-articles.scss
  • Size: 331 Bytes