Everything but the kitchen sink

The purpose of this page is to showcase all the elements at my disposal for building this site. Things like typography, form elements, buttons, widgets, ect. A lot of what's here isn't used anywhere on my site (...yet) but are things I've styled and prepared incase I want to use them in the future.

Typography

Text Styles
Bold / Strong
Italic / Emphasis
Delete / Strikethrough
small
fine-print
Mark
kbd
code
First letter
Headings

Accent-Lined Heading

With Subheading

Heading 1

Subheading 1

Heading 2

Subheading 2

Heading 3

Subheading 3

Heading 4

Subheading 4

Heading 5
Subheading 5
Heading 6
Subheading 6
Lists
Unordered Lists
  • List item 1
  • List item 2
  • List item 3
Ordered Lists
  1. List item 1
  2. List item 2
  3. List item 3
Link Lists
Code Blocks
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
--checked: #{bg-img-svg('check', $light-grey-100)};

@media( prefers-color-scheme: dark ) {
  --checked: #{bg-img-svg('check', $pink-900)};
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
  background: {
    color: var(--accent-color);
    image: var(--checked)
    size: 1rem;
    position: center;
    repeat: no-repeat;
  }
}
Blockquotes

This cosmic dance of bursting decadence and withheld permissions twists all our arms collectively, but if sweetness can win, and it can, then I'll still be here tomorrow to high-five you yesterday, my friend. Peace.

Tart Toter

Forms

Inputs
Selects
Checkboxes & Radios
checked checkbox Checkboxes
radio checked Radio Buttons

Widgets

Accordians
Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Avatars
Micah Ilbery
Micah Ilbery
Badges
Buttons
Panels
Pink
Purple
Cyan
Blue
Green
Yellow
Orange
Red
Default
Progress Bars
Pink
Purple
Cyan
Blue
Green
Yellow
Orange
Red
Default
Notifications
Pink Notification
Purple Notification
Learn more...
Cyan Notification
Blue Notification
Green Notification
Yellow Notification
Orange Notification
Red Notification
Default Notification
Switches
Tags
Video Embeds

Grids

Full
Constrained
Half
Half
Third
Third
Third
Two Thirds
Third
Fourth
Fourth
Fourth
Fourth
Half
Fourth
Fourth
Three Fourths
Fourth

Colors

Pink

100 fcb4d9
300 ec7cbd
500 e03c9e
700 c8107c
900 9d135d

Purple

100 c7b1ff
300 ac7afa
500 8439d1
700 6b15bb
900 460696

Cyan

100 b9fff2
300 70f8e4
500 00dccf
700 00a099
900 007876

Blue

100 97c9fb
300 7eb3fa
500 4288f4
700 3266e2
900 0b2c9e

Green

100 b9edbd
300 73df8e
500 2bc15f
700 049042
900 006c30

Yellow

100 fff4c3
300 fee07b
500 f8c822
700 d4a000
900 986100

Orange

100 feab7e
300 fe8855
500 f2592a
700 c22d0c
900 99140d

Red

100 ffabab
300 f68487
500 ee445b
700 c91f44
900 941630

Light Grey

100 fdfdff
300 f0f2f8
500 cdd0d9
700 a5acb7
900 6f7681

Dark Grey

100 898a97
300 696b77
500 42434a
700 2f3033
900 1a1b1e