from tutorialspoint.com
Right Aligned Nav Bar
Left Aligned Nav Bar
Center Aligned Nav Bar
Nav Bar with Active link
Nav Bar with dropdown menu
Nav Bar with Links and Icons

Typography Demo


Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Block Quotes

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

Responsive free-flow text

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

Learn HTML5

HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.

HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.

Click the image to reveal more information.

HTML5close

HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.

Simple Card
Small Card
Medium Card
Large Card

Simple Collection


Collection of Links


HTML 5 JQuery JavaScript CSS

Collection with Header


Collection with Secondary Content


Collection with Avatar


Collection with dismissible content


Chips

HTML5HTML 5
HTML 5close

Buttons

Raised Buttons
Flat Buttons
Floating Buttons
add add
Primary Buttons
Large Buttons
add add

Drop Down Demo

Mail Box
Materialize Pagination

Badges Demo

Badges in List

Inbox12 Unread4 Sent Outbox14

Badges in dropdowns

Dropdown

Badges in Navigation

Toasts

Normal Alert! Italic Alert! Rounded Alert!

Callback Alert!

Tooltips

Bottom Left Right Top

Tabs Demo

Inbox
Unread
Outbox (Disabled)
Sent

Form Demo

account_circle
mode_edit

Simple Accordion

Popout Accordion

Accordion with Preselected Section

Expandables

Materialize Shadow Examples


TODO: Learn HTML5

TODO: Learn HTML5

TODO: Learn HTML5

TODO: Learn HTML5

TODO: Learn HTML5

TODO: Learn HTML5

Grid

Mobile First Design Demo

Resize the window to see the effect!


1
2
3
4
5
6
7
8
9
10
11
12

This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).

This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).

Materialize Media Examples


Images Demo

Responsive Embeded Video Demo

Materialize Utilities


Color Utilities Demo

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.

Alignment Utilities Demo

Vertically Aligned Text

Left Aligned Text

Right Aligned Text

Center Aligned Text

Hide Utilities Demo

Hidden on all devices

Hidden on mobile devices

Formatting Utilities Demo

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.

Center Utility Demo

html5

Waves Effects Demo

Default Click Me!
waves-light Click Me!
waves-red Click Me!
waves-yellow Click Me!
waves-orange Click Me!
waves-purple Click Me!
waves-green Click Me!
waves-teal Click Me!

Default Preloader

Indeterminate Preloader

Circular Preloader