MATERIAL DESIGN UI KIT.

Build your next project using MDUI - Material Design UI Kit.

BASIC COMPONENTS

 

NAVBARS

 
 
 
 
 
 
 
 

BUTTONS

 

BUTTON STYLES

Default Button Pill Button

 

BUTTON SIZES

xSmall Small Medium Large

 

BUTTON COLORS

Primary Button Secondary Button Success Button Info Button Warning Button Danger Button

 

BUTTONS WITH ICONS

favoritePrimary watch_laterSecondary verified_userSuccess Infopublic Warningpan_tool Dangersettings

COLLAPSE BUTTONS

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

DROPDOWN & DROPUP BUTTONS

 
 

INPUTS

CHECKBOX

RADIO

TOGGLE BUTTONS

INPUT GROUPS

Go!
 

PAGINATIONS

 

BREADCRUMB

 

CENTERED PAGINATION

 

PAGER

 

BUTTON PAGER

 

TABS & ACCORDIONS

 

TAB PILLS

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit.

TABS ON CARD

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater irure terry richardson ex squid.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard.

TABS BAR

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit.

TABS BAR ON CARD

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater irure terry richardson ex squid.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard.
 

ACCORDION

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

PRIMARY ACCORDION

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
 

PROGRESS BARS

 

DEFAULT PROGRESS BARS

CUSTOM ANIMATION & HEIGHT PROGRESS

PROGRESS BARS WITH LABELS

25%
40%
55%
70%
85%

STRIPED PROGRESS BARS

MULTIPLE PROGRESS

ANIMATED PROGRESS BARS

 

ALERTS

 

DISMISSABLE ALERTS

DISMISSABLE ALERTS WITH ICONS

 

CARDS

 

CARD BLOCK

This is some text, button and icon within a card block.Button star

CARDS

CARD TITLE

Left-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button

CARD TITLE

Center-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button

CARD TITLE

Right-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button

CARDS WITH ICONS

extension

CARD TITLE

Left-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
explore

CARD TITLE

Center-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
favorite

CARD TITLE

Right-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button

CARDS WITH HEADER AND FOOTER

Text Aligned-left

CARD TITLE

With supporting text below as a natural lead-in to additional content.

Button
Text Aligned-center

CARD TITLE

With supporting text below as a natural lead-in to additional content.

Button
Text Aligned-right

CARD TITLE

With supporting text below as a natural lead-in to additional content.

Button

CARDS WITH IMAGE TOP

card-image-cap

CARD TITLE

Left-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
card-image-cap

CARD TITLE

Center-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
card-image-cap

CARD TITLE

Right-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button

CARDS WITH IMAGE OVERLAY

card-img-overlay

CARD TITLE

Left-aligned content. This is a wider card with supporting text below as a natural lead-in to additional content. Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit vestibulum varius.

Last updated 3 mins ago

card-img-overlay

CARD TITLE

Center-aligned content. This is a wider card with supporting text below as a natural lead-in to additional content. Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit vestibulum varius.

Last updated 3 mins ago

card-img-overlay

CARD TITLE

Right-aligned content. This is a wider card with supporting text below as a natural lead-in to additional content. Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit vestibulum varius.

Last updated 3 mins ago

 

TYPOGRAPHY

 

HEADINGS

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

PARAGRAPHS

Large Paragraph (lead). Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames.

Regular Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Small Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum.

Extra Small Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.

LISTS

  1. Aliquam molestie quam in tincidunt
  2. Morbi quis neque non nisl egestas
  3. Vestibulum nisi nibh, pulvinar amet
  4. Mauris pretium elit ac facilisis mollis
 

INLINE TEXT ELEMENTS

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is like an addition to a document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

TEXT COLORS

Primary. Morbi quis neque non nisl egestas laoreet

Muted. Aliquam molestie quam in tincidunt

Success. Vestibulum nisi nibh, pulvinar sit amet lacinia

Info. Mauris pretium elit ac facilisis mollis posuere

Warning. Mauris vitae magna in dolor porta aliquam

Danger. Mauris vitae magna in dolor porta aliquam

TEXT BACKGROUNDS

Pellentesque iaculis nisl vitae ligula volutpat, sit amet rhoncus nisl posuere. Vestibulum vel nisi euismod, commodo felis fermentum, fringilla ex. Fusce vel mattis quam, id bibendum leo. Vivamus et sollicitudin sem ultricies.

BLOCKQUOTE

Quisque tincidunt dolor diam, malesuada pellentesque lectus finibus pretium. Curabitur a nibh.

Someone famous in Source Title

BLOCKQUOTE REVERSE

Quisque tincidunt dolor diam, malesuada pellentesque lectus finibus pretium. Curabitur a nibh.

Someone famous in Source Title
 

