ETR Component Library

Article Header Byline: Multiple Authors 

<div class="byline">
    <div class="flex items-center flex-wrap mb-8">

        <ul class="byline__authors list-reset flex mr-2 mb-2 leading-tight text-gray-dark">
            <li class="byline__author font-bold"><a href="http://www.twitter.com/expandtheroom" class="font-bold text-gray-darker hover:text-gray-dark transition">Maureen Tucker</a></li>
            <li class="byline__author font-bold"><a href="http://www.instagram.com/expandtheroom" class="font-bold text-gray-darker hover:text-gray-dark transition">Neil Peart</a></li>
            <li class="byline__author font-bold"><span class="font-bold text-gray-darker">Janet Weiss</span></li>
        </ul>

        <span class="text-gray-dark leading-tight mb-2">Jan 1, 2020, 8:00 AM</span>
    </div>
</div>
 
<div class="byline">
	<div class="flex items-center flex-wrap mb-8">
		{{#if portrait }}
				<div class="mr-4 mb-2">
					<img class="rounded-full w-12"{{#if isSponsored }} style="border-radius: 0 !important"{{/if}} src="{{ path portrait }}">
				</div>
		{{/if}}

		{{#if authors}}
    <ul class="byline__authors list-reset flex mr-2 mb-2 leading-tight text-gray-dark">
		{{#each authors }}
        <li class="byline__author font-bold">{{#if url }}<a href="{{ url }}" class="font-bold text-gray-darker hover:text-gray-dark transition" {{else}}<span class="font-bold text-gray-darker"{{/if}}>{{{name}}}{{#if url }}</a>{{else}}</span>{{/if}}</li>
		{{/each}}
    </ul>
		{{/if}}

		{{#if dateline }}
			<span class="text-gray-dark leading-tight mb-2">{{{dateline}}}</span>
		{{/if}}
	</div>
</div>
 
{
  "authors": [
    {
      "name": "Maureen Tucker",
      "url": "http://www.twitter.com/expandtheroom"
    },
    {
      "name": "Neil Peart",
      "url": "http://www.instagram.com/expandtheroom"
    },
    {
      "name": "Janet Weiss"
    }
  ],
  "portrait": null,
  "dateline": "Jan 1, 2020, 8:00 AM"
}
  • Content: 
    .byline {

  &__author {
    &:nth-child(n+2):not(:last-child) {
      &:before {
        content: ', ';
      }
    }

    &:before {
      @apply text-gray-darkest;
    }

    &:last-child {
      &:not(:only-child) {
        &:before {
          content: ', and ';
        }
      }
    }
  }
}
  • URL: /components/raw/article-header-byline/article-header-byline.scss
  • Filesystem Path: components/04-article-components/article-header-byline/article-header-byline.scss
  • Size: 298 Bytes

There are no notes for this item.