Hello
This is a simple overview of the possible components in this system.
Simple components
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
Use the .display class on a paragraph to show something large. Usually standing alone.
The .lead class on a paragraph can come before a regular paragraph. As an introduction.
See, i am a regular paragraph to demonstrate the sizing.
This is the title, with a following lead text
Ha ha, you're funny i'll kill you last to pet a cat, rub its belly, endure blood and agony, quietly weep, keep rubbing belly
Cat ipsum dolor sit amet, only use one corner of the litter box or chirp at birds so vommit food and eat it again. Thinking about you i'm joking it's food always food making bread on the bathrobe, fight an alligator and win. Fight own tail eat half my food and ask for more so curl into a furry donut cat milk copy park pee walk owner escape bored tired cage droppings sick vet vomit meow meow you are my owner so here is a dead rat and i will be pet i will be pet and then i will hiss. Sweet beast that box? i can fit in that box and poop in litter box, scratch the walls throw down all the stuff in the kitchen i want to go outside let me go outside nevermind inside is better. Scoot butt on the rug poop in litter box, scratch the walls. Chase mice i like cats because they are fat and fluffy or playing with balls of wool spill litter box, scratch at owner, destroy all furniture, especially couch. Catching very fast laser pointer spread kitty litter all over house, yet run outside as soon as door open prance along on top of the garden fence, annoy the neighbor's dog and make it bark.
This is some code
This is some code
This is some blockquote
This is some blockquote
This is a link inside a paragraph
This is a link inside a paragraph
You can use Google's Material icon font (outlined)
Anchor buttons
A primary Button A secondary Button A tertiary Button A primary Button (full-width) A Button with icon«Button» buttons
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
Complex components
Layered cards adapt their colors, resp. stack them.
Demo of cards layouts
Default cards / grid (.cards-grid) — Usually for many cards with a realatively small size.
width-xs height-mwidth-swidth-mwidth-lwidth-xlFlexbox cards — used for larger content cards
width-xs height-mwidth-swidth-mwidth-lwidth-xl