Suprstylin

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium sed odio facilis dignissimos laborum ut soluta lorem rerum! Corrupti quibusdam, quas error natus labore libero ducimus distinctio obcaecati nobis maxime neque.

typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse adipisci quisquam veniam, odio illum sed maiores aspernatur consequuntur excepturi quos! Repellat unde excepturi vitae aut voluptas fugiat voluptatum iusto, quaerat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse adipisci quisquam veniam, odio illum sed maiores aspernatur consequuntur excepturi quos! Repellat unde excepturi vitae aut voluptas fugiat voluptatum iusto, quaerat.

buttons

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum doloribus nisi, excepturi earum debitis quisquam? Error accusantium autem rerum assumenda iusto voluptates vero, doloribus, repellendus aliquid ipsum, iure beatae sunt!

Anchor

Anchor

<!-- Standard buttons -->
<a class="button" href="#">Anchor</a>
<button>Button</button>
<input type="submit" value="Submit" />
<input type="button" value="Button input" />

<!-- Primary buttons -->
<a class="button button-primary" href="#">Anchor</a>
<button class="button-primary">Button</button>
<input class="button-primary" type="submit" value="Submit">
<input class="button-primary" type="button" value="Button input">
forms

tables

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ipsam quibusdam libero, nobis earum totam doloremque veritatis expedita deserunt cum et distinctio, placeat dolorum in maxime, voluptates ratione optio nihil!

Name Age Height
Stephen Curry 27 1,91
Klay Thompson 25 2,01
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Height</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Stephen Curry</td>
      <td>27</td>
      <td>1,91</td>
    </tr>
    <tr>
      <td>Klay Thompson</td>
      <td>25</td>
      <td>2,01</td>
    </tr>
  </tbody>
</table>
code

Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.

.some-class {
  background-color: red;
}
blockquote

Enta in de dance, plug it in and we begin

— Groove Armada
<blockquote>
  <p>
    Enta in de dance, plug it in and we begin
  </p>
  <footer>— Groove Armada</footer>
</blockquote>
lists

Unordered list:

  • Lorem
  • Ipsum
  • Dolor

Ordered list:

  1. Lorem
  2. Ipsum
  3. Dolor
<!-- Unordered list -->
<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dlior</li>
</ol>
keyboard

command shift C to inspect element.
command option I to open DevTools.

<kbd>command</kbd> <kbd>shift</kbd> <kbd>C</kbd> to inspect element.
<kbd>command</kbd> <kbd>option</kbd> <kbd>I</kbd> to open DevTools.
abbreviation

Hover over to see the abbreviation: CSS

<abbr title="Cascading StyleSheets">CSS</abbr>
spinner

<p class="spinner"></p>
colors

Yellow 10
#FDE876

Yellow 20
#FDD600

Yellow 30
#DBB100

Yellow 40
#BE9B00

Yellow 50
#8C7300

Yellow 60
#735F00

Yellow 70
#574A00

Yellow 80
#3C3200

Yellow 90
#281E00

Yellow 100
#020100

Green 10
#C8F08F

Green 20
#B4E051

Green 30
#8CD211

Green 40
#5AA700

Green 50
#4B8400

Green 60
#2D660A

Green 70
#144D14

Green 80
#0A3C02

Green 90
#0C2808

Green 100
#010200

Teal 10
#A7FAE6

Teal 20
#6EEDD8

Teal 30
#41D6C3

Teal 40
#00B4A0

Teal 50
#008571

Teal 60
#006D5D

Teal 70
#005448

Teal 80
#003C32

Teal 90
#012B22

Teal 100
#000202

Blue 10
#C0E6FF

Blue 20
#7CC7FF

Blue 30
#5AAAFA

Blue 40
#5596E6

Blue 50
#4178BE

Blue 60
#325C80

Blue 70
#264A60

Blue 80
#1D3649

Blue 90
#152935

Blue 100
#010205

Purple 10
#EED2FF

Purple 20
#D7AAFF

Purple 30
#BA8FF7

Purple 40
#AF6EE8

Purple 50
#9855D4

Purple 60
#734098

Purple 70
#562F72

Purple 80
#412356

Purple 90
#311A41

Purple 100
#030103

Magenta 10
#FFD2FF

Magenta 20
#FF9EEE

Magenta 30
#FF71D4

Magenta 40
#FF3CA0

Magenta 50
#DB2780

Magenta 60
#A6266E

Magenta 70
#7C1C58

Magenta 80
#601146

Magenta 90
#3A0B2E

Magenta 100
#040102

Red 10
#FFD2DD

Red 20
#FFA5B4

Red 30
#FF7D87

Red 40
#FF5050

Red 50
#E71D32

Red 60
#AD1625

Red 70
#8C101C

Red 80
#6E0A1E

Red 90
#4C0A17

Red 100
#040001

Orange 10
#FFD791

Orange 20
#FFA573

Orange 30
#FF7832

Orange 40
#FF5003

Orange 50
#D74108

Orange 60
#A53725

Orange 70
#872A0F

Orange 80
#6D120F

Orange 90
#43100B

Orange 100
#030100

Gray 10
#eaeaea

Gray 20
#d8d8d8

Gray 30
#c0bfc0

Gray 40
#a6a5a6

Gray 50
#949394

Gray 60
#777677

Gray 70
#595859

Gray 80
#464646

Gray 90
#343334

Gray 100
#272727

Neutral White 1
#fcfcfc

Neutral White 2
#f9f9f9

Neutral White 3
#f6f6f6

Neutral White 4
#f3f3f3