Snacks & Munchies
Was gibt es hier?
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
starstarstarstarstar
Billie Green
Vegane Salami Baguette-Style, 70g
DEMO der Elemente:
Colors
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
background
surface-container-lowest
surface-container-low
surface-container
surface-container-high
surface-container-highest
Others
inverse-primary
inverse-primary-border
inverse-primary-text
App bars
Top app bars
Headline small
Headline medium
Bottom app bars
Badges
Common badges
Inline badge
Cards
Title
Some text here
Title
Some text here
Title
Some text here
Title
Some text here
Title
Some text here
Title
Some text here
Title
Some text here
Title
Some text here
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.
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.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Title
Some text here
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Checkboxes
Default checkbox
Checkbox with icons
Checkbox in field elements
Helper text
Error text
Chips
Containers
Side content
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.
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
Directions
Dividers
Some text here
Some text here
Some text here
Expansions
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
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.
Fieldsets
Grids
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
SVG icons
Image icons
Other libs
Font Awesomeopen_in_new
Pictogrammersopen_in_new
Inputs
Helper text
Error text
Helper text
Error text
search
search
searchsearch
Custom inputs
Layouts
Positions
Position
Lorem ipsum dolor...
Alignments
Alignment
Lorem ipsum dolor...
Empty states
mail
You have no new messages
Click the button to start a conversation
mail
You've successfully signed up
Click the button to invite your friends
person
You are not following anyone
Start to meet new friends
Blurred elements
Card
Some text here
Shadowed elements
Card
Some text here
Lists
Headline and supporting text
Headline
Headline
Supporting text
Wave effect
Headline
Headline
Supporting text
Icons
homeHeadline
Headline
Supporting text
Leading media or avatar
Headline
Headline
Supporting text
List expansions
Media
Pages
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
Linear (default)
Circular
Custom progressbar
Radios
Default radio
Radio with icons
Radio in field elements
Helper text
Error text
Responsive
Scrolls
Chips
Images
Cards
Title
Some text here
Title
Some text here
Title
Some text here
Title
Some text here
Title
Some text here
Title
Some text here
Title
Some text here
Title
Some text here
Title
Some text here
Title
Some text here
Search
Docked
Fullscreen
Selects
arrow_drop_down
arrow_drop_downHelper text
arrow_drop_downError text
arrow_drop_down
arrow_drop_downHelper text
arrow_drop_downError text
Helper textError textSliders
Default slider
Slider with tooltip
Slider with icon
Slider in field elements
Helper
Error text
sunnyHelperrainy
Custom slider
Snackbars
Spaces
Some text here
Some text here
Some text here
Steppers
Switches
Default switch
Switch with icons
Switch in field elements
Helper text
Error text
Tables
Default
| Header | Header | Header |
|---|---|---|
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Footer | Footer | Footer |
Stripes
| Header | Header | Header |
|---|---|---|
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Footer | Footer | Footer |
Border
| Header | Header | Header |
|---|---|---|
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Footer | Footer | Footer |
Scroll
| Header | Header | Header |
|---|---|---|
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Cell | Cell | Cell |
| Footer | Footer | Footer |
Textareas
Helper text
Error text
Helper text
Error text
search
search
searchsearch
Tooltips
Typography
Display and headline
Display
Display
Display
Headline
Headline
Headline
Formatting
Line spacing
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
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
Made with love and beer, cheers 💛🍻