Styleguide

Post Link 

<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>
 
{{#if has_excerpt}}
	<article class="a-post-link">
{{else}}
	<a class="a-post-link a-post-link--link" href="{{link}}"{{#if target}} target="{{target}}"{{/if}}>
{{/if}}
{{#if has_excerpt}}
		<header class="a-post-link__meta a-post-link__meta--header">
			{{#if date}}
				<time class="a-post-link__meta-item" datetime="{{date}}">{{date}}</time>
			{{/if}}
		</header>
{{/if}}
{{#if has_excerpt}}<a href="{{link}}" class="a-post-link__title-link">{{/if}}
	<h3 class="a-post-link__title">{{title}}</h3>
{{#if has_excerpt}}</a>{{/if}}
{{#if has_excerpt}}
		<p class="a-post-link__excerpt">{{excerpt}}</p>
	{{> '@a-link-button' url=link label='Weiterlesen'}}
{{else}}
	{{#unless external}}
			<footer class="a-post-link__meta a-post-link__meta--footer">
				{{#if date}}
					<time class="a-post-link__meta-item" datetime="{{date}}">{{date}}</time>
				{{/if}}
				{{#if categories}}
					<div class="a-post-link__meta-item">{{categories}}</div>
				{{/if}}
			</footer>
	{{/unless}}
{{/if}}
{{#if has_excerpt}}
	</article>
{{else}}
	</a>
{{/if}}
  • Content: 
    .a-post-link {
	@include clean-link;

	display: block;
	@include fluid-props(padding-top padding-bottom, $fluid-min, $fluid-max, 22px, 26px);

	&--link {
		@include media($_MOBILE) {
			position: relative;
			padding-right: 2em;

			&:after {
				content: "";
				width: 0.6em;
				height: 0.6em;
				border-top: 0.1666666667em solid $color-primary; // 2/12
				border-right: 0.1666666667em solid $color-primary; // 2/12
				transform: translateX(-0.2em) translateY(-50%) rotate(45deg);
				position: absolute;
				right: 0;
				top: 50%;

				@include high-contrast {
					border-color: $color-primary-dark;
				}
			}
		}

		.a-post-link__title {
			@include hover() {
				color: $color-primary;

				@include high-contrast {
					color: $color-primary-dark;
				}
			}
		}
	}

	&__title {
		margin: 0;
		transition: color $transition-fast $transition-ease;
		font-size: 1rem;

		@include hover {
			color: $color-primary-dark;
		}

		@include media($_DESKTOP) {
			font-size: 1.25rem;
		}

		@include high-contrast {
			color: $color-primary-dark;
		}
	}

	&__title-link {
		@include clean-link;
	}

	&__meta--header {
		margin: 0.5em 0 1em;
		color: $color-text-light;

		@include high-contrast {
			color: $color-text;
		}
	}

	&__meta--footer {
		margin-top: 1em;
	}

	&__meta-item {
		font-size: 0.875rem;
		display: inline;
		line-height: 1.25em;

		&:not(:first-child)::before {
			content: "\25A0";
			color: $color-grey-3;
			margin-right: 0.85em;
			margin-left: 0.55em;
			display: inline-block;
			transform: translateY(-0.1em) rotate(-5deg);
			font-size: 0.9em;
			-webkit-text-size-adjust: 50%;
		}
	}

	&__excerpt {
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}
}
  • URL: /components/raw/a-post-link/_a-post-link.scss
  • Filesystem Path: styleguide/src/components/atoms/a-post-link/_a-post-link.scss
  • Size: 1.7 KB 
{
  "post": true,
  "link": "#",
  "title": "Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele",
  "date": "17. Januar 2016",
  "categories": [
    "Resolutionen",
    "Sport"
  ],
  "modifiers": [
    "post"
  ]
}

No notes defined.