Styleguide

Link list: Full Width 

<div class="m-link-list m-link-list--full-width">
    <div class="m-link-list__cat-title">
        <h2 class="a-cat-title">
            <span class="a-cat-title__link a-cat-title__link--no-link">Weitere Ressourcen</span>
        </h2>
    </div>
    <ul class="m-link-list__list">
        <li class="m-link-list__item">
            <div class="m-link-list__inner">
                <article class="a-post-link">
                    <header class="a-post-link__meta a-post-link__meta--header">
                        <time class="a-post-link__meta-item" datetime="17. Januar 2016">17. Januar 2016</time>
                    </header>
                    <a href="#" class="a-post-link__title-link">
                        <h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
                    </a>
                    <p class="a-post-link__excerpt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum</p>
                    <a href="#" class="a-link-button a-link-button--post a-link-button--excerpt">
                        Weiterlesen
                    </a>
                </article>

            </div>
        </li>
        <li class="m-link-list__item">
            <div class="m-link-list__inner">
                <article class="a-post-link">
                    <header class="a-post-link__meta a-post-link__meta--header">
                        <time class="a-post-link__meta-item" datetime="17. Januar 2016">17. Januar 2016</time>
                    </header>
                    <a href="#" class="a-post-link__title-link">
                        <h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
                    </a>
                    <p class="a-post-link__excerpt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum</p>
                    <a href="#" class="a-link-button a-link-button--post a-link-button--excerpt">
                        Weiterlesen
                    </a>
                </article>

            </div>
        </li>
        <li class="m-link-list__item">
            <div class="m-link-list__inner">
                <article class="a-post-link">
                    <header class="a-post-link__meta a-post-link__meta--header">
                        <time class="a-post-link__meta-item" datetime="17. Januar 2016">17. Januar 2016</time>
                    </header>
                    <a href="#" class="a-post-link__title-link">
                        <h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
                    </a>
                    <p class="a-post-link__excerpt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum</p>
                    <a href="#" class="a-link-button a-link-button--post a-link-button--excerpt">
                        Weiterlesen
                    </a>
                </article>

            </div>
        </li>
        <li class="m-link-list__item">
            <div class="m-link-list__inner">
                <article class="a-post-link">
                    <header class="a-post-link__meta a-post-link__meta--header">
                        <time class="a-post-link__meta-item" datetime="17. Januar 2016">17. Januar 2016</time>
                    </header>
                    <a href="#" class="a-post-link__title-link">
                        <h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
                    </a>
                    <p class="a-post-link__excerpt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum</p>
                    <a href="#" class="a-link-button a-link-button--post a-link-button--excerpt">
                        Weiterlesen
                    </a>
                </article>

            </div>
        </li>
    </ul>
    <div class="m-link-list__more">
        <a href="#" class="a-link-button ">
            17 weitere Ressourcen
        </a>
    </div>
</div>
 
<div class="m-link-list {{modifiers_classes}}">
	<div class="m-link-list__cat-title">
		{{> @a-cat-title cat-title}}
	</div>
	<ul class="m-link-list__list">
		{{#each links}}
			<li class="m-link-list__item">
				<div class="m-link-list__inner">
					{{> @a-post-link this}}
				</div>
			</li>
		{{/each}}
	</ul>
	{{#if link-button}}
		<div class="m-link-list__more">
			{{> @a-link-button link-button}}
		</div>
	{{/if}}
</div>
  • Content: 
    .m-link-list {
	&__cat-title {
		margin-bottom: 16px;
	}

	&__list {
		@include clean-ul;
	}

	&--full-width {
		.m-link-list__list {
			display: grid;
			grid-template-columns: 1fr;
			grid-column-gap: 50px;
			align-items: stretch;

			@include media($size-small) {
				grid-template-columns: 1fr 1fr;
			}
		}
	}

	&__item {
		@include clean-li;
		transition: background-color $transition-fast $transition-ease;
		margin: 0 -12px;
		padding: 0 12px;

		@include hover {
			background-color: $color-grey-1;
		}
	}

	&--full-width {
		.m-link-list__item {
			@include hover {
				background-color: transparent;
			}
		}
	}

	&__inner {
		border-bottom: 1px solid $color-grey-2;
		height: 100%;
	}

	&__more {
		margin: 48px 0;
	}
}
  • URL: /components/raw/m-link-list/_m-link-list.scss
  • Filesystem Path: styleguide/src/components/molecules/m-link-list/_m-link-list.scss
  • Size: 733 Bytes 
{
  "cat-title": {
    "label": "Weitere Ressourcen"
  },
  "links": [
    {
      "post": true,
      "has_excerpt": true,
      "link": "#",
      "title": "Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele",
      "date": "17. Januar 2016",
      "excerpt": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum",
      "modifiers": [
        "post",
        "excerpt"
      ]
    },
    {
      "post": true,
      "has_excerpt": true,
      "link": "#",
      "title": "Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele",
      "date": "17. Januar 2016",
      "excerpt": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum",
      "modifiers": [
        "post",
        "excerpt"
      ]
    },
    {
      "post": true,
      "has_excerpt": true,
      "link": "#",
      "title": "Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele",
      "date": "17. Januar 2016",
      "excerpt": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum",
      "modifiers": [
        "post",
        "excerpt"
      ]
    },
    {
      "post": true,
      "has_excerpt": true,
      "link": "#",
      "title": "Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele",
      "date": "17. Januar 2016",
      "excerpt": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum",
      "modifiers": [
        "post",
        "excerpt"
      ]
    }
  ],
  "modifiers": [
    "full-width"
  ],
  "link-button": {
    "label": "17 weitere Ressourcen",
    "url": "#"
  }
}

No notes defined.