<div class="m-teaser-news">
    <p class="alpha">Nyheter</p>
    <ul class="m-teaser-news__list">
        <li class="m-teaser-news__item">
            <div class="a-meta">2018-12-04</div>
            <a href="#" class="m-teaser-news__link">
                <h2>Internetdagarna 2019</h2>
            </a>
            <a href="" class="a-tag">
                <span class="a-tag__text">stockholm</span>
            </a>
            <a href="" class="a-tag">
                <span class="a-tag__text">göteborg</span>
            </a>
        </li>
        <li class="m-teaser-news__item">
            <div class="a-meta">2019-01-22, Tid: 10:00</div>
            <a href="#" class="m-teaser-news__link">
                <h2>Lansering av Svenskarna och internet 2019</h2>
            </a>
        </li>
        <li class="m-teaser-news__item">
            <div class="a-meta">2019-05-13</div>
            <a href="#" class="m-teaser-news__link">
                <h2>Så säkrar du dina konton</h2>
            </a>
            <a href="" class="a-tag">
                <span class="a-tag__text">stockholm</span>
            </a>
            <a href="" class="a-tag">
                <span class="a-tag__text">göteborg</span>
            </a>
        </li>
    </ul>
</div>
<div class="m-teaser-news">
	<p class="alpha">{{title}}</p>
	<ul class="m-teaser-news__list">
		{{#each items}}
		<li class="m-teaser-news__item">
			{{> @meta text=time}}
			<a href="#" class="m-teaser-news__link">
				<h2>{{heading}}</h2>
			</a>
			{{#each tags}}
				{{> @tag text=text url=url }}
			{{/each}}
		</li>
		{{/each}}
	</ul>
</div>
{
  "title": "Nyheter",
  "link_text": "Nätneutraliteten och den svenska lagstiftningen",
  "background_image": "/assets/images/KPA_5090-5-4.jpg",
  "items": [
    {
      "url": "http://www.iis.se",
      "heading": "Internetdagarna 2019",
      "time": "2018-12-04",
      "tags": [
        {
          "text": "stockholm",
          "url": "#"
        },
        {
          "text": "göteborg",
          "url": "#"
        }
      ]
    },
    {
      "url": "http://www.iis.se",
      "heading": "Lansering av Svenskarna och internet 2019",
      "time": "2019-01-22, Tid: 10:00",
      "tags": false
    },
    {
      "url": "http://www.iis.se",
      "heading": "Så säkrar du dina konton",
      "time": "2019-05-13",
      "tags": [
        {
          "text": "stockholm",
          "url": "#"
        },
        {
          "text": "göteborg",
          "url": "#"
        }
      ]
    }
  ]
}
  • Content:
    @charset 'UTF-8';
    
    @include molecule(teaser-news) {
    	height: 100%;
    	padding: rhythm(2);
    	border-radius: $border-radius;
    	background-color: var(--snow-color);
    
    	@include bp-up(md) {
    		padding: rhythm(2) rhythm(4);
    	}
    
    	@include e(list) {
    		margin: 0;
    		padding: 0;
    		list-style: none;
    	}
    
    	@include e(item) {
    		position: relative;
    
    		&:not(:last-child) {
    			margin-bottom: rhythm(3);
    		}
    	}
    
    	@include e(link) {
    		@extend %normalize-links;
    
    		color: currentcolor;
    		text-decoration: none;
    
    		&:hover,
    		&:focus {
    			color: $color-ruby;
    			text-decoration: underline;
    		}
    
    		&::after {
    			content: '';
    			display: block;
    			position: absolute;
    			top: 0;
    			right: 0;
    			bottom: 0;
    			left: 0;
    		}
    	}
    }
    
  • URL: /components/raw/teaser-news-list/_teaser-news-list.scss
  • Filesystem Path: src/molecules/teaser-news-list/_teaser-news-list.scss
  • Size: 701 Bytes

No notes defined.