Colors

Background Colors

This is a card panel with a teal lighten-2
This is a card panel with a indigo lighten-2

Text Colors

This is a card panel with dark blue text
This is a card panel with lighten white text

Buttons

Raise Buttons
Button cloud Button cloudButton

Floating

add
Flat
flat
Submit Button
Large Buttons
Small Buttons
Disable
edit

Responsive Image

Material Box

Responsive Embeds

12 Columns

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

Columns live inside Rows

This div is 12-columns wide on all screen sizes
6-columns (one-half)
6-columns (one-half)

Offsets

This div is 12-columns wide on all screen sizes
6-columns (offset-by-6)

Push and Pull

This div is 7-columns wide on pushed to the right by 5-columns.
5-columns wide pulled to the left by 7-columns.

Title

Section 1

Stuff

Section 2

Stuff

Section 3

Stuff

Promotional table

Lorem ipsum odor amet, consectetuer adipiscing elit. Luctus iaculis himenaeos metus neque quis orci nam sagittis lacinia. Massa eget egestas molestie a neque sollicitudin elit.

Lorem ipsum odor amet, consectetuer adipiscing elit. Luctus iaculis himenaeos metus neque quis orci nam sagittis lacinia. Massa eget egestas molestie a neque sollicitudin elit.

Lorem ipsum odor amet, consectetuer adipiscing elit. Luctus iaculis himenaeos metus neque quis orci nam sagittis lacinia. Massa eget egestas molestie a neque sollicitudin elit.

Side Navigation Layout

NAVIGATION BAR

Lorem ipsum odor amet, consectetuer adipiscing elit. At urna ante; nulla est gravida suscipit. Aenean convallis gravida blandit. Vitae tempor massa leo. Sagittis class nam lacinia? Consequat lobortis duis turpis consequat ornare. Arcu turpis fames vivamus morbi per. Faucibus penatibus aenean laoreet sapien commodo. Lacus efficitur id condimentum dictum.

Lorem ipsum odor amet, consectetuer adipiscing elit. At urna ante; nulla est gravida suscipit. Aenean convallis gravida blandit. Vitae tempor massa leo. Sagittis class nam lacinia? Consequat lobortis duis turpis consequat ornare. Arcu turpis fames vivamus morbi per. Faucibus penatibus aenean laoreet sapien commodo. Lacus efficitur id condimentum dictum.

Adding Responsiveness

I am always full-width (col s12)
I am full-width on mobile (col s12 m6)

Responsive Grid Examples

TITLE GOES HERE

SIDE CONTENT

MAIN CONTENT

SIDE CONTENT

CONTENT EME

CONTENT EME

CONTENT EME

CONTENT EME

Cards

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link This is a link
Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link This is a link
Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link This is a link

Cards

Stairs

Lorem ipsum odor amet, consectetuer adipiscing elit. Urna fermentum malesuada massa. Feugiat class metus dapibus morbi. Nulla taciti varius ultrices. Interdum pretium nostra.

This is a link
Christmas Cake

Lorem ipsum odor amet, consectetuer adipiscing elit. Urna fermentum malesuada massa. Feugiat class metus dapibus morbi. Nulla taciti varius ultrices. Interdum pretium nostra.

This is a link
Food

Lorem ipsum odor amet, consectetuer adipiscing elit. Urna fermentum malesuada massa. Feugiat class metus dapibus morbi. Nulla taciti varius ultrices. Interdum pretium nostra.

This is a link

FABs in Cards

Card Title add

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Card Title add

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Card Title add

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Horizontal Cards

I am a very simple card. I am good at containing small bits of information.

This is a link

I am a very simple card. I am good at containing small bits of information.

This is a link

Card Reveal

Card Titlemore_vert

This is a link

Card Titleclose

Here is some more information about this product that is only revealed once clicked on.

Card Titlemore_vert

This is a link

Card Titleclose

Here is some more information about this product that is only revealed once clicked on.

Card Titlemore_vert

This is a link

Card Titleclose

Here is some more information about this product that is only revealed once clicked on.

Cards Sizes

Stairs

Lorem ipsum odor amet, consectetuer adipiscing elit. Urna fermentum malesuada massa. Feugiat class metus dapibus morbi. Nulla taciti varius ultrices. Interdum pretium nostra.

This is a link
Stairs

Lorem ipsum odor amet, consectetuer adipiscing elit. Urna fermentum malesuada massa. Feugiat class metus dapibus morbi. Nulla taciti varius ultrices. Interdum pretium nostra.

This is a link
Stairs

Lorem ipsum odor amet, consectetuer adipiscing elit. Urna fermentum malesuada massa. Feugiat class metus dapibus morbi. Nulla taciti varius ultrices. Interdum pretium nostra.

This is a link

Card Panel

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.

Date Picker

Chips

Contact Person Mark Wilson Lawas
Tag close