Pleasance Styleguide

File List Item 

<a href="#" class="file-list-item p-2 list-group-item list-group-item-action stretched-link d-flex gap-2 align-items-center justify-content-between">
    <div class="file-list-item--link d-flex align-items-center gap-2">
        <svg class="flex-shrink-0">
            <use xlink:href="#file-earmark"></use>
        </svg>
        <div>
            <span>A downloadable file</span>
        </div>
    </div>
    <div class="file-list-item--download flex-shrink-0">
        <svg>
            <use xlink:href="#download"></use>
        </svg>
    </div>
</a>
 
<a href="#" class="file-list-item p-2 list-group-item list-group-item-action stretched-link d-flex gap-2 align-items-center justify-content-between">
  <div class="file-list-item--link d-flex align-items-center gap-2">
    <svg class="flex-shrink-0">
      <use xlink:href="#file-earmark"></use>
    </svg>
    <div>
      <span>{{ description }}</span>
      {% if file_size %}
        <span>({{ file_size }})</span>
      {% endif %}
    </div>
  </div>
  <div class="file-list-item--download flex-shrink-0">
    <svg>
      <use xlink:href="#download"></use>
    </svg>
  </div>
</a>
 
{
  "description": "A downloadable file"
}
  • Content: 
    .file-list-item {
  &--link {
    svg {
      width: 2em;
      height: 2em;
    }
  }

  &--download {
    svg {
      width: 1.4em;
      height: 1.4em;
    }
  }
}
  • URL: /components/raw/file-list-item/file-list-item.scss
  • Filesystem Path: src/components/02-structures/_file-list-item/file-list-item.scss
  • Size: 166 Bytes

No notes defined.