Styling

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Please don't use h5 or h6 in your content. We don't style them at all out of the box because h4 elements are already so small that they are the same size as the body copy.
What are we supposed to do with an h5, make it smaller than the body copy?

Paragraphs List:

Lorem ipsum dolor sit Mauris sollicitudin enim vel consequat egestas. Donec consequat quam in tellus aliquet pellentesque. Nunc tellus libero, tristique at elementum sit amet, aliquet id neque. Vivamus tristique nisl sit amet nulla faucibus scelerisque. Aliquam eros urna, sagittis vitae placerat a, interdum sed lectus. Suspendisse potenti. Duis imperdiet varius nisi, vel rutrum dolor. Ut pellentesque lectus ac placerat iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a accumsan enim, vitae vehicula risus. Nulla eu gravida enim. Suspendisse vitae pretium orci, a pellentesque est. Nulla eu libero facilisis, imperdiet lorem vel, sodales urna. Mauris sollicitudin enim vel consequat egestas. Donec consequat quam in tellus aliquet pellentesque. Nunc tellus libero, tristique at elementum sit amet, aliquet id neque. Vivamus tristique nisl sit amet nulla faucibus scelerisque. Aliquam eros urna, sagittis vitae placerat a, interdum sed lectus. Suspendisse potenti. Duis imperdiet varius nisi, vel rutrum dolor. Ut pellentesque lectus ac placerat iaculis.

I almost forgot to mention links, like this link to the Tailwind CSS website. We almost made them blue but that's so yesterday, so we went with dark gray, feels edgier.

Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be bad.

Ordered List:

  1. We want everything to look good out of the box.
  2. Really just the first reason, that's the whole point of the plugin.
  3. Here's a third pretend reason though a list with three items looks more realistic than a list with two items.

Unordered List:

  • We want everything to look good out of the box.
  • Really just the first reason, that's the whole point of the plugin.
  • Here's a third pretend reason though a list with three items looks more realistic than a list with two items.

Nested lists:

  1. Nested lists are rarely a good idea.
    • You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read.
    • Nested navigation in UIs is a bad idea too, keep things as flat as possible.
    • Nesting tons of folders in your source code is also not helpful.
  2. Since we need to have more items, here's another one.
    • I'm not sure if we'll bother styling more than two levels deep.
    • Two is already too much, three is guaranteed to be a bad idea.
    • If you nest four levels deep you belong in prison.
  3. Two items isn't really a list, three is good though.
    • Again please don't nest lists if you want people to actually read your content.
    • Nobody wants to look at this.
    • I'm upset that we even have to bother styling this.

Tables

WrestlerOriginFinisher
Bret "The Hitman" HartCalgary, ABSharpshooter
Stone Cold Steve AustinAustin, TXStone Cold Stunner
Randy SavageSarasota, FLElbow Drop
VaderBoulder, COVader Bomb
Razor RamonChuluota, FLRazor's Edge

Buttons:

Primary

Secondary