Build material design in record time, without stress for devs

Source: https://www.beercss.com/

_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.

- _mail_ Gmail

- Material.io

- _format\_paint_ Material Dynamic Colors

- _play\_arrow_ Music Player

- _tv_ Netflix

- _open\_in\_new_ Reddit

- _directions\_car_ Uber

- _smart\_display_ Youtube

- * *

- _code_ Codepen

!Image 1[](https://github.com/beercss/beercss)_palette_ _collections_ _dark\_mode_

!Image 2

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

![Image 3 #### Iron RDP](https://github.com/Devolutions/IronRDP)

![Image 4 #### Materialious](https://github.com/Materialious/Materialious)

![Image 5 #### Svelte tiny virtual list](https://github.com/jonasgeiler/svelte-tiny-virtual-list)

![Image 6 #### UFC Ripper](https://github.com/m4heshd/ufc-ripper)

![Image 7 #### Purplix.io](https://github.com/WardPearce/Purplix.io)

![Image 8 #### Haze editor](https://github.com/bethropolis/haze-editor)

![Image 9 #### Kdomskia](https://github.com/kdomskia/kdomskia)

![Image 10 #### Elden Ring Cheat Sheet CN](https://github.com/imhlq/EldenRingCheatSheetCN)

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

Codepen Documentation _description__close_

Main layout on Codepen All 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

!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

!Image 50

##### Title

Some text here

Button

!Image 51

##### Title

Some text here

Button

!Image 52

##### Title

Some text here

Button

!Image 53

##### Title

Some text here

Button

!Image 54

##### Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button

!Image 55

##### Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button

!Image 56

##### Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button

!Image 57

##### Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button

!Image 58

##### Title

_more\_vert_

!Image 59

##### Title

_more\_vert_

!Image 60

##### Title

_more\_vert_

!Image 61

##### Title

_more\_vert_

!Image 62

##### Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button

!Image 63

##### 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

#### 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

##### Multiple levels

Multiple levels

First

Second

Third

##### 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

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 icons Documentation _description__close_ ##### SVG

Get SVG Documentation _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

##### 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

##### 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

##### Links _code_

- Item

##### Nested _code_

- Item

- * Item

- Item

##### Expansion _code_

- Item

* Header 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 ![Image 84](javascript:;)![Image 85](javascript:;)![Image 86](javascript:;)![Image 87](javascript:;)![Image 88](javascript:;)![Image 89](javascript:;)![Image 90](javascript:;)![Image 91](javascript:;)![Image 92](javascript:;)![Image 93](javascript:;)![Image 94](javascript:;)![Image 95](javascript:;)![Image 96](javascript:;)![Image 97](javascript:;)![Image 98](javascript:;)![Image 99](javascript:;)

#### 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

max

- * *

min

max

min

- * *

max

min

##### Navigations _code_

left-align center-align right-align

Button Chip _home_!Image 102

- * *

Button Chip _home_

max

!Image 103

- * *

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

##### Top

##### Bottom

##### Right

#### 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

Action

#### Spaces _code_

space / small-space medium-space large-space

Some text here

#### Steppers _code_

default fill primary secondary tertiary _done_

- * *

3 _done_

- * *

Current

- * *

_done_

- * *

Current

- * *

#### 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

![Image 124Tab 1](javascript:;)![Image 125Tab 2](javascript:;)![Image 126Tab 3](javascript:;)

##### 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

#### 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_