Internetstiftelsen Styleguide

Teaser News List 

<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";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/extends';
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;

@include mixin.molecule(teaser-news) {
	height: 100%;
	padding: func.rhythm(2);
	border-radius: var.$border-radius;
	background-color: var(--snow-color);

	@include breakpoint.bp-up(md) {
		padding: func.rhythm(2) func.rhythm(4);
	}

	@include bem.e(list) {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	@include bem.e(item) {
		position: relative;

		&:not(:last-child) {
			margin-bottom: func.rhythm(3);
		}
	}

	@include bem.e(link) {
		@extend %normalize-links;

		color: currentcolor;
		text-decoration: none;

		&:hover,
		&:focus {
			color: colors.$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: 1.2 KB

No notes defined.