# Sample Components

This is a list of components I've made for making websites quicker. They're just pre-styled things you commonly need to do HTML first layouts and designs.

## Shapes

I'm a placeholder.

## Grids

0,0 1,0 0,1 1,1

## Blocks & Bars

<block>

Use a block to automatically flex content vertically.

Like these two lines are done.

Image

Use a bar to flex things horizontally.

Image <block> You can also combine them in arbitrary ways to layout your content. </block> 1 2 3 </block>

## Stack

A stack lets you place multiple elements on top of eachother, like with layers in nearly every single layout composition system in existence for the last 500 years.

<stack> I'm on bottom

# Hello

## There

</stack>

## Code

    if(var != 'string') {
      console.log("test");
    }

You should type `ls -l` to list the directory.

`if(var != 'string')`

## Highlight/Marking

Default This is an aside. You use it to call out something specific.
Info This is an aside. You use it to call out something specific.
Warning A warning aside.
Alert An alert aside.

This is some marked text.

## Details

Details Test
A test of the details thing.

## Forms

<card> <top>Test Form</top> <middle> What Fruit?
Name </middle> <bottom>
</bottom> </card>

## Cards

Cards organize information vertically.

<card> <top>Image</top> <middle>This shows a top large image with some text in the middle.</middle> <bottom>
</bottom> </card>

## Header/Nav

If you put nav inside header it "just works".

That's an example of a header with a nav bar in it.