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>