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

Components

Snacks

Snacks

Huro provides a special component called snacks. You can use it to display serial data or tag like structured data. Default Snacks have a greyish background color. You can attach any icon in the closing section. The following example shows how to use snacks with images. Check the markup for more details.

Support
Metamovies
Corporate
English
Slicer 

      <div class="snacks">
          <div class="snack">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">Support</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">Metamovies</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">Corporate</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">English</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">Slicer</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      </div>

White Snacks

Huro provides a special component called snacks. You can use it to display serial data or tag like structured data. Whereas default Snacks have a greyish background color, you can make them white by using the is-white class. You can attach any icon in the closing section. The following example shows how to use snacks with images. Check the markup for more details.

Support
Metamovies
Corporate
English
Slicer 

      <div class="snacks">
          <div class="snack is-white">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">Support</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">Metamovies</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">Corporate</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">English</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">Slicer</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      </div>

Feather Icon

Instead of using images, snacks can also display icons, with different styles, the default style is outlined. The following example shows how to use snacks with Feather Icons. Available icon color modifiers are is-primary, is-success, is-info is-warning, is-danger. Check the markup for more details.

Shopping
Emotions
Support
Business
Warning
Heath 

      <div class="snacks">
          <div class="snack is-white">
              <div class="snack-media is-icon">
                  <i class="snack-icon" data-feather="shopping-cart"></i>
              </div>
              <span class="snack-text">Shopping</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack">
              <div class="snack-media is-icon is-primary">
                  <i class="snack-icon" data-feather="smile"></i>
              </div>
              <span class="snack-text">Emotions</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-success">
                  <i class="snack-icon" data-feather="life-buoy"></i>
              </div>
              <span class="snack-text">Support</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack">
              <div class="snack-media is-icon is-info">
                  <i class="snack-icon" data-feather="briefcase"></i>
              </div>
              <span class="snack-text">Business</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-warning">
                  <i class="snack-icon" data-feather="alert-octagon"></i>
              </div>
              <span class="snack-text">Warning</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-danger">
                  <i class="snack-icon" data-feather="thermometer"></i>
              </div>
              <span class="snack-text">Heath</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      </div>

Feather Icon Solid

Instead of using images, snacks can also display icons, with different styles. To use a solid style, add the is-solid class to the snack-icon element. The following example shows how to use snacks with Feather Icons. Available icon color modifiers are is-primary, is-success, is-info is-warning, is-danger. Check the markup for more details.

Emotions
Support
Business
Warning
Heath 

      <div class="snacks">
          <div class="snack">
              <div class="snack-media is-icon is-primary is-solid">
                  <i class="snack-icon" data-feather="smile"></i>
              </div>
              <span class="snack-text">Emotions</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-success is-solid">
                  <i class="snack-icon" data-feather="life-buoy"></i>
              </div>
              <span class="snack-text">Support</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack">
              <div class="snack-media is-icon is-info is-solid">
                  <i class="snack-icon" data-feather="briefcase"></i>
              </div>
              <span class="snack-text">Business</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-warning is-solid">
                  <i class="snack-icon" data-feather="alert-octagon"></i>
              </div>
              <span class="snack-text">Warning</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-danger is-solid">
                  <i class="snack-icon" data-feather="thermometer"></i>
              </div>
              <span class="snack-text">Heath</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      </div>

Font Awesome

Instead of using images, snacks can also display icons, with different styles, the default style is outlined. The following example shows how to use snacks with Font Awesome. Available icon color modifiers are is-primary, is-success, is-info is-warning, is-danger. Check the markup for more details.

Shopping
Emotions
Support
Business
Warning
Heath 

      <div class="snacks">
          <div class="snack is-white">
              <div class="snack-media is-icon">
                  <i class="snack-icon fas fa-shopping-cart"></i>
              </div>
              <span class="snack-text">Shopping</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack">
              <div class="snack-media is-icon is-primary">
                  <i class="snack-icon fas fa-smile"></i>
              </div>
              <span class="snack-text">Emotions</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-success">
                  <i class="snack-icon fas fa-life-ring"></i>
              </div>
              <span class="snack-text">Support</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack">
              <div class="snack-media is-icon is-info">
                  <i class="snack-icon fas fa-building"></i>
              </div>
              <span class="snack-text">Business</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-warning">
                  <i class="snack-icon fas fa-radiation"></i>
              </div>
              <span class="snack-text">Warning</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-danger">
                  <i class="snack-icon fas fa-thermometer-half"></i>
              </div>
              <span class="snack-text">Heath</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      </div>

Font Awesome Solid

Instead of using images, snacks can also display icons, with different styles. To use a solid style, add the is-solid class to the snack-icon element. The following example shows how to use snacks with Font Awesome. Available icon color modifiers are is-primary, is-success, is-info is-warning, is-danger. Check the markup for more details.

