Pleasance Styleguide

File List 

<div class="border border-primary border-4 list-group list-group-flush">
    <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>
                <span>(123.45MB)</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>Another downloadable file</span>
                <span>(67.89MB)</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>A downloadable file we don't know the size of</span>
            </div>
        </div>
        <div class="file-list-item--download flex-shrink-0">
            <svg>
                <use xlink:href="#download"></use>
            </svg>
        </div>
    </a>
</div>
 
<div class="border border-primary border-4 list-group list-group-flush">
  {% for item in items %}
    {% render "@file-list-item" with { description: item.description, file_size: item.file_size } %}
  {% endfor %}
</div>
 
{
  "items": [
    {
      "description": "A downloadable file",
      "file_size": "123.45MB"
    },
    {
      "description": "Another downloadable file",
      "file_size": "67.89MB"
    },
    {
      "description": "A downloadable file we don't know the size of"
    }
  ]
}

No notes defined.