Styleguide

Post Meta: Default 

<div class="a-post-meta">
    <time class="a-post-meta__date" datetime="2018-10-03T00:00:00.000Z">03.10.2018</time>
    <a href="#" class="a-post-meta__author">Hansrudolf Hugentobler</a>
    <div class="a-post-meta__tags">
        <a href="" class="a-post-meta__category">Medienmitteilungen</a>
        <a href="" class="a-post-meta__category">Energie</a>
        <a href="" class="a-post-meta__category">Verkehr</a>
        <a href="" class="a-post-meta__tag">Fabi</a>
        <a href="" class="a-post-meta__tag">Bahninfrastruktur</a>
        <a href="" class="a-post-meta__tag">Bahn</a>
        <a href="" class="a-post-meta__tag">SBB</a>
    </div>
</div>
 
<div class="a-post-meta">
	{{# if date}}
		<time class="a-post-meta__date" datetime="{{datetime}}">{{date}}</time>
	{{/if}}
	{{# if author }}
		<a href="#" class="a-post-meta__author">{{author}}</a>
	{{/if}}
	<div class="a-post-meta__tags">
		{{#each categories}}
			<a href="{{this.link}}" class="a-post-meta__category">{{this.label}}</a>
		{{/each}}
		{{#each tags}}
			<a href="{{this.link}}" class="a-post-meta__tag">{{this.label}}</a>
		{{/each}}
	</div>
</div>
  • Content: 
    .a-post-meta {
	font-size: 0.875rem;
	letter-spacing: 0.018em;
	hyphens: auto;
	line-height: 1.57em;
	@include fluid-props(padding-top padding-bottom, $fluid-min, $size-medium, 4px, 40px);

	@include media($_MOBILE) {
		padding: 6px 0 8px;
	}

	&__block {
		padding: 8px 0;
		display: block;
	}

	&__date {
		@extend .a-post-meta__block;
		color: $color-grey-3;
		font-weight: $font-weight-bold;

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

	&__tags {
		@extend .a-post-meta__block;
	}

	&__date + &__author,
	&__date + &__tags,
	&__author + &__tags {
		padding-top: 0;

		&::before {
			content: ' ';
			height: 1px;
			width: 20px;
			background-color: $color-grey-2;
			display: block;
			margin-bottom: 8px;
		}
	}

	&__tag,
	&__category {
		@include clean-link;
		transition: color $transition-ease $transition-fast;
		display: inline-block; // only hyphenate if really necessary

		&:hover {
			color: $color-primary;

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

		&:not(:last-child)::after {
			content: ',';
		}
	}

	&__author {
		@include clean-link;
		@extend .a-post-meta__block;
		color: $color-primary;
		font-weight: $font-weight-bold;

		@include high-contrast {
			color: $color-primary-dark;
		}
	}
}
  • URL: /components/raw/a-post-meta/_a-post-meta.scss
  • Filesystem Path: styleguide/src/components/atoms/a-post-meta/_a-post-meta.scss
  • Size: 1.3 KB 
{
  "date": "03.10.2018",
  "datetime": "2018-10-03T00:00:00.000Z",
  "author": "Hansrudolf Hugentobler",
  "categories": [
    {
      "label": "Medienmitteilungen",
      "link": null
    },
    {
      "label": "Energie",
      "link": null
    },
    {
      "label": "Verkehr",
      "link": null
    }
  ],
  "tags": [
    {
      "label": "Fabi",
      "link": null
    },
    {
      "label": "Bahninfrastruktur",
      "link": null
    },
    {
      "label": "Bahn",
      "link": null
    },
    {
      "label": "SBB",
      "link": null
    }
  ]
}

No notes defined.