Raised flat buttons


Floating Buttons


Social Icons


Material Shadow

In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.

You can easily apply this shadow effect by adding a class="z-depth-2" to an HTML tag. Alternatively you can extend any of these shadows with Sass using @extend .z-depth-2 A z-depth-0 can be used to remove shadows from elements that have z-depths by default.

z-depth-1

z-depth-2

z-depth-3

z-depth-4

z-depth-5

Chips

Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.

Contacts

Create a contact chip just add an img inside.

Contact PersonJane Doe


Tags

Create a tag chip just add an close icon inside.

Tagclose

Preloader

Linear
Indeterminate

Circular

Collapsible

Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.

Normal Collapsible
  • filter_dramaFirst

    Lorem ipsum dolor sit amet.

  • placeSecond

    Lorem ipsum dolor sit amet.

  • whatshotThird

    Lorem ipsum dolor sit amet.

Popout Collapsible
  • filter_dramaFirst

    Lorem ipsum dolor sit amet.

  • placeSecond

    Lorem ipsum dolor sit amet.

  • whatshotThird

    Lorem ipsum dolor sit amet.

Dialogs

Normal

Rounded

Modals

Use a modal for dialog boxes, confirmation messages, or other content that can be called up. In order for the modal to work you have to add the Modal ID to the link of the trigger. To add a close button, just add the class .modal-close to your button.

Modal Modal With Fixed Footer Modal Bottom Sheet Style

Tabs

The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible. You can add the class .disabled to make a tab inaccessible.

Test 1
Test 2
Test 3