pattern library v1.0.0-alpha.1

Showcase list

Package showcase list with logo

<ul class="showcase-list">
  <li class="showcase-list__item">
    <a href="#" class="showcase-list__item-logo"><img src="https://cldup.com/Rg6WLgqccB.svg" width="50"></a>
    <h3 class="showcase-list__item-name"><a href="#">package-name</a></h3>
    <p class="showcase-list__item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p class="showcase-list__item-stats"><a href="#">v1.0.0</a> published some time ago by <a href="#">username</a></p>
  </li>
  <li class="showcase-list__item">
    <a href="#" class="showcase-list__item-logo"><img src="https://cldup.com/Rg6WLgqccB.svg" width="50"></a>
    <h3 class="showcase-list__item-name"><a href="#">package-name</a></h3>
    <p class="showcase-list__item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p class="showcase-list__item-stats"><a href="#">v1.0.0</a> published some time ago by <a href="#">username</a></p>
  </li>
  <li class="showcase-list__item">
    <a href="#" class="showcase-list__item-logo"><img src="https://cldup.com/Rg6WLgqccB.svg" width="50"></a>
    <h3 class="showcase-list__item-name"><a href="#">package-name</a></h3>
    <p class="showcase-list__item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p class="showcase-list__item-stats"><a href="#">v1.0.0</a> published some time ago by <a href="#">username</a></p>
  </li>
</ul>

Package showcase list with icon

For a showcase-list with icons add the showcase-list--has-icon modifier class.

<ul class="showcase-list showcase-list--has-icon">
  <li class="showcase-list__item">
    <h3 class="showcase-list__item-name"><a href="#">package-name</a></h3>
    <p class="showcase-list__item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p class="showcase-list__item-stats"><a href="#">v1.0.0</a> published some time ago by <a href="#">username</a></p>
  </li>
  <li class="showcase-list__item">
    <h3 class="showcase-list__item-name"><a href="#">package-name</a></h3>
    <p class="showcase-list__item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p class="showcase-list__item-stats"><a href="#">v1.0.0</a> published some time ago by <a href="#">username</a></p>
  </li>
  <li class="showcase-list__item">
    <h3 class="showcase-list__item-name"><a href="#">package-name</a></h3>
    <p class="showcase-list__item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p class="showcase-list__item-stats"><a href="#">v1.0.0</a> published some time ago by <a href="#">username</a></p>
  </li>
</ul>