### Select Language

### Activity

- Team
- Projects
- Schedule

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

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Elements Hub
- Colors
- Helpers
- Buttons
- Blocks
- Content
- Tags & Badges
- Icons
  - Line Icons Light
  - Line Icons Regular
  - Font Awesome 5
  - Feather Icons
- Cards
  - Basic Cards
  - Advanced Cards
  - Bulma Cards
- Table
- Tooltips
- Forms
  - Inputs
  - Input Addons
  - Textarea
  - Selects
  - Custom
  - File Input
- Toggles
  - Checkboxes
  - Radios
  - Switches

# Blocks

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

Anna B. UX Designer

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

Anna B. UX Designer

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