Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

File Input

Huro provides default styles for file inputs, in case you need a control to upload a single file in your forms. File inputs can look like upload buttons. Please refer to markup for more details about usage.


            <div class="field is-grouped">
                <div class="control">
                    <div class="file">
                        <label class="file-label">
                            <input class="file-input" type="file" name="resume">
                            <span class="file-cta">
                                <span class="file-icon">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                </span>
                                <span class="file-label">
                                    Choose a file…
                                </span>
                            </span>
                        </label>
                    </div>
                </div>
            
                <div class="control">
                    <div class="file is-default">
                        <label class="file-label">
                            <input class="file-input" type="file" name="resume">
                            <span class="file-cta">
                                <span class="file-icon">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                </span>
                                <span class="file-label">
                                    Choose a file…
                                </span>
                            </span>
                        </label>
                    </div>
                </div>
            
                <div class="control">
                    <div class="file is-primary">
                        <label class="file-label">
                            <input class="file-input" type="file" name="resume">
                            <span class="file-cta">
                                <span class="file-icon">
                                    <i data-feather="upload"></i>
                                </span>
                                <span class="file-label">
                                    Choose a file…
                                </span>
                            </span>
                        </label>
                    </div>
                </div>
            
                <div class="control">
                    <div class="file is-success">
                        <label class="file-label">
                            <input class="file-input" type="file" name="resume">
                            <span class="file-cta">
                                <span class="file-icon">
                                    <i class="lnil lnil-lg lnil-cloud-upload"></i>
                                </span>
                                <span class="file-label">
                                    Choose a file…
                                </span>
                            </span>
                        </label>
                    </div>
                </div>
            </div>
            

Boxed File Input

Huro file inputs can have a boxed style. You just need to add the is-boxed class to your file element to apply this style. Please refer to markup for more details about usage.


            <div class="field is-grouped">
                <div class="control">
                    <div class="file is-boxed">
                        <label class="file-label">
                            <input class="file-input" type="file" name="resume">
                            <span class="file-cta">
                                <span class="file-icon">
                                    <i class="lnil lnil-32 lnil-cloud-upload"></i>
                                </span>
                                <span class="file-label">
                                    Choose a file…
                                </span>
                            </span>
                        </label>
                    </div>
                </div>
            
                <div class="control">
                    <div class="file is-boxed is-default">
                        <label class="file-label">
                            <input class="file-input" type="file" name="resume">
                            <span class="file-cta">
                                <span class="file-icon">
                                    <i class="lnil lnil-32 lnil-cloud-upload"></i>
                                </span>
                                <span class="file-label">
                                    Choose a file…
                                </span>
                            </span>
                        </label>
                    </div>
                </div>
            
                <div class="control">
                    <div class="file is-boxed is-primary">
                        <label class="file-label">
                            <input class="file-input" type="file" name="resume">
                            <span class="file-cta">
                                <span class="file-icon">
                                    <i class="lnil lnil-32 lnil-cloud-upload"></i>
                                </span>
                                <span class="file-label">
                                    Choose a file…
                                </span>
                            </span>
                        </label>
                    </div>
                </div>
            </div>
            

File Name

File inputs can show an additional area to display the selected file name. You just need to add the has-name class to your file element to apply this style. Please refer to markup for more details about usage.


            <div class="field is-grouped">
                <div class="control">
                    <div class="file has-name is-fullwidth">
                        <label class="file-label">
                            <input class="file-input" type="file" name="resume">
                            <span class="file-cta">
                                <span class="file-icon">
                                    <i class="lnil lnil-lg lnil-cloud-upload"></i>
                                </span>
                                <span class="file-label">
                                    Choose a file…
                                </span>
                            </span>
                            <span class="file-name light-text">
                                22082020_project_budget.xls
                            </span>
                        </label>
                    </div>
                </div>
            </div>
            

Right File Name

File inputs can show an additional area to display the selected file name, on the right. You just need to add the has-name and is-right classes to your file element to apply this style. Please refer to markup for more details about usage.


            <div class="field is-grouped">
                <div class="control">
                    <div class="file has-name is-fullwidth is-right">
                        <label class="file-label">
                            <input class="file-input" type="file" name="resume">
                            <span class="file-cta">
                                <span class="file-icon">
                                    <i class="lnil lnil-lg lnil-cloud-upload"></i>
                                </span>
                                <span class="file-label">
                                    Choose a file…
                                </span>
                            </span>
                            <span class="file-name light-text">
                                22082020_project_budget.xls
                            </span>
                        </label>
                    </div>
                </div>
            </div>