Materialize CSS Showcase

Color Palette

Materialize offers a wide range of color classes:

Red

Blue

Green

Yellow

Use classes like 'red', 'blue', 'green', etc. Add 'lighten-X' or 'darken-X' for variations.

Materialize uses a 12-column grid system:

col s12 m6 l4
col s12 m6 l4
col s12 m12 l4

Use classes like 's12' (small), 'm6' (medium), 'l4' (large) to define column widths.

Normal Button Large Button

Use classes like 'btn', 'btn-large', 'btn-floating' for different button styles.

Card Title

This is a basic card with dark background.

Link 1 Link 2

Use 'card' class for card container, 'card-content' for content, and 'card-action' for links.

Use 'collection' class for list container and 'collection-item' for list items.

Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.

Hover me!