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

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.

Team Tasks View all tasks

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

Browser Support View browser support

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

Anna B. UX Designer

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

Browser Support View browser support reports

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