Styleguide

Linked Content: Single Block 

<div class="o-linked-content o-linked-content--single-block">
    <h2 class="o-linked-content__title">Das könnte dich auch noch interessieren</h2>
    <div class="o-linked-content__wrapper">
        <div class="o-linked-content__block">
            <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>
    </div>
</div>
 
<div class="o-linked-content{{#if single}} o-linked-content--single-block{{/if}}">
	<h2 class="o-linked-content__title">{{title}}</h2>
	<div class="o-linked-content__wrapper">
		<div class="o-linked-content__block">
			{{render '@m-link-list'}}
		</div>
		{{#unless single}}
			<div class="o-linked-content__block">
				{{render '@m-link-list'}}
			</div>
			<div class="o-linked-content__block o-linked-content__block--full-width">
				{{render '@m-link-list--full-width'}}
			</div>
		{{/unless}}
	</div>
</div>
  • Content: 
    .o-linked-content {
	&__title {
		@include fluid-props(margin-bottom, $fluid-min, $fluid-max, 30px, 70px);
		margin-top: 40px;

		@include media($size-small) {
			text-align: center;
		}
	}

	&--single-block &__title {
		text-align: left;
	}

	&__wrapper {
		display: grid;
		grid-template-columns: 1fr;
		grid-column-gap: 50px;
		@include fluid-props(grid-row-gap, $fluid-min, $fluid-max, 60px, 120px);

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

	&--single-block &__wrapper {
		grid-template-columns: 1fr;
	}

	&__block--full-width {
		@include media($size-small) {
			grid-column: 1 / 3;
		}
	}
}
  • URL: /components/raw/o-linked-content/_o-linked-content.scss
  • Filesystem Path: styleguide/src/components/organisms/o-linked-content/_o-linked-content.scss
  • Size: 632 Bytes 
{
  "title": "Das könnte dich auch noch interessieren",
  "single": true,
  "modifiers": [
    "single-block"
  ]
}

No notes defined.