TABLES

 

DEFAULT TABLE

# FIRST NAME LAST NAME USERNAME
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

INVERSE TABLE

# FIRST NAME LAST NAME USERNAME
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

STRIPED TABLE

# FIRST NAME LAST NAME USERNAME
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

INVERSE STRIPED TABLED

# FIRST NAME LAST NAME USERNAME
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
 

IMAGES

 

IMAGE CAPTION

IMAGE CAPTION GOES HERE.

REGULAR IMAGE

ROUNDED IMAGE

CIRCLE IMAGE

 

RAISED IMAGES

 

IMAGE CAPTION

IMAGE CAPTION GOES HERE.

REGULAR IMAGE

ROUNDED IMAGE

CIRCLE IMAGE

 

MODAL

 
Default Modal Terms & Conditions Grid Modal Varying Modal account_circle Log In open_in_new Register
 

POPOVERS & TOOLTIPS

 

Popover on top Popover on bottom Popover on right Popover on left

Tooltip on top Tooltip on bottom Tooltip on right Tooltip on left

CONTENT AREAS

 

PROMO

 

CALL TO ACTION

CALL TO ACTION
 
CALL TO ACTION
 
CALL TO ACTION
 

PROMO BOX

verified_user
VERIFIED

Quisque aliquet neque vitae dui tincidunt condimentum. Donec mattis leo a sapien accumsan varius felis.

important_devices
RESPONSIVE

Quisque aliquet neque vitae dui tincidunt condimentum. Donec mattis leo a sapien accumsan varius felis.

build
STABLE

Quisque aliquet neque vitae dui tincidunt condimentum. Donec mattis leo a sapien accumsan varius felis.

public
PUBLIC

Quisque aliquet neque vitae dui tincidunt condimentum. Donec mattis leo a sapien accumsan varius felis.

assessment
SCALABLE

Quisque aliquet neque vitae dui tincidunt condimentum. Donec mattis leo a sapien accumsan varius felis.

extension
EXTENDABLE

Quisque aliquet neque vitae dui tincidunt condimentum. Donec mattis leo a sapien accumsan varius felis.

 

PROMO BOX WITH BACKGROUND

verified_user
VERIFIED

Quisque aliquet neque vitae dui tincidunt condimentum. Donec mattis leo a sapien accumsan varius felis.

important_devices
RESPONSIVE

Quisque aliquet neque vitae dui tincidunt condimentum. Donec mattis leo a sapien accumsan varius felis.

build
STABLE

Quisque aliquet neque vitae dui tincidunt condimentum. Donec mattis leo a sapien accumsan varius felis.

public
PUBLIC

Quisque aliquet neque vitae dui tincidunt condimentum. Donec mattis leo a sapien accumsan varius felis.

assessment
SCALABLE

Quisque aliquet neque vitae dui tincidunt condimentum. Donec mattis leo a sapien accumsan varius felis.

extension
EXTENDABLE

Quisque aliquet neque vitae dui tincidunt condimentum. Donec mattis leo a sapien accumsan varius felis.

 

TEAM

 

TEAM BLOCK

JOHN DOE

CEO

Proin venenatis neque quis dui accumsan mattis. Morbi non nisi nulla. Maecenas ullamcorper venenatis ultrices.

EMILY COOK

DESIGNER

Proin venenatis neque quis dui accumsan mattis. Morbi non nisi nulla. Maecenas ullamcorper venenatis ultrices.

PETER SMITH

WEB DEVELOPER

Proin venenatis neque quis dui accumsan mattis. Morbi non nisi nulla. Maecenas ullamcorper venenatis ultrices.

 

TEAM BLOCK ON CARD

JOHN DOE

CEO

Proin venenatis neque quis dui accumsan mattis. Morbi non nisi nulla. Maecenas ullamcorper venenatis ultrices.

EMILY COOK

DESIGNER

Proin venenatis neque quis dui accumsan mattis. Morbi non nisi nulla. Maecenas ullamcorper venenatis ultrices.

PETER SMITH

WEB DEVELOPER

Proin venenatis neque quis dui accumsan mattis. Morbi non nisi nulla. Maecenas ullamcorper venenatis ultrices.

 

TEAM BLOCK WITH BIGGER IMAGE

JOHN DOE

CEO

Proin venenatis neque quis dui accumsan mattis. Morbi non nisi nulla.

EMILY COOK

DESIGNER

Proin venenatis neque quis dui accumsan mattis. Morbi non nisi nulla.

PETER SMITH

WEB DEVELOPER

Proin venenatis neque quis dui accumsan mattis. Morbi non nisi nulla.

 

CAROUSEL

 

DEFAULT CAROUSEL

 

SLIDER

 

PORTFOLIO

 
 

BLOG CARDS

 

