Build material design in record time, without stress for devs
_menu\_open_ _code_ Get started_widgets_ App bars_widgets_ Badges_widgets_ Buttons_widgets_ Cards_widgets_ Checkboxes_widgets_ Chips_widgets_ Colors_widgets_ Containers_widgets_ Dialogs_widgets_ Directions_widgets_ Dividers_widgets_ Expansions_widgets_ Fieldsets_widgets_ Grids_widgets_ Icons_widgets_ Inputs_widgets_ Layouts_widgets_ Lists_widgets_ Media_widgets_ Menus_widgets_ Navigations_widgets_ Pages_widgets_ Progress_widgets_ Radios_widgets_ Responsive_widgets_ Scrolls_widgets_ Search_widgets_ Selects_widgets_ Shapes_widgets_ Sliders_widgets_ Snackbars_widgets_ Spaces_widgets_ Steppers_widgets_ Switches_widgets_ Tables_widgets_ Tabs_widgets_ Textareas_widgets_ Toolbars_widgets_ Tooltips_widgets_ Typography_widgets_ Waves_home_ Install_widgets_ Explore_arrow\_upward_ Top_arrow\_downward_ Bottom_code_ Code
Explore
_close_ 1. _widgets_ App bars 2. _widgets_ Badges 3. _widgets_ Buttons 4. _widgets_ Cards 5. _widgets_ Checkboxes 6. _widgets_ Chips 7. _widgets_ Colors 8. _widgets_ Containers 9. _widgets_ Dialogs 10. _widgets_ Directions 11. _widgets_ Dividers 12. _widgets_ Expansions 13. _widgets_ Fieldsets 14. _widgets_ Grids 15. _widgets_ Icons 16. _widgets_ Inputs 17. _widgets_ Layouts 18. _widgets_ Lists 19. _widgets_ Media 20. _widgets_ Menus 21. _widgets_ Navigations 22. _widgets_ Pages 23. _widgets_ Progress 24. _widgets_ Radios 25. _widgets_ Responsive 26. _widgets_ Scrolls 27. _widgets_ Search 28. _widgets_ Selects 29. _widgets_ Shapes 30. _widgets_ Sliders 31. _widgets_ Snackbars 32. _widgets_ Spaces 33. _widgets_ Steppers 34. _widgets_ Switches 35. _widgets_ Tables 36. _widgets_ Tabs 37. _widgets_ Textareas 38. _widgets_ Toolbars 39. _widgets_ Tooltips 40. _widgets_ Typography 41. _widgets_ Waves
Colors _code_
_close_ _dark\_mode_
_palette_
_upload_
Themes
Documentation_close_ Light Dark
Templates
_close_ All templates listed below are only for tests purpose. Feel free to study them.
- _format\_paint_ Material Dynamic Colors
- * *
!Image 1[](https://github.com/beercss/beercss)_palette_ _collections_ _dark\_mode_
Build material design
in record time
without stress for devs
We are translating a modern UI into HTML semantic standard
Don't forget to star us on Github
Projects by the community








Get started
#### From CDN
``` <link href="https://cdn.jsdelivr.net/npm/beercss@4.0.23/dist/cdn/beer.min.css" rel="stylesheet"> <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.23/dist/cdn/beer.min.js"></script> <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script> ```
#### From NPM
``` // installing npm i beercss npm i material-dynamic-colors
// importing import "beercss"; import "material-dynamic-colors"; ``` ***Use material-dynamic-colors lib only for theme changes at runtime with `ui("theme")`.**
#### Summary
``` <a> link, underline absolute left, right, top, bottom, front, back, small, medium, large <aside> left, right <article> small, medium, large, border, round, no-round, left-round, top-round, right-round, bottom-round, padding, no-padding, tiny-padding small-padding, medium-padding, large-padding <b> badge min, left, right, top, bottom, none, border, circle, square, round, no-round, left-round, right-round, top-round, bottom-round <blockquote> border, no-border, scroll button or <button> small, medium, large, extra, extend, border, circle, square, round, no-round, left-round, right-round, top-round, bottom-round, responsive, horizontal, vertical chip small, medium, large, border, no-border, circle, square, round, no-round, left-round, right-round, top-round, bottom-round, horizontal, vertical <code> <details> <dialog> left, right, top, bottom, small, medium, large, modal, border, round, no-round, left-round, right-round, top-round, bottom-round, active <em> field small, medium, large, extra, label, border, round, fill, prefix, suffix <fieldset> fixed left, right, top, bottom, front, back, small, medium, large <footer> fixed, responsive, max grid space, no-space, small-space, medium-space, large-space <h1>...<h6> small, medium, large <header> fixed, responsive, max <hr> small, medium, large <i> tiny, small, medium, large, extra, fill <img> tiny, small, medium, large, extra, circle, round, no-round, left-round, right-round, top-round, bottom-round, responsive <label> active, radio, checkbox, switch, small, medium, large, extra <legend> <li> list border, space, no-space, small-space, medium-space, large-space <main> responsive, max <menu> border, group, left, right, top, bottom, wrap, no-wrap, active, min, max, space, no-space, tiny-space, small-space, medium-space, large-space, extra-space
<nav> left, right, top, bottom, tabbed, group, toolbar, connected, split, min, max, left-align, right-align, center-align, top-align, bottom-align, middle-align, border, round, no-round, left-round, right-round, top-round, bottom-round, space, no-space, small-space, medium-space, large-space, wrap, no-wrap, margin, no-margin, tiny-margin, small-margin, medium-margin, large-margin <ol> <output> invalid overlay left-align, right-align, center-align, top-align, bottom-align, middle-align, active, blur, small-blur, medium-blur, large-blur page left, right, top, bottom, active <pre> border, no-border, scroll <progress> small, medium, large, circle, wavy, max row left-align, right-align, center-align, top-align, bottom-align, middle-align, space, no-space, small-space, medium-space, large-space, horizontal, vertical shape tiny, small, medium, large, extra, space, no-space, tiny-space, small-space, medium-space, large-space, extra-space, rotate, slow-rotate, fast-rotate snackbar top, bottom, active <strong> <sub> <summary> none <sup> <table> border, stripes, left-align, right-align, center-align, space, no-space, small-space, medium-space, large-space tabs left-align, right-align, center-align, horizontal, vertical, min, max <td> min <th> min <tfoot> fixed <thead> fixed tooltip left, right, top, bottom, max <ul> <video> tiny, small, medium, large, extra, circle, round, no-round, left-round, right-round, top-round, bottom-round, responsive ```
##### Main layouts _code_
###### Compact
###### Medium
###### Expanded
###### Multi panes
###### Custom
##### Main layouts
CodepenDocumentation_description__close_
Main layout on CodepenAll Codepen
- * *
#### App bars
##### Top app bars _code_
default fill primary secondary tertiary _menu_ ###### Headline
!Image 11_arrow\_back_ ###### Headline
_attach\_file_ _today_ _more\_vert_ _arrow\_back_ _attach\_file_ _today_ _more\_vert_
##### Headline
_arrow\_back_ _attach\_file_ _today_ _more\_vert_
#### Headline
##### Bottom app bars _code_
default fill primary secondary tertiary _check\_box_ _brush_ _mic_ _image_ _add_
#### Badges
Common badges _code_
default primary secondary tertiary default top left bottom left bottom right _home__home_ 1_home_ 10_home_ New_home_ New_home_ New_home_ 10_home_ 1_home_ New_home_ 1 _home_ 1 _home_ 1 _home_ 1
Inline badge _code_
_home_ 1 Button 1 _home_ 1 Button 1
#### Buttons
Common buttons _code_
default fill primary secondary tertiary small medium large extra no-elevate small-elevate medium-elevate large-elevate horizontal vertical
Button _home_ Button!Image 12Button!Image 13Button Button _home_ Button!Image 14Button!Image 15Button Button _home_ Button!Image 16Button!Image 17Button Button _home_ Button!Image 18Button!Image 19Button
Responsive buttons _code_
default fill primary secondary tertiary small medium large extra no-elevate small-elevate medium-elevate large-elevate horizontal vertical
Button _home_ Button!Image 20Button
Button _home_ Button!Image 21Button
Button _home_ Button!Image 22Button
Button _home_ Button!Image 23Button
FABs _code_
default fill primary secondary tertiary small medium large extra no-elevate small-elevate medium-elevate large-elevate
_add_ _add_ _add_ _add_ _add_ _add_ _add_ _add_ _add_ _add_ _add_ _add_ _add_ _add_ _add_ _add_ _add_ _add_!Image 24!Image 25!Image 26!Image 27!Image 28!Image 29!Image 30!Image 31!Image 32
Extended FABs _code_
default fill primary secondary tertiary no-elevate small-elevate medium-elevate large-elevate
_add_ Button _add_ Button _add_ Button _add_ Button _add_ Button _add_ Button _add_ Button _add_ Button _add_ Button
_add_ Button _add_ Button _add_ Button _add_ Button _add_ Button _add_ Button _add_ Button _add_ Button _add_ Button
!Image 33Button!Image 34Button!Image 35Button!Image 36Button!Image 37Button!Image 38Button!Image 39Button!Image 40Button!Image 41Button
FABs menu _code_
_north\_east_* _search_ Search
- _home_ Home
- _more\_vert_ About us
_north\_west_* _search_ Search
- _home_ Home
- _more\_vert_ About us
_south\_east_* _search_ Search
- _home_ Home
- _more\_vert_ About us
_south\_west_* _search_ Search
- _home_ Home
- _more\_vert_ About us
Icon buttons _code_
small medium large extra
_search_ _search_ _search_ _search_ _search_ _search_ _search_ _search_!Image 42!Image 43!Image 44!Image 45!Image 46!Image 47!Image 48!Image 49
Button groups _code_
default primary secondary tertiary small medium large extra
Standard
Button Button Button Button _mic_ _videocam_ _mood_ _front\_hand_ _mic_ Button _videocam_ Button _mood_ Button _front\_hand_ Button
Connected
Button Button Button Button _mic_ _videocam_ _mood_ _front\_hand_ _mic_ Button _videocam_ Button _mood_ Button _front\_hand_ Button
Split buttons _code_
small medium large extra
_add\_circle_ Button _keyboard\_arrow\_down_ _add\_circle_ Button _keyboard\_arrow\_down_ _add\_circle_ Button _keyboard\_arrow\_down_
#### Cards _code_
images videos svgs default fill primary secondary tertiary
##### Title
Some text here
##### Title
Some text here
##### Title
Some text here
##### Title
Some text here
##### Title
Some text here
Button
##### Title
Some text here
Button
##### Title
Some text here
Button
##### Title
Some text here
Button
##### Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button
##### Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button
##### Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button
##### Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button
##### Title
_more\_vert_
##### Title
_more\_vert_
##### Title
_more\_vert_
##### Title
_more\_vert_
##### Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button
##### Title
Some text here
##### Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button
#### Checkboxes _code_
Default checkbox
- [x] - [x] Enabled - [x] Disabled - [x] Disabled - [x] - [x] - [x] - [x]
Checkbox with icons
- [x] _close_ _done_ - [x] _!Image 64_ _!Image 65_ - [x]
Checkbox in field elements
- [x] Item 1 - [x] Item 2 - [x] Item 3
- [x] Item 1 - [x] Item 2 - [x] Item 3 Helper text
- [x] Item 1 - [x] Item 2 - [x] Item 3 Error text
#### Chips _code_
small medium large no-elevate small-elevate medium-elevate large-elevate horizontal vertical Suggestion Input _close_ _done_ Filter _today_ Assist!Image 66Image!Image 67Responsive Suggestion Input _close_ _done_ Filter _today_ Assist!Image 68Image!Image 69Responsive Suggestion Input _close_ _done_ Filter _today_ Assist!Image 70Image!Image 71Responsive Suggestion Input _close_ _done_ Filter _today_ Assist!Image 72Image!Image 73Responsive
#### Colors
_code_ _dark\_mode_
_palette_
_upload_
##### Primary
primary
primary-border
primary-text
primary-container
##### Secondary
secondary
secondary-border
secondary-text
secondary-container
##### Tertiary
tertiary
tertiary-border
tertiary-text
tertiary-container
##### Error
error
error-border
error-text
error-container
##### Neutral
surface-dim
surface-bright
surface-variant
inverse-surface
surface
background
surface-container-lowest
surface-container-low
surface-container
surface-container-high
surface-container-highest
##### Other
inverse-primary
inverse-primary-border
inverse-primary-text
Colors
_close_
Light Dark
Primary
primary
primary-container
primary-border
primary-text
Secondary
secondary
secondary-container
secondary-border
secondary-text
Tertiary
tertiary
tertiary-container
tertiary-border
tertiary-text
Error
error
error-container
error-border
error-text
Neutral
surface-dim
surface-bright
surface-variant
inverse-surface
surface-container-lowest
surface-container-low
surface-container
surface-container-high
surface-container-highest
surface
background
Other
inverse-primary
inverse-primary-border
inverse-primary-text
Red
red1
red2
red3
red4
red5
red6 / red
red7
red8
red9
red10
red-border
red-text
Pink
pink1
pink2
pink3
pink4
pink5
pink6 / pink
pink7
pink8
pink9
pink10
pink-border
pink-text
Purple
purple1
purple2
purple3
purple4
purple5
purple6 / purple
purple7
purple8
purple9
purple10
purple-border
purple-text
Deep purple
deep-purple1
deep-purple2
deep-purple3
deep-purple4
deep-purple5
deep-purple6 / deep-purple
deep-purple7
deep-purple8
deep-purple9
deep-purple10
deep-purple-border
deep-purple-text
Indigo
indigo1
indigo2
indigo3
indigo4
indigo5
indigo6 / indigo
indigo7
indigo8
indigo9
indigo10
indigo-border
indigo-text
Blue
blue1
blue2
blue3
blue4
blue5
blue6 / blue
blue7
blue8
blue9
blue10
blue-border
blue-text
Light blue
light-blue1
light-blue2
light-blue3
light-blue4
light-blue5
light-blue6 / light-blue
light-blue7
light-blue8
light-blue9
light-blue10
light-blue-border
light-blue-text
Cyan
cyan1
cyan2
cyan3
cyan4
cyan5
cyan6 / cyan
cyan7
cyan8
cyan9
cyan10
cyan-border
cyan-text
Teal
teal1
teal2
teal3
teal4
teal5
teal6 / teal
teal7
teal8
teal9
teal10
teal-border
teal-text
Green
green1
green2
green3
green4
green5
green6 / green
green7
green8
green9
green10
green-border
green-text
Light green
light-green1
light-green2
light-green3
light-green4
light-green5
light-green6 / light-green
light-green7
light-green8
light-green9
light-green10
light-green-border
light-green-text
Lime
lime1
lime2
lime3
lime4
lime5
lime6 / lime
lime7
lime8
lime9
lime10
lime-border
lime-text
Yellow
yellow1
yellow2
yellow3
yellow4
yellow5
yellow6 / yellow
yellow7
yellow8
yellow9
yellow10
yellow-border
yellow-text
Amber
amber1
amber2
amber3
amber4
amber5
amber6 / amber
amber7
amber8
amber9
amber10
amber-border
amber-text
Orange
orange1
orange2
orange3
orange4
orange5
orange6 / orange
orange7
orange8
orange9
orange10
orange-border
orange-text
Deep orange
deep-orange1
deep-orange2
deep-orange3
deep-orange4
deep-orange5
deep-orange6 / deep-orange
deep-orange7
deep-orange8
deep-orange9
deep-orange10
deep-orange-border
deep-orange-text
Brown
brown1
brown2
brown3
brown4
brown5
brown6 / brown
brown7
brown8
brown9
brown10
brown-border
brown-text
Grey
grey1
grey2
grey3
grey4
grey5
grey6 / grey
grey7
grey8
grey9
grey10
grey-border
grey-text
Blue grey
blue-grey1
blue-grey2
blue-grey3
blue-grey4
blue-grey5
blue-grey6 / blue-grey
blue-grey7
blue-grey8
blue-grey9
blue-grey10
blue-grey-border
blue-grey-text
Black
black
black-border
black-text
White
white
white-border
white-text
Transparent
transparent
transparent-border
transparent-text
#### Containers
##### Main content _code_
Default Responsive ##### Side content _code_
!Image 74 ##### Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
!Image 75 ##### Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
#### Dialogs _code_
Default Modal Custom overlay Left Right Top Bottom Fullscreen Navigation list
##### Default
Some text here
Cancel Confirm
##### Modal
Some text here
Cancel Confirm
##### Custom overlay
Some text here
Cancel Confirm
##### Left
Some text here
Cancel Confirm
##### Right
Some text here
Cancel Confirm
##### Top
Some text here
Cancel Confirm
##### Bottom
Some text here
Cancel Confirm
##### Fullscreen
Some text here
Cancel Confirm
!Image 76 ###### Title
_close_
- _inbox_ Inbox**24**
- _send_ Outbox
- _favorite_ favorities
- _delete_ Trash
- _fiber\_manual\_record_ Label
- _change\_history_ Label
- _stop_ Label
#### Directions _code_
horizontal vertical _home_ Button _home_ Chip _home_ Button _home_ Button _home_ Button
_home_ Tab 1_home_ Tab 2_home_ Tab 3
#### Dividers _code_
default small medium large
Some text here
- * *
Some text here
- * *
Some text here
#### Expansions _code_
##### Default
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
##### Multiple levels
Multiple levels
First
Second
Third
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
##### Custom expansion
Button _expand\_more_ ###### Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
###### Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
#### Fieldsets _code_
Select one or more- [x] Item 1 - [x] Item 2 - [x] Item 3 Select one or more- [x] Item 1 - [x] Item 2 - [x] Item 3
Select one or more Item 1 Item 2 Item 3 Select one or more Item 1 Item 2 Item 3
Fill all fields
Input
Select
Textarea Helper text
Fill all fields
Input
Select
#### Grids _code_
no-space small-space medium-space large-space
1
1
1
1
1
1
1
1
1
1
1
1
6
6
12
12/6/3
12/6/3
12/6/3
12/6/3
#### Icons
##### Default icons _code_
default fill default primary secondary tertiary
_account\_circle_ _account\_circle_ _account\_circle_ _account\_circle_ _account\_circle_
##### SVG icons _code_
default primary secondary tertiary ##### Image icons _code_
_!Image 77_ _!Image 78_ _!Image 79_ _!Image 80_ _!Image 81_
##### Other libs _code_
default primary secondary tertiary
##### Font Awesome_open\_in\_new_
###### Pictogrammers_open\_in\_new_
##### Default icons
Get iconsDocumentation_description__close_ ##### SVG
Get SVGDocumentation_description__close_ ###### Multiple icons in a single SVG
##### Other libs
Documentation_description__close_ ###### Font Awesome_open\_in\_new_
To work as expected, you need to load the lib manually.
###### Pictogrammers_open\_in\_new_
To work as expected, you need to load the lib manually.
#### Inputs _code_
- [x] border - [x] round - [x] fill small medium large extra text number password file color date time
Helper text
Error text
Label
Label Helper text
Label Error text
_search_ Label
Label _search_
_search_ Label _search_
##### Custom input _code_
_attach\_file_
_palette_
_today_
_schedule_
_attach\_file_ File
_palette_ Color
_today_ Date
_schedule_ Time
#### Layouts
##### Positions _code_
left center right top middle bottom
##### Position
Lorem ipsum dolor...
##### Alignments _code_
left-align center-align right-align top-align middle-align bottom-align
##### Alignment
Lorem ipsum dolor...
###### Headers and footers _code_
##### Fixed header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupILayoutt non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupILayoutt non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupILayoutt non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupILayoutt non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
##### Fixed footer
###### Empty states _code_
_mail_ ##### You have no new messages
Click the button to start a conversation
Send a message
_mail_ ##### You've successfully signed up
Click the button to invite your friends
Skip Invite your friends
_person_ ##### You are not following anyone
Start to meet new friends
Search
##### Blurred elements _code_
small-blur medium-blur large-blur
_arrow\_back_ ##### App bar
_more\_vert_ ##### Card
Some text here
Button Button Chip
##### Shadowed elements _code_
left-shadow right-shadow top-shadow bottom-shadow
_arrow\_back_ ##### App bar
_more\_vert_ ##### Card
Some text here
Button Button Chip
#### Lists
- [x] border no-space small-space medium-space large-space
##### Default _code_
- Item
- Item
- Item
- Item
##### Links _code_
- Item
- Item
- Item
- Item
##### Nested _code_
- Item
- Item
- * Item
- Item
##### Expansion _code_
- Item
- Item
* Header Item
- Item
- Item
##### Headline and supporting text _code_
- A###### Headline
Supporting text +15 min
- A###### Headline
Supporting text +15 min
##### Icons _code_
- _home_###### Headline
Supporting text +15 min
- _home_###### Headline
Supporting text +15 min
##### Leading media or avatar _code_
- !Image 82###### Headline
Supporting text +15 min
- !Image 83###### Headline
Supporting text +15 min
##### Links and buttons _code_
- ###### Headline
Supporting text LinkButton
- ###### Headline
Supporting text LinkButton
#### Media _code_
images videos svgs 
#### Menus _code_
default primary secondary tertiary
Default _arrow\_drop\_down_* Item 1
- Item 2
- Item 3
Links _arrow\_drop\_down_* Item 1
- Item 2
- Item 3
_arrow\_back_* Item 1
- Item 2
- Item 3
_arrow\_forward_* Item 1
- Item 2
- Item 3
_arrow\_upward_* Item 1
- Item 2
- Item 3
Divider _arrow\_drop\_down_* Item 1
- Item 2
*
- * *
- Item 3
Grouped _arrow\_drop\_down_* * Item 1
- Item 2
- * Item 3
Selected _arrow\_drop\_down_* Item 1
- Item 2
- Item 3
Images and icons _arrow\_drop\_down_* _home_ Title
- _home_ Title Some text here
- !Image 100Title
- !Image 101Title Some text here
Video _arrow\_drop\_down_* Video 2
Multi level _arrow\_drop\_down_* Item
- Item
- More items * Item
- Item
- More items * Item
- Item
- item
Docked menu _dock\_to\_bottom_* Item 1
- Item 2
- Item 3
Fullscreen _fullscreen_* Item 1
- Item 2
- Item 3
#### Navigations
##### Rows _code_
left-align center-align right-align
min
min
min
- * *
min
min
max
- * *
min
max
min
- * *
max
min
min
##### Navigations _code_
left-align center-align right-align
Button Chip _home_!Image 102
- * *
Button Chip _home_
max
- * *
Button Chip
max
_home_!Image 104
- * *
Button
max
Chip _home_!Image 105
- * *
max
Button Chip _home_!Image 106
##### Navigation rail/bar _code_
left right top bottom
##### Navigation tabbed _code_
small medium large page default page left page right
_info_ Overview_style_ Specs_design\_services_ Guidelines_accessibility\_new_ Acessibility
##### Overview
##### Specs
##### Guidelines
##### Acessibility
#### Pages _code_
Default Left Top Bottom Right
##### Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum ante sit amet risus accumsan, id luctus massa gravida. Morbi fermentum vehicula leo sed rhoncus. Donec sapien lacus, rhoncus ut turpis at, elementum laoreet est. Sed ut diam eget tellus dictum varius eget vel mi. Morbi mattis posuere turpis viverra pulvinar. Sed purus nibh, tempus et sem vel, egestas consectetur eros. Sed tempus neque est. Etiam vitae eros vitae risus suscipit accumsan sed sit amet ex. Quisque eget sodales augue. Nullam eget viverra nunc. In interdum aliquam egestas. Suspendisse ultricies ante euismod, aliquam nisl eu, sagittis libero. Quisque vel condimentum ligula.
##### Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum ante sit amet risus accumsan, id luctus massa gravida. Morbi fermentum vehicula leo sed rhoncus. Donec sapien lacus, rhoncus ut turpis at, elementum laoreet est. Sed ut diam eget tellus dictum varius eget vel mi. Morbi mattis posuere turpis viverra pulvinar. Sed purus nibh, tempus et sem vel, egestas consectetur eros. Sed tempus neque est. Etiam vitae eros vitae risus suscipit accumsan sed sit amet ex. Quisque eget sodales augue. Nullam eget viverra nunc. In interdum aliquam egestas. Suspendisse ultricies ante euismod, aliquam nisl eu, sagittis libero. Quisque vel condimentum ligula.
##### Top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum ante sit amet risus accumsan, id luctus massa gravida. Morbi fermentum vehicula leo sed rhoncus. Donec sapien lacus, rhoncus ut turpis at, elementum laoreet est. Sed ut diam eget tellus dictum varius eget vel mi. Morbi mattis posuere turpis viverra pulvinar. Sed purus nibh, tempus et sem vel, egestas consectetur eros. Sed tempus neque est. Etiam vitae eros vitae risus suscipit accumsan sed sit amet ex. Quisque eget sodales augue. Nullam eget viverra nunc. In interdum aliquam egestas. Suspendisse ultricies ante euismod, aliquam nisl eu, sagittis libero. Quisque vel condimentum ligula.
##### Bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum ante sit amet risus accumsan, id luctus massa gravida. Morbi fermentum vehicula leo sed rhoncus. Donec sapien lacus, rhoncus ut turpis at, elementum laoreet est. Sed ut diam eget tellus dictum varius eget vel mi. Morbi mattis posuere turpis viverra pulvinar. Sed purus nibh, tempus et sem vel, egestas consectetur eros. Sed tempus neque est. Etiam vitae eros vitae risus suscipit accumsan sed sit amet ex. Quisque eget sodales augue. Nullam eget viverra nunc. In interdum aliquam egestas. Suspendisse ultricies ante euismod, aliquam nisl eu, sagittis libero. Quisque vel condimentum ligula.
##### Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum ante sit amet risus accumsan, id luctus massa gravida. Morbi fermentum vehicula leo sed rhoncus. Donec sapien lacus, rhoncus ut turpis at, elementum laoreet est. Sed ut diam eget tellus dictum varius eget vel mi. Morbi mattis posuere turpis viverra pulvinar. Sed purus nibh, tempus et sem vel, egestas consectetur eros. Sed tempus neque est. Etiam vitae eros vitae risus suscipit accumsan sed sit amet ex. Quisque eget sodales augue. Nullam eget viverra nunc. In interdum aliquam egestas. Suspendisse ultricies ante euismod, aliquam nisl eu, sagittis libero. Quisque vel condimentum ligula.
#### Progress
0% 30% 60% 100% default light-green orange
##### Linear _code_
##### Circular _code_
##### Custom progress _code_
##### Card
Chip Button
#### Radios _code_
##### Default radio
Enabled Disabled Disabled
##### Radio with icons
_close_ _done_ _!Image 107_ _!Image 108_
##### Radio in field elements
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3 Helper text
Item 1 Item 2 Item 3 Error text
#### Responsive _code_
_phone\_android_ _phone\_android_ _tablet\_android_ _tablet\_android_ _laptop\_windows_ _laptop\_windows_
#### Scrolls _code_
##### Chips
Suggestion Suggestion Selected Selected Suggestion Selected Suggestion Suggestion Suggestion Suggestion Suggestion Suggestion ##### Images
!Image 109!Image 110!Image 111!Image 112!Image 113!Image 114!Image 115!Image 116!Image 117!Image 118
##### Cards
##### Title
Some text here
Button ##### Title
Some text here
Button ##### Title
Some text here
Button ##### Title
Some text here
Button ##### Title
Some text here
Button ##### Title
Some text here
Button ##### Title
Some text here
Button ##### Title
Some text here
Button ##### Title
Some text here
Button ##### Title
Some text here
Button
#### Search
##### Docked _code_
_search_* _arrow\_back_
- _history_ Item 1
- _history_ Item 2
- _history_ Item 3
_search_* _arrow\_back_
- _history_ Item 1
- _history_ Item 2
- _history_ Item 3
##### Fullscreen _code_
_search_* _arrow\_back_
- _history_ Item 1
- _history_ Item 2
- _history_ Item 3
_search_* _arrow\_back_
- _history_ Item 1
- _history_ Item 2
- _history_ Item 3
#### Selects _code_
- [x] border - [x] round - [x] fill small medium large extra
_arrow\_drop\_down_
_arrow\_drop\_down_ Helper text
_arrow\_drop\_down_ Error text
Label _arrow\_drop\_down_
Label _arrow\_drop\_down_ Helper text
Label _arrow\_drop\_down_ Error text
#### Shapes
loading-indicator boom burst clamshell diamond flower puffy sided-cookie6 sided-cookie7 sided-cookie9 sided-cookie12 soft-boom soft-burst sunny very-sunny
##### Default _code_
none image video button
##### Custom shape _code_
_search_
Button
#### Sliders
##### Default slider _code_
tiny small medium large extra horizontal vertical ##### Value indicator _code_
tiny small medium large extra horizontal vertical ##### Value indicator bottom _code_
tiny small medium large extra horizontal vertical ##### Inset icon _code_
tiny small medium large extra horizontal vertical
_volume\_up_
_add_
_sunny_
##### Slider in field elements _code_
Helper
Error text
_sunny_ _rainy_ Helper
##### Custom slider _code_
primary orange-text green-text
#### Snackbars _code_
bottom top Default Error Primary Secondary Tertiary With action
Some text here
Some text here
Some text here
Some text here
Some text here
Some text here
Action
#### Spaces _code_
space / small-space medium-space large-space
Some text here
Some text here
Some text here
#### Steppers _code_
default fill primary secondary tertiary _done_
- * *
2
- * *
3 _done_
Previous
- * *
2
Current
- * *
3
Next
_done_
Previous
- * *
2
Current
- * *
3
Next
#### Switches _code_
##### Default switch
- [x] - [x] - [x] - [x]
##### Switch with icons
- [x] _wifi_ - [x] _bluetooth_ - [x] _dark\_mode_ - [x] _close_ _done_
##### Switch in field elements
###### Title
Some text here
- [x]
###### Title
Some text here
- [x] Helper text
###### Title
Some text here
- [x] Error text
#### Tables _code_
- [x] min left-align center-align right-align no-space small-space medium-space large-space
##### Default _code_
| Header | Header | Header | | --- | --- | --- | | Cell | Cell | Cell | | Cell | Cell | Cell | | Cell | Cell | Cell | | Footer | Footer | Footer |
##### Stripes _code_
| Header | Header | Header | | --- | --- | --- | | Cell | Cell | Cell | | Cell | Cell | Cell | | Cell | Cell | Cell | | Footer | Footer | Footer |
##### Border _code_
| Header | Header | Header | | --- | --- | --- | | Cell | Cell | Cell | | Cell | Cell | Cell | | Cell | Cell | Cell | | Footer | Footer | Footer |
##### Scroll _code_
surface primary secondary tertiary
| Header | Header | Header | | --- | --- | --- | | Cell | Cell | Cell | | Cell | Cell | Cell | | Cell | Cell | Cell | | Cell | Cell | Cell | | Cell | Cell | Cell | | Cell | Cell | Cell | | Footer | Footer | Footer |
#### Tabs _code_
default left-align center-align right-align page default page left page right horizontal vertical min max
Tab 1Tab 2Tab 3
##### Tab 1
##### Tab 2
##### Tab 3
_home_ Tab 1_home_ Tab 2_home_ Tab 3
##### Tab 1
##### Tab 2
##### Tab 3

##### Tab 1
##### Tab 2
##### Tab 3
#### Textareas _code_
- [x] border - [x] round - [x] fill small medium large extra
Helper text
Error text
Label
Label Helper text
Label Error text
_search_ Label
Label _search_
_search_ Label _search_
#### Toolbars
##### Default _code_
default fill primary secondary tertiary horizontal vertical no-elevate small-elevate medium-elevate large-elevate _videocam\_off__mic__front\_hand__more\_vert__videocam\_off_ Video_mic_ Speech_front\_hand_ Attention_more\_vert_ More
##### Floating _code_
_videocam\_off__mic__front\_hand__more\_vert__call\_end__videocam\_off_ Video_mic_ Mic_front\_hand_ Attention_more\_vert_ More_call\_end_
##### Docked _code_
_videocam\_off__mic__front\_hand__more\_vert__videocam\_off_ Video_mic_ Mic_front\_hand_ Attention_more\_vert_ More
#### Tooltips _code_
no-space small-space medium-space large-space Plain tooltip Tooltip _arrow\_back_ Tooltip _arrow\_upward_ Tooltip _arrow\_downward_ Tooltip _arrow\_forward_ Tooltip
Wrapped tooltip
Tooltip
Rich tooltip
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button
#### Typography
##### Display and headline _code_
small medium large
Display
Display
Display
#### Headline
##### Headline
###### Headline
##### Formatting _code_
link italic
bold
underline
overline
upper
lower
capitalize
small-text
medium-text
large-text
`code`_emphasized_**strong****bold**
##### Line spacing _code_
no-line tiny-line small-line medium-line large-line extra-line
##### Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
##### Blockquote, pre and code _code_
> First line. > > Second line. > > Third line.
First line. Second line. Third line. ``` // This logs a message to the console console.log('Hello, world!') ```
The function`console.log()` prints a log message on console
#### Waves and ripples _code_
Wave Ripple Slow ripple Fast ripple Wave Ripple Slow ripple Fast ripple
Made with love and beer, cheers 💛🍻
Code
Documentation_description__close_