Styleguide

Post Meta: Without Author 

<div class="a-post-meta">
    <time class="a-post-meta__date" datetime="2018-10-03T00:00:00.000Z">03.10.2018</time>
    <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: 
    @use "sass:math";
@use "../../../scss/variables" as v;
@use "../../../scss/mixins" as m;

.a-post-meta {
	font-size: 0.875rem;
	letter-spacing: 0.018em;
	hyphens: auto;
	line-height: 1.57em;
	@include m.fluid-props(padding-top padding-bottom, v.$fluid-min, v.$size-medium, 4px, 40px);

	@include m.media(v.$MOBILE) {
		padding: 6px 0 8px;
	}

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

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

		@include m.high-contrast {
			color: v.$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: v.$color-grey-2;
			display: block;
			margin-bottom: 8px;
		}
	}

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

		&:hover {
			color: v.$color-primary;

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

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

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

		@include m.high-contrast {
			color: v.$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.4 KB 
{
  "date": "03.10.2018",
  "datetime": "2018-10-03T00:00:00.000Z",
  "author": null,
  "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.