Styleguide

Link list 

<div class="m-link-list ">
    <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">
                <a class="a-post-link a-post-link--link" href="#">

                    <h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>

                    <footer class="a-post-link__meta a-post-link__meta--footer">
                        <time class="a-post-link__meta-item" datetime="17. Januar 2016">17. Januar 2016</time>
                        <div class="a-post-link__meta-item">Resolutionen,Sport</div>
                    </footer>
                </a>

            </div>
        </li>
        <li class="m-link-list__item">
            <div class="m-link-list__inner">
                <a class="a-post-link a-post-link--link" href="#">

                    <h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>

                    <footer class="a-post-link__meta a-post-link__meta--footer">
                    </footer>
                </a>

            </div>
        </li>
        <li class="m-link-list__item">
            <div class="m-link-list__inner">
                <a class="a-post-link a-post-link--link" href="#">

                    <h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>

                    <footer class="a-post-link__meta a-post-link__meta--footer">
                        <div class="a-post-link__meta-item">Resolutionen,Sport</div>
                    </footer>
                </a>

            </div>
        </li>
        <li class="m-link-list__item">
            <div class="m-link-list__inner">
                <a class="a-post-link a-post-link--link" href="#" target="_blank">

                    <h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>

                </a>

            </div>
        </li>
    </ul>
</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,
      "link": "#",
      "title": "Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele",
      "date": "17. Januar 2016",
      "categories": [
        "Resolutionen",
        "Sport"
      ],
      "modifiers": [
        "post"
      ]
    },
    {
      "post": true,
      "link": "#",
      "title": "Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele",
      "modifiers": [
        "post"
      ]
    },
    {
      "page": true,
      "link": "#",
      "title": "Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele",
      "categories": [
        "Resolutionen",
        "Sport"
      ],
      "modifiers": [
        "page"
      ]
    },
    {
      "external": true,
      "link": "#",
      "title": "Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele",
      "target": "_blank",
      "modifiers": [
        "link"
      ]
    }
  ]
}

No notes defined.