ETR Component Library

comma-separated-list 

<ul class="comma-separated-list list-reset">
    <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Emily Dickinson</li>
    <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Walt Wiltman</li>
    <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Virginia Woolf</li>
</ul>
 
<ul class="comma-separated-list list-reset">
  {{#each author}}
    <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">{{this}}</li>
  {{/each}}
</ul>
 
{
  "author": [
    "Emily Dickinson",
    "Walt Wiltman",
    "Virginia Woolf"
  ]
}
  • Content: 
    .comma-separated-list {
  li {
    &:not(:only-child):not(:last-child) {
      &:after {
        content: ", ";

      }
    }
    &:last-child {
      &:before {
        content: "and ";
      }
    }
  }
}
  • URL: /components/raw/comma-separated-list/comma-separated-list.scss
  • Filesystem Path: components/02-general-components/comma-separated-list/comma-separated-list.scss
  • Size: 208 Bytes

Use case: author names in card or article header.