DEFAULT BLOG CARD

trending_up BUSINESS

BEST INVESTMENT STRATEGY

by John Doe, 3 days ago

Morbi non nisl id ligula rhoncus vehicula non at augue. Fusce efficitur, purus a dictum elementum, velit dolor sollicitudin eros, eget tempus nisi quam in orci. Read More

public TRAVEL

TRAVEL TIPS FOR 2018

by John Doe, 5 days ago

Morbi non nisl id ligula rhoncus vehicula non at augue. Fusce efficitur, purus a dictum elementum, velit dolor sollicitudin eros, eget tempus nisi quam in orci. Read More

restaurant_menu FOOD, restaurant RESTAURANTS

BEST RESTAURANT

by John Doe, 7 days ago

Morbi non nisl id ligula rhoncus vehicula non at augue. Fusce efficitur, purus a dictum elementum, velit dolor sollicitudin eros, eget tempus nisi quam in orci. Read More

BLOG CARD WITH IMAGE TOP

public TRAVEL

TRAVEL THE WORLD

by John Doe, 7 days ago

Morbi non nisl id ligula rhoncus vehicula non at augue. Fusce efficitur, purus a dictum elementum, velit dolor sollicitudin eros, tempus nisi quam in orci leo.

Read More

restaurant_menu FOOD

HEALTHY FOOD

by John Doe, 8 days ago

Morbi non nisl id ligula rhoncus vehicula non at augue. Fusce efficitur, purus a dictum elementum, velit dolor sollicitudin eros, tempus nisi quam in orci leo.

Read More

trending_up BUSINESS

STATISTICS FOR 2018

by John Doe, 9 days ago

Morbi non nisl id ligula rhoncus vehicula non at augue. Fusce efficitur, purus a dictum elementum, velit dolor sollicitudin eros, tempus nisi quam in orci leo.

Read More
 

FACTS

 

DEFAULT FACTS

public

486

ONLINE
desktop_mac

347

WEBSITES
people

729

MEMBERS
 

FACTS WITH BACKGROUND

public

486

ONLINE
desktop_mac

347

WEBSITES
people

729

MEMBERS
 

PRICING

 

PRICING TABLES

BASIC

$ 2.99 / Month

  • layers SINGLE INSTALLATION
  • restore LIFETIME UPDATES
  • email 24/7 SUPPORT
  • style SASS FILES
  • book WELL DOCUMENTED
PREMIUM

$ 49.99 / Month

  • layers UNLIMITED INSTALLATIONS
  • restore LIFETIME UPDATES
  • email 24/7 SUPPORT
  • style SASS FILES
  • book WELL DOCUMENTED

PRICING CARDS

FREELANCER

home

$5

Mauris pretium, lacus sed posuere tempus, eros felis pharetra quam, eget malesuada nulla sapien eget metus.

COMPANY

business

$99

Mauris pretium, lacus sed posuere tempus, eros felis pharetra quam, eget malesuada nulla sapien eget metus.

 

TESTIMONIALS

 

TESTIMONIALS SLIDER

 

TESTIMONIALS ON CARD

starstarstarstarstar

JOHN DOE

MANAGER AT MONEY LTD

"Aenean tristique finibus tortor, sit amet condimentum neque vulputate laoreet. Proin a est vel nibh pretium gravida."

starstarstarstarstar_half

EMILY COOK

DESIGNER AT CREATIVE STUDIO

"Aenean tristique finibus tortor, sit amet condimentum neque vulputate laoreet. Proin a est vel nibh pretium gravida."

starstarstarstarstar

PETER SMITH

PROGRAMMER AT WEBDEV

"Aenean tristique finibus tortor, sit amet condimentum neque vulputate laoreet. Proin a est vel nibh pretium gravida."

 

WIDGET AREAS

 

SOCIAL SHARING WIDE WIDGET

 

SOCIAL MEDIA FOOTER

 

DARK SOCIAL MEDIA FOOTER

 

NEWSLETTER AREA

 

NEWSLETTER AREA WITH BACKGROUND IMAGE

 

FOOTER WITH WIDGETS

 

DARK FOOTER WITH WIDGETS

 

FOOTER WITH 4 WIDGETS

 

DARK FOOTER WITH 4 WIDGETS

 

FOOTERS

 

3 COLUMN FOOTER

 

3 COLUMN TRANSPARENT FOOTER

 

3 COLUMN DARK FOOTER

 

FOOTER WITH MENU

 

TRANSPARENT FOOTER WITH MENU

 

PRIMARY FOOTER WITH MENU

 

CENTERED LIGHT FOOTER WITH MENU

 

CENTERED FOOTER WITH ICONS

COPYRIGHT © 2017 MDUI - MATERIAL DESIGN UI KIT