Headings

Heading `h1`

Heading `h2`

Heading `h3`

Heading `h4`

Heading `h5`

Heading `h6`

Horizontal line

Here is a horizontal line ( <hr>) 👇

Text

We're no strangers to love, You know the rules and so do I, A full commitment's what I'm thinking of, You wouldn't get this from any other guy, I just wanna tell you how I'm feeling, Gotta make you understand, Never gonna give you up, Never gonna let you down, Never gonna run around and desert you, Never gonna make you cry, Never gonna say goodbye, Never gonna tell a lie and hurt you.

Link

Here is a sample link.

Button

Default	Disabled

Dropdown

Default	Disabled

Entry field

Blockquote

Remember this line from Jerry Maguire:

We live in a cynical world. A cynical world. And we work in a business of tough competitors. I love you. You... complete me.

And she responded to him:

Shut up... shut up, you had me at hello...

Lists

One can always list a few things:

First thing
Second thing
Last but not least thing

One can always list a few ordered things:

First thing
Second thing
Last but not least thing

One can always list a few nested things:

Parent
- That has some children
Grand parent
1. Parent
  - That has some children

<code>

Here is some inlined code while(true) { stay(happy) }, it's useful sometimes.

<pre>

while(true) { stay(happy) }

<pre><code>

while(true) { stay(happy) }

Table

This is a table
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4

Checkbox

Radio

Input with type

Buttons

<input type="button">, <input type="submit">, and <input type="reset">

Color

<input type="color">

Input with no `type` attribute

Date

<input type="date">

Email

<input type="email">

Enter an invalid email and press enter

File

<input type="file">

Image

<input type="image">

Number

<input type="number">

Image example

Images are responsive by default

Image by Chris Abney

CSS Custom Properties

underwear.css uses CSS Custom Properties (CSS Variables) that you can configure. You can also use them by yourself, to adhere to the consistent look and feel.

Name	Default value	Sample
`--white`	`#fff`
`--gray-1`	`#f9f9f9`
`--gray-2`	`#f6f6f6`
`--gray-3`	`#efefef`
`--gray-4`	`#e7e7e7`
`--gray-5`	`#e1e1e1`
`--gray-6`	`#868e96`
`--gray-7`	`#606c76`
`--transparent-black`	`#00000033`
`--blue`	`#0084b4`
`--dark-blue`	`#1a587f`
`--dark`	`#141d26`
`--green`	`#3fa13f`
`--inky`	`#1b2936`
`--livid`	`#8696a5`
`--mouse`	`#e7ecf0`
`--red`	`#df4534`
`--yellow`	`#ffdb25`
`--anchor-color`	`var(--blue)`
`--blockquote-border-color`	`var(--livid)`
`--button-active-background-color`	`var(--gray-3)`
`--button-background-color`	`var(--white)`
`--button-hover-background-color`	`var(--gray-1)`
`--button-text-color`	`var(--dark)`
`--code-block-background-color`	`var(--gray-2)`
`--code-block-border-color`	`var(--blue)`
`--code-block-color`	`var(--red)`
`--default-body-color`	`var(--dark)`
`--default-font-size`	`14px`	Hello World
`--disabled-background-color`	`var(--gray-2)`
`--disabled-text-color`	`var(--gray-6)`
`--editable-background-color`	`var(--gray-2)`
`--horizontal-line-color`	`var(--gray-4)`
`--shadow-color`	`var(--transparent-black)`
`--table-border-color`	`var(--gray-5)`
`--font-family-sans-serif`	`"Roboto","Segoe UI","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`	Hello World
`--font-family-monospace`	`SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace`	Hello World