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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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>