Improve component documentation with use information and visuals

[TYRANTHOSAURUS]

Goals

1. Instruct users on the capabilities of each individual component so they know how to build their own template better
2. Provide quick building blocks for users so they can select and copy different styled components to their template from docs.
3. Provide information about components props, API so users know how to use them.

Background

It's very tough to understand some components as a beginner such as Head, Code-Inline etc. There's no documentation at all what this does, why we need it or how we should apply it.

Proposal

1. Show examples ready to use buttons users can copy in their template
2. Display differences in props, styling
3. Add API documentation

Example: Antd

[gabrielmfern]

Seems like your screenshots didn't load in properly onto github

[gabrielmfern]

Having an API reference documenting what we do to the props, or what changes we make would be amazing, and certainly a crazy improvement on the DX.

I would to love hear some more suggestions from you if you have any on this, I'm working on some other improvements to the docs as well and I'll try to squeeze this in for the more complicated components in a few days.