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

Message

Huro provides a component for messages that you can use in your forms, for instance. The default message is displayed on a grey background. Check the markup for more details.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum.

            <div class="message">
                <a class="delete"></a>
                <div class="message-body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus quis placerat
                    ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida
                    purus diam, et dictum.
                </div>
            </div>
            

Message Colors

Huro provides a component for messages that you can use in your forms, for instance. You can change message colors with modifier classes. Available modifier classes are is-primary, is-info, is-success, is-warning and is-danger. See code for more details about usage.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum.

            <div class="message is-primary">
                <a class="delete"></a>
                <div class="message-body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus quis placerat
                    ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida
                    purus diam, et dictum.
                </div>
            </div>
            
            <div class="message is-success">
                <a class="delete"></a>
                <div class="message-body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus quis placerat
                    ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida
                    purus diam, et dictum.
                </div>
            </div>
            
            <div class="message is-warning">
                <a class="delete"></a>
                <div class="message-body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus quis placerat
                    ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida
                    purus diam, et dictum.
                </div>
            </div>
            
            <div class="message is-danger">
                <a class="delete"></a>
                <div class="message-body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus quis placerat
                    ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida
                    purus diam, et dictum.
                </div>
            </div>