Upload Base: Truncated Text

Text truncation

Should you want the text to be truncated, apply the text-truncate class to the sds-upload__text and sds-upload__upload elements.

<div class="sds-upload -uploadComplete" data-js-upload>
    <input type="file" id="upload" class="sr-only">
    <div class="sds-upload__inner">
        <div class="sds-upload__content">

            <span class="sds-iconBlock -iconBlockInverse sds-upload__iconBlock" aria-hidden="true">
                <span class="sds-iconBlock__icon sds-icon sds-icon-document"></span>
            </span>

            <div class="sds-upload__text sds-headingColor text-truncate">
                <p class="sds-upload__heading">
                    <label for="upload" class="sds-upload__label stretched-link text-truncate">{Long text to showcase truncation. Long text to showcase truncation. Long text to showcase truncation.}</label>
                </p>
                <p class="sds-upload__meta sds-textHelper">
                    {Weight}
                </p>
            </div>
        </div>

        <div class="sds-upload__actions" data-js-upload-actions>
            <div class="sds-btnGroup -aboveClickArea">

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse">

                    <span class="sds-icon sds-icon-visible"></span>

                </button>

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-js-upload-clear="">

                    <span class="sds-icon sds-icon-trash"></span>

                </button>

            </div>
        </div>

    </div>
    <div class="sds-upload__errorMsg invalid-feedback">
        { Error message }
    </div>
</div>
{% include "@snet-upload-frame" %}