<div class="news-block block-border-top mb-md enablevue">
    <div class="block-header">
        <h2 class="heading-level-2">Aktuellt</h2>
        <div class="block-action">
            <a href="http://www.google.com">Visa fler</a>
        </div>
    </div>
    <section class="block-content">
        <article class="article-block">
            <h3 class="heading-level-3">
                <a href="https://google.com">Arbetsmigration blir ett sätt att ta makten över sin livssituation</a>
            </h3>
            <p>Här berättar vi lite mer om studentlivet bortom utbildningsplaner och litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med. bortom utbildningsplaner och litteraturlistor så att du
                får en känsla för våra campus, orterna vi finns på och allt det andra som följer med.</p>
            <p class="small-font mt-xs">23 november 2018</p>
        </article>
        <article class="article-block">
            <div class="row">
                <div class="col-12 col-md-3">
                    <a href="https://apple.com">
                <img class="article-image lazyload" data-src="https://picsum.photos/600/400" alt="Bild">
            </a>
                </div>
                <div class="col-12 col-md-9">
                    <h3 class="heading-level-3">
                        <a href="https://apple.com">Prisas för forskningsartikel om musikfestivalen Peace &amp; Love</a>
                    </h3>
                    <p>Här berättar vi lite mer om studentlivet bortom utbildningsplaner och litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med.</p>
                </div>
            </div>
        </article>
        <article class="article-block">
            <h3 class="heading-level-3">
                <a href="https://aftonbladet.se">Nu kan effekten av evenemang mätas på ett helt nytt sätt</a>
            </h3>
            <p>Här berättar vi lite mer om studentlivet bortom utbildningsplaner och litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med. bortom utbildningsplaner och litteraturlistor så att du
                får en känsla för våra campus, orterna vi finns på och allt det andra som följer med.</p>
            <p class="small-font mt-xs">23 november 2018</p>
        </article>
        <article class="article-block">
            <div class="caption">
                Ons 12 dec
            </div>
            <h3 class="heading-level-3">
                <a href="https://blocket.se">Svenska folkets friluftsvanor studeras i nationell undersökning</a>
            </h3>
            <p>Här berättar vi lite mer om studentlivet bortom utbildningsplaner och litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med.</p>
            <p class="small-font mt-xs">23 november 2018</p>
        </article>
    </section>
</div>
<div class="news-block block-border-top mb-md enablevue">
    {{#if title}}
    <div class="block-header">
        <h2 class="heading-level-2">{{title}}</h2>
        {{#if showMoreButton}}
        <div class="block-action">
            <a href="{{showMoreButtonUrl}}">{{showMoreButtonText}}</a>
        </div>
        {{/if}}
    </div>
    {{/if}}
    {{#if news}}
    <section class="block-content">
        {{#each news}}
        {{render '@article' this}}
        {{/each}}
    </section>
    {{/if}}
</div>
{
  "title": "Aktuellt",
  "showMoreButton": true,
  "showMoreButtonText": "Visa fler",
  "showMoreButtonUrl": "http://www.google.com",
  "epiDivClass": "col-md-8 offset-md-2",
  "news": [
    {
      "imageUrl": null,
      "imageAlt": null,
      "caption": null,
      "articleUrl": "https://google.com",
      "title": "Arbetsmigration blir ett sätt att ta makten över sin livssituation",
      "ingressText": "Här berättar vi lite mer om studentlivet bortom utbildningsplaner och litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med. bortom utbildningsplaner och litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med.",
      "secondaryText": "23 november 2018",
      "hideDate": false
    },
    {
      "imageUrl": "https://picsum.photos/600/400",
      "imageAlt": "Bild",
      "caption": null,
      "articleUrl": "https://apple.com",
      "title": "Prisas för forskningsartikel om musikfestivalen Peace & Love",
      "ingressText": "Här berättar vi lite mer om studentlivet bortom utbildningsplaner och litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med.",
      "secondaryText": "24 november 2018",
      "hideDate": true
    },
    {
      "imageUrl": null,
      "imageAlt": null,
      "caption": null,
      "articleUrl": "https://aftonbladet.se",
      "title": "Nu kan effekten av evenemang mätas på ett helt nytt sätt",
      "ingressText": "Här berättar vi lite mer om studentlivet bortom utbildningsplaner och litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med. bortom utbildningsplaner och litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med.",
      "secondaryText": "23 november 2018",
      "hideDate": false
    },
    {
      "imageUrl": null,
      "imageAlt": null,
      "caption": "Ons 12 dec",
      "articleUrl": "https://blocket.se",
      "title": "Svenska folkets friluftsvanor studeras i nationell undersökning",
      "ingressText": "Här berättar vi lite mer om studentlivet bortom utbildningsplaner och litteraturlistor så att du får en känsla för våra campus, orterna vi finns på och allt det andra som följer med.",
      "secondaryText": "23 november 2018",
      "hideDate": false
    }
  ]
}
  • Content:
    .col-md-6{
        .block-header{
            margin-top: 0px;
    
        }
    }
    
    .block-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid $grey-border;
        padding-top: $xs-space;
        margin-top: $lg-space;
        padding-bottom: $md-space;
        h2 {
            margin: 0;
        }
    }
    .block-header-table{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: $xs-space;
    
        h2 {
            margin: 0;
        }
    }
    
    .block-action a:not(:first-child) {
        margin-left: $xs-space;
    }
    
    .block-content {
        article {
            margin-bottom: 20px;
            
            a {
                color: inherit;
                font-family: inherit;
                font-size: inherit;
            }
    
            &:not(:last-child) {
                margin-bottom: $md-space;
            }
    
            p {
                margin-bottom: 0;
            }
        }
        img {
            margin-bottom: $xs-space;
        }
    
    }
    
    .caption {
        display: inline-block;
        margin-bottom: 15px;
        padding: 2px 20px;
        background-color: #C75200;
        color: #fff;
    }
    
    @element .news-block and (max-width: 600px) {
        :self section article div[class^="col-"] {
            max-width: 100%;
            flex-basis: 100%;
        }
    }
    
    // @element .news-block section article .col-md-3 and (max-width: 250px) {
    
    //     @element .news-block and (max-width: 399px) {
    //         :self .article-image {
    //             height: 200px;
    //         }
    //     }
    
    
    //     @element .news-block and (min-width: 400px) {
    //         :self .article-image {
    //             height: 250px;
    //         }
    //     }
    
    //     @element .news-block and (min-width: 600px) {
    //         :self .article-image {
    //             height: 300px;
    //         }
    //     }
    
    //     @element .news-block and (min-width: 900px) {
    //         :self .article-image {
    //             height: 600px;
    //         }
    //     }
    // }
    
    .news-block .article-image {
        width: 100%;
        height: auto;
    }
  • URL: /components/raw/newsblock/NewsBlock.scss
  • Filesystem Path: src\components\02-block_components\NewsBlock\NewsBlock.scss
  • Size: 2 KB

There are no notes for this item.