Media Flex
Huro provides a versatile and very flexible flex media element. Simply create and element with the following markup. Please note that this version does not have horizontal alignment. Check the markup for more details.
<div class="media-flex">
<div class="h-avatar is-medium">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="flex-meta">
<span>Anna B.</span>
<span>UX Designer</span>
</div>
<div class="flex-end">
<!--Your action here (dropdown, button etc...)-->
</div>
</div>
With Icon
Huro provides a versatile and very flexible flex media element. The avatar can be replaced with an icon or any sort of element. Please note that this version does not have horizontal alignment. Check the markup for more details.
<div class="media-flex">
<div class="h-icon is-success is-rounded">
<i data-feather="clock"></i>
</div>
<div class="flex-meta">
<span>Team Tasks</span>
<span>View all tasks</span>
</div>
<div class="flex-end">
<!--Your action here (dropdown, button etc...)-->
</div>
</div>
Media Flex Center
Huro provides a versatile and very flexible flex media element. Simply create and element with the following markup. Please note that this version has horizontal alignment. Check the markup for more details.
<div class="media-flex-center">
<div class="h-avatar is-medium">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="flex-meta">
<span>Anna B.</span>
<span>UX Designer</span>
</div>
<div class="flex-end">
<!--Your action here (dropdown, button etc...)-->
</div>
</div>
With Icon
Huro provides a versatile and very flexible flex media element. The avatar can be replaced with an icon or any sort of element. Please note that this version does not have horizontal alignment. Check the markup for more details.
<div class="media-flex-center">
<div class="h-icon is-info is-rounded">
<i data-feather="chrome"></i>
</div>
<div class="flex-meta">
<span>Browser Support</span>
<span>View browser support</span>
</div>
<div class="flex-end">
<!--Your action here (dropdown, button etc...)-->
</div>
</div>
Mobile Responsive
Media flex blocks can be made responsive for a specific viewport by adding some classes. When set to responsive mode, the flex block elements stack to fit in the available space. To make a flex block responsive on mobile only, add the is-responsive-mobile class to the target media-flex or media-flex-center element. Resize your screen to see it in action.
<div class="media-flex-center is-responsive-mobile">
<div class="h-avatar is-medium">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="flex-meta">
<span>Anna B.</span>
<span>UX Designer</span>
</div>
<div class="flex-end">
<!--Your action here (dropdown, button etc...)-->
</div>
</div>
Tablet Responsive
Media flex blocks can be made responsive for a specific viewport by adding some classes. When set to responsive mode, the flex block elements stack to fit in the available space. To make a flex block responsive on tablet portrait mode only, add the is-responsive-tablet-p class to the target media-flex or media-flex-center element. Resize your screen to see it in action.
<div class="media-flex-center is-responsive-mobile is-responsive-tablet-p">
<div class="h-icon is-info is-rounded">
<i data-feather="chrome"></i>
</div>
<div class="flex-meta">
<span>Browser Support</span>
<span>View browser support</span>
</div>
<div class="flex-end">
<!--Your action here (dropdown, button etc...)-->
</div>
</div>