Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

File attachment

File attachment

# 
<ul class="c-file-attachment-list">
    <li class="c-file-attachment">
        <a href="#">
            <div class="c-file-attachment__icon">
                <div class="o-svg-icon o-svg-icon-document  ">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 2C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8C20 7.73478 19.8946 7.48043 19.7071 7.29289L14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2H6ZM12 4V9C12 9.55228 12.4477 10 13 10H18V20H6V4L12 4ZM17.5858 8H14V4.41421L17.5858 8Z" fill="#595959" />
                        <path d="M8 13C8 13.5523 8.44772 14 9 14H15C15.5523 14 16 13.5523 16 13C16 12.4477 15.5523 12 15 12H9C8.44772 12 8 12.4477 8 13Z" fill="#595959" />
                        <path d="M8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18H9C8.44772 18 8 17.5523 8 17Z" fill="#595959" />
                    </svg>
                </div>
            </div>
            <span class="c-file-attachment__name">File name</span>
        </a>
    </li>
    <li class="c-file-attachment">
        <a href="#">
            <div class="c-file-attachment__icon">
                <div class="o-svg-icon o-svg-icon-document  ">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 2C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8C20 7.73478 19.8946 7.48043 19.7071 7.29289L14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2H6ZM12 4V9C12 9.55228 12.4477 10 13 10H18V20H6V4L12 4ZM17.5858 8H14V4.41421L17.5858 8Z" fill="#595959" />
                        <path d="M8 13C8 13.5523 8.44772 14 9 14H15C15.5523 14 16 13.5523 16 13C16 12.4477 15.5523 12 15 12H9C8.44772 12 8 12.4477 8 13Z" fill="#595959" />
                        <path d="M8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18H9C8.44772 18 8 17.5523 8 17Z" fill="#595959" />
                    </svg>
                </div>
            </div>
            <span class="c-file-attachment__name">File name</span>
        </a>
    </li>
    <li class="c-file-attachment">
        <a href="#">
            <div class="c-file-attachment__icon">
                <div class="o-svg-icon o-svg-icon-document  ">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6 2C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8C20 7.73478 19.8946 7.48043 19.7071 7.29289L14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2H6ZM12 4V9C12 9.55228 12.4477 10 13 10H18V20H6V4L12 4ZM17.5858 8H14V4.41421L17.5858 8Z" fill="#595959" />
                        <path d="M8 13C8 13.5523 8.44772 14 9 14H15C15.5523 14 16 13.5523 16 13C16 12.4477 15.5523 12 15 12H9C8.44772 12 8 12.4477 8 13Z" fill="#595959" />
                        <path d="M8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18H9C8.44772 18 8 17.5523 8 17Z" fill="#595959" />
                    </svg>
                </div>
            </div>
            <span class="c-file-attachment__name">File name</span>
        </a>
    </li>
</ul>
ul.c-file-attachment-list
    +c-file-attachment({href: '#'}) File name
    +c-file-attachment({href: '#'}) File name
    +c-file-attachment({href: '#'}) File name

Possible parameters for file attachment

Parameters Type Possible values Description
href string This can be any url or id. This parameter is used for the document link of the file attachment.