Emotions
Support
Business
Warning
Heath 

      <div class="snacks">
          <div class="snack">
              <div class="snack-media is-icon is-primary is-solid">
                  <i class="snack-icon fas fa-smile"></i>
              </div>
              <span class="snack-text">Emotions</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-success is-solid">
                  <i class="snack-icon fas fa-life-ring"></i>
              </div>
              <span class="snack-text">Support</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack">
              <div class="snack-media is-icon is-info is-solid">
                  <i class="snack-icon fas fa-building"></i>
              </div>
              <span class="snack-text">Business</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-warning is-solid">
                  <i class="snack-icon fas fa-radiation"></i>
              </div>
              <span class="snack-text">Warning</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-danger is-solid">
                  <i class="snack-icon fas fa-thermometer-half"></i>
              </div>
              <span class="snack-text">Heath</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      </div>

Line Icons

Instead of using images, snacks can also display icons, with different styles, the default style is outlined. The following example shows how to use snacks with Line Icons. Available icon color modifiers are is-primary, is-success, is-info is-warning, is-danger. Check the markup for more details.

Shopping
Emotions
Support
Business
Warning
Heath 

      <div class="snacks">
          <div class="snack is-white">
              <div class="snack-media is-icon">
                  <i class="snack-icon lnil lnil-cart"></i>
              </div>
              <span class="snack-text">Shopping</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack">
              <div class="snack-media is-icon is-primary">
                  <i class="snack-icon lnil lnil-sleep"></i>
              </div>
              <span class="snack-text">Emotions</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-success">
                  <i class="snack-icon lnil lnil-life-ring"></i>
              </div>
              <span class="snack-text">Support</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack">
              <div class="snack-media is-icon is-info">
                  <i class="snack-icon lnil lnil-apartment"></i>
              </div>
              <span class="snack-text">Business</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-warning">
                  <i class="snack-icon lnil lnil-warning"></i>
              </div>
              <span class="snack-text">Warning</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-danger">
                  <i class="snack-icon lnil lnil-thermometer"></i>
              </div>
              <span class="snack-text">Heath</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      </div>

Line Icons Solid

Instead of using images, snacks can also display icons, with different styles. To use a solid style, add the is-solid class to the snack-icon element. The following example shows how to use snacks with Line Icons. Available icon color modifiers are is-primary, is-success, is-info is-warning, is-danger. Check the markup for more details.

Emotions
Support
Business
Warning
Heath 

      <div class="snacks">
          <div class="snack">
              <div class="snack-media is-icon is-primary is-solid">
                  <i class="snack-icon lnil lnil-sleep"></i>
              </div>
              <span class="snack-text">Emotions</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-success is-solid">
                  <i class="snack-icon lnil lnil-life-ring"></i>
              </div>
              <span class="snack-text">Support</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack">
              <div class="snack-media is-icon is-info is-solid">
                  <i class="snack-icon lnil lnil-apartment"></i>
              </div>
              <span class="snack-text">Business</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-warning is-solid">
                  <i class="snack-icon lnil lnil-warning"></i>
              </div>
              <span class="snack-text">Warning</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack is-white">
              <div class="snack-media is-icon is-danger is-solid">
                  <i class="snack-icon lnil lnil-thermometer"></i>
              </div>
              <span class="snack-text">Heath</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      </div>

Small Snacks

Image snacks can have a smaller size, which can help with smaller UI elements layouts. To display a smaller snack, add the is-small class to the target snack element.

Support
Metamovies
Corporate
English
Slicer 

      <div class="snacks">
          <div class="snack is-white is-small">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">Support</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack is-small">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">Metamovies</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white is-small">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">Corporate</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack is-small">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">English</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white is-small">
              <div class="snack-media">
                  <img class="avatar" src="https://via.placeholder.com/150x150" alt="">
              </div>
              <span class="snack-text">Slicer</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      </div>

Small Icons

Image snacks can have a smaller size, which can help with smaller UI elements layouts. To display a smaller snack, add the is-small class to the target snack element.

Emotions
Support
Business
Warning
Heath 

      <div class="snacks">
          <div class="snack is-small">
              <div class="snack-media is-icon is-primary">
                  <i class="snack-icon" data-feather="smile"></i>
              </div>
              <span class="snack-text">Emotions</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white is-small">
              <div class="snack-media is-icon is-success is-solid">
                  <i class="snack-icon" data-feather="life-buoy"></i>
              </div>
              <span class="snack-text">Support</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack is-small">
              <div class="snack-media is-icon is-info">
                  <i class="snack-icon" data-feather="briefcase"></i>
              </div>
              <span class="snack-text">Business</span>
              <span class="snack-action">
                  <i data-feather="x"></i>
              </span>
          </div>
      
          <div class="snack is-white is-small">
              <div class="snack-media is-icon is-warning is-solid">
                  <i class="snack-icon" data-feather="alert-octagon"></i>
              </div>
              <span class="snack-text">Warning</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      
          <div class="snack is-white is-small">
              <div class="snack-media is-icon is-danger">
                  <i class="snack-icon" data-feather="thermometer"></i>
              </div>
              <span class="snack-text">Heath</span>
              <span class="snack-action">
                  <i data-feather="plus"></i>
              </span>
          </div>
      </div>