Hello

This is a simple overview of the possible components in this system.

Simple components

Type without tag
Cats making all the muffins stare out cat door then go back inside flex claws on the human's belly and purr like a lawnmower.
Typographic scale (removed top margin)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Display

Use the .display class on a paragraph to show something large. Usually standing alone.

Lead

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.

Typography in bodycopy

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.

Code
This is some code
This is some code
Blockquode
This is some blockquote
This is some blockquote
Buttons

«Button» buttons


«Button» buttons

Icons

You can use Google's Material icon font (outlined)

face home undo

«Button» buttons

Tables
Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Horizontal rules

Complex components

UI Layers

Layered cards adapt their colors, resp. stack them.

layer 1
layer 2
layer 3
layer 4
layer 1 (inverted colors)
layer 2
layer 3
layer 4
Card Layouts

Demo of cards layouts

Default cards / grid (.cards-grid) — Usually for many cards with a realatively small size.

card 1 width-xs height-m
card 2 width-s
card 3 width-m
card 4 width-l
card 5 width-xl
card 6
card 7
card 8
card 9

Flexbox cards — used for larger content cards

card 1 width-xs height-m
card 2 width-s
card 3 width-m
card 4 width-l
card 5 width-xl
card 6
card 7
card 8
